@papernote/ui 1.9.2 → 1.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/NotificationBell.d.ts +7 -1
- package/dist/components/NotificationBell.d.ts.map +1 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.esm.js +42 -48
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +42 -48
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/NotificationBell.stories.tsx +71 -0
- package/src/components/NotificationBell.tsx +12 -4
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
/**
|
|
2
3
|
* Represents a single notification item
|
|
3
4
|
*/
|
|
@@ -71,6 +72,11 @@ export interface NotificationBellProps {
|
|
|
71
72
|
* - 'outlined': Visible border/container with subtle background
|
|
72
73
|
*/
|
|
73
74
|
bellStyle?: NotificationBellStyle;
|
|
75
|
+
/**
|
|
76
|
+
* Custom icon to use instead of the default bell
|
|
77
|
+
* Use this to provide your own notification icon
|
|
78
|
+
*/
|
|
79
|
+
icon?: React.ReactNode;
|
|
74
80
|
}
|
|
75
81
|
/**
|
|
76
82
|
* NotificationBell - A bell icon with badge and dropdown for displaying notifications
|
|
@@ -100,5 +106,5 @@ export interface NotificationBellProps {
|
|
|
100
106
|
* />
|
|
101
107
|
* ```
|
|
102
108
|
*/
|
|
103
|
-
export default function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading, dropdownPosition, maxHeight, size, emptyMessage, viewAllText, disabled, className, variant, showUnreadInHeader, bellStyle, }: NotificationBellProps): import("react/jsx-runtime").JSX.Element;
|
|
109
|
+
export default function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading, dropdownPosition, maxHeight, size, emptyMessage, viewAllText, disabled, className, variant, showUnreadInHeader, bellStyle, icon: customIcon, }: NotificationBellProps): import("react/jsx-runtime").JSX.Element;
|
|
104
110
|
//# sourceMappingURL=NotificationBell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationBell.d.ts","sourceRoot":"","sources":["../../src/components/NotificationBell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NotificationBell.d.ts","sourceRoot":"","sources":["../../src/components/NotificationBell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAS9D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,wCAAwC;IACxC,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC/C,wCAAwC;IACxC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gCAAgC;AAChC,MAAM,MAAM,wBAAwB,GAChC,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AAEZ,gCAAgC;AAChC,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,uCAAuC;IACvC,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/D,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,wBAAwB,CAAC;IAC5C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAuED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,WAAW,EAAE,mBAAmB,EAChC,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,SAAS,EACT,OAAe,EACf,gBAAiC,EACjC,SAAmB,EACnB,IAAW,EACX,YAAiC,EACjC,WAAsC,EACtC,QAAgB,EAChB,SAAc,EACd,OAAmB,EACnB,kBAA0B,EAC1B,SAAmB,EACnB,IAAI,EAAE,UAAU,GACjB,EAAE,qBAAqB,2CAiWvB"}
|
package/dist/index.d.ts
CHANGED
|
@@ -4191,6 +4191,11 @@ interface NotificationBellProps {
|
|
|
4191
4191
|
* - 'outlined': Visible border/container with subtle background
|
|
4192
4192
|
*/
|
|
4193
4193
|
bellStyle?: NotificationBellStyle;
|
|
4194
|
+
/**
|
|
4195
|
+
* Custom icon to use instead of the default bell
|
|
4196
|
+
* Use this to provide your own notification icon
|
|
4197
|
+
*/
|
|
4198
|
+
icon?: React__default.ReactNode;
|
|
4194
4199
|
}
|
|
4195
4200
|
/**
|
|
4196
4201
|
* NotificationBell - A bell icon with badge and dropdown for displaying notifications
|
|
@@ -4220,7 +4225,7 @@ interface NotificationBellProps {
|
|
|
4220
4225
|
* />
|
|
4221
4226
|
* ```
|
|
4222
4227
|
*/
|
|
4223
|
-
declare function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading, dropdownPosition, maxHeight, size, emptyMessage, viewAllText, disabled, className, variant, showUnreadInHeader, bellStyle, }: NotificationBellProps): react_jsx_runtime.JSX.Element;
|
|
4228
|
+
declare function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading, dropdownPosition, maxHeight, size, emptyMessage, viewAllText, disabled, className, variant, showUnreadInHeader, bellStyle, icon: customIcon, }: NotificationBellProps): react_jsx_runtime.JSX.Element;
|
|
4224
4229
|
|
|
4225
4230
|
/**
|
|
4226
4231
|
* Configuration for how data should display in card view
|
package/dist/index.esm.js
CHANGED
|
@@ -10152,7 +10152,7 @@ function getPopoverPlacement(position) {
|
|
|
10152
10152
|
* />
|
|
10153
10153
|
* ```
|
|
10154
10154
|
*/
|
|
10155
|
-
function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading = false, dropdownPosition = 'bottom-right', maxHeight = '400px', size = 'md', emptyMessage = 'No notifications', viewAllText = 'View all notifications', disabled = false, className = '', variant = 'compact', showUnreadInHeader = false, bellStyle = 'ghost', }) {
|
|
10155
|
+
function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading = false, dropdownPosition = 'bottom-right', maxHeight = '400px', size = 'md', emptyMessage = 'No notifications', viewAllText = 'View all notifications', disabled = false, className = '', variant = 'compact', showUnreadInHeader = false, bellStyle = 'ghost', icon: customIcon, }) {
|
|
10156
10156
|
const [isOpen, setIsOpen] = useState(false);
|
|
10157
10157
|
// Calculate unread count if not provided
|
|
10158
10158
|
const unreadCount = useMemo(() => {
|
|
@@ -10197,6 +10197,8 @@ function NotificationBell({ notifications, unreadCount: providedUnreadCount, onM
|
|
|
10197
10197
|
md: 'p-3',
|
|
10198
10198
|
lg: 'p-4',
|
|
10199
10199
|
};
|
|
10200
|
+
// Default bell icon or custom icon
|
|
10201
|
+
const bellIcon = customIcon || jsx(Bell, { className: `${iconSizes[size]} text-ink-600` });
|
|
10200
10202
|
// Trigger button
|
|
10201
10203
|
const triggerButton = bellStyle === 'outlined' ? (jsxs("div", { className: "relative inline-block", children: [jsx("button", { className: `
|
|
10202
10204
|
${outlinedSizeClasses[size]}
|
|
@@ -10208,16 +10210,16 @@ function NotificationBell({ notifications, unreadCount: providedUnreadCount, onM
|
|
|
10208
10210
|
${className}
|
|
10209
10211
|
`, disabled: disabled, "aria-label": unreadCount > 0
|
|
10210
10212
|
? `Notifications - ${unreadCount} unread`
|
|
10211
|
-
: 'Notifications', children:
|
|
10213
|
+
: 'Notifications', children: bellIcon }), unreadCount > 0 && (jsx("span", { className: `
|
|
10212
10214
|
absolute -top-1 -right-1
|
|
10213
10215
|
flex items-center justify-center
|
|
10214
10216
|
min-w-[18px] h-[18px] px-1.5
|
|
10215
10217
|
rounded-full text-white font-semibold text-[11px]
|
|
10216
10218
|
bg-error-500 shadow-sm
|
|
10217
10219
|
pointer-events-none
|
|
10218
|
-
`, "aria-label": `${unreadCount > 99 ? '99+' : unreadCount} notifications`, children: unreadCount > 99 ? '99+' : unreadCount }))] })) : (jsx(Button, { variant: "ghost", iconOnly: true, size: size, disabled: disabled, badge: unreadCount > 0 ? unreadCount : undefined, badgeVariant: "error", "aria-label": unreadCount > 0
|
|
10220
|
+
`, "aria-label": `${unreadCount > 99 ? '99+' : unreadCount} notifications`, children: unreadCount > 99 ? '99+' : unreadCount }))] })) : (jsx(Button, { variant: "ghost", iconOnly: true, size: size, disabled: disabled, icon: bellIcon, badge: unreadCount > 0 ? unreadCount : undefined, badgeVariant: "error", "aria-label": unreadCount > 0
|
|
10219
10221
|
? `Notifications - ${unreadCount} unread`
|
|
10220
|
-
: 'Notifications', className: className
|
|
10222
|
+
: 'Notifications', className: className }));
|
|
10221
10223
|
// Header title with optional unread count
|
|
10222
10224
|
const headerTitle = showUnreadInHeader && unreadCount > 0
|
|
10223
10225
|
? `Notifications (${unreadCount} unread)`
|
|
@@ -11273,52 +11275,44 @@ function getAugmentedNamespace(n) {
|
|
|
11273
11275
|
* (A1, A1:C5, ...)
|
|
11274
11276
|
*/
|
|
11275
11277
|
|
|
11276
|
-
|
|
11277
|
-
var hasRequiredCollection;
|
|
11278
|
-
|
|
11279
|
-
function requireCollection () {
|
|
11280
|
-
if (hasRequiredCollection) return collection;
|
|
11281
|
-
hasRequiredCollection = 1;
|
|
11282
|
-
class Collection {
|
|
11278
|
+
let Collection$3 = class Collection {
|
|
11283
11279
|
|
|
11284
|
-
|
|
11285
|
-
|
|
11286
|
-
|
|
11287
|
-
|
|
11288
|
-
|
|
11289
|
-
|
|
11290
|
-
|
|
11291
|
-
|
|
11292
|
-
|
|
11293
|
-
|
|
11294
|
-
|
|
11280
|
+
constructor(data, refs) {
|
|
11281
|
+
if (data == null && refs == null) {
|
|
11282
|
+
this._data = [];
|
|
11283
|
+
this._refs = [];
|
|
11284
|
+
} else {
|
|
11285
|
+
if (data.length !== refs.length)
|
|
11286
|
+
throw Error('Collection: data length should match references length.');
|
|
11287
|
+
this._data = data;
|
|
11288
|
+
this._refs = refs;
|
|
11289
|
+
}
|
|
11290
|
+
}
|
|
11295
11291
|
|
|
11296
|
-
|
|
11297
|
-
|
|
11298
|
-
|
|
11292
|
+
get data() {
|
|
11293
|
+
return this._data;
|
|
11294
|
+
}
|
|
11299
11295
|
|
|
11300
|
-
|
|
11301
|
-
|
|
11302
|
-
|
|
11296
|
+
get refs() {
|
|
11297
|
+
return this._refs;
|
|
11298
|
+
}
|
|
11303
11299
|
|
|
11304
|
-
|
|
11305
|
-
|
|
11306
|
-
|
|
11300
|
+
get length() {
|
|
11301
|
+
return this._data.length;
|
|
11302
|
+
}
|
|
11307
11303
|
|
|
11308
|
-
|
|
11309
|
-
|
|
11310
|
-
|
|
11311
|
-
|
|
11312
|
-
|
|
11313
|
-
|
|
11314
|
-
|
|
11315
|
-
|
|
11316
|
-
|
|
11317
|
-
|
|
11304
|
+
/**
|
|
11305
|
+
* Add data and references to this collection.
|
|
11306
|
+
* @param {{}} obj - data
|
|
11307
|
+
* @param {{}} ref - reference
|
|
11308
|
+
*/
|
|
11309
|
+
add(obj, ref) {
|
|
11310
|
+
this._data.push(obj);
|
|
11311
|
+
this._refs.push(ref);
|
|
11312
|
+
}
|
|
11313
|
+
};
|
|
11318
11314
|
|
|
11319
|
-
|
|
11320
|
-
return collection;
|
|
11321
|
-
}
|
|
11315
|
+
var collection = Collection$3;
|
|
11322
11316
|
|
|
11323
11317
|
var helpers;
|
|
11324
11318
|
var hasRequiredHelpers;
|
|
@@ -11327,7 +11321,7 @@ function requireHelpers () {
|
|
|
11327
11321
|
if (hasRequiredHelpers) return helpers;
|
|
11328
11322
|
hasRequiredHelpers = 1;
|
|
11329
11323
|
const FormulaError = requireError();
|
|
11330
|
-
const Collection =
|
|
11324
|
+
const Collection = collection;
|
|
11331
11325
|
|
|
11332
11326
|
const Types = {
|
|
11333
11327
|
NUMBER: 0,
|
|
@@ -20981,7 +20975,7 @@ var engineering = EngineeringFunctions;
|
|
|
20981
20975
|
|
|
20982
20976
|
const FormulaError$b = requireError();
|
|
20983
20977
|
const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
|
|
20984
|
-
const Collection$2 =
|
|
20978
|
+
const Collection$2 = collection;
|
|
20985
20979
|
const H$5 = FormulaHelpers$8;
|
|
20986
20980
|
|
|
20987
20981
|
const ReferenceFunctions$1 = {
|
|
@@ -32609,7 +32603,7 @@ var parsing = {
|
|
|
32609
32603
|
const FormulaError$4 = requireError();
|
|
32610
32604
|
const {Address: Address$1} = requireHelpers();
|
|
32611
32605
|
const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
|
|
32612
|
-
const Collection$1 =
|
|
32606
|
+
const Collection$1 = collection;
|
|
32613
32607
|
const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
|
|
32614
32608
|
const {NotAllInputParsedException} = require$$4;
|
|
32615
32609
|
|
|
@@ -33371,7 +33365,7 @@ var hooks$1 = {
|
|
|
33371
33365
|
const FormulaError$2 = requireError();
|
|
33372
33366
|
const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
|
|
33373
33367
|
const {Prefix, Postfix, Infix, Operators} = operators;
|
|
33374
|
-
const Collection =
|
|
33368
|
+
const Collection = collection;
|
|
33375
33369
|
const MAX_ROW = 1048576, MAX_COLUMN = 16384;
|
|
33376
33370
|
|
|
33377
33371
|
let Utils$1 = class Utils {
|