@iblai/iblai-js 1.0.21 → 1.0.23

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/README.md CHANGED
@@ -30,6 +30,8 @@ npm install react react-dom @reduxjs/toolkit react-redux @iblai/iblai-api
30
30
 
31
31
  `next` (>= 15) is an **optional** peer dependency, required only when using `@iblai/iblai-js/web-containers/next`.
32
32
 
33
+ `@playwright/test` and `@axe-core/playwright` are **optional** peer dependencies, required only when using `@iblai/iblai-js/playwright`.
34
+
33
35
  ## Framework Configuration
34
36
 
35
37
  ### Next.js
@@ -381,6 +383,150 @@ import {
381
383
 
382
384
  ---
383
385
 
386
+ ### `@iblai/iblai-js/playwright`
387
+
388
+ Shared Playwright test utilities for E2E testing across IBL.ai apps. Unlike the other subpaths, this is **not** a re-export — it contains original source code for test infrastructure shared between standalone app repos (mentorai, skillsai).
389
+
390
+ **Requires:** `@playwright/test` and `@axe-core/playwright` as dev dependencies.
391
+
392
+ ```bash
393
+ pnpm add -D @playwright/test @axe-core/playwright dotenv cross-env
394
+ ```
395
+
396
+ #### Config Generation
397
+
398
+ Generate a complete Playwright config with per-browser auth setup projects:
399
+
400
+ ```typescript
401
+ // e2e/playwright.config.ts
402
+ import { createPlaywrightConfig } from '@iblai/iblai-js/playwright';
403
+ import dotenv from 'dotenv';
404
+ import path from 'path';
405
+
406
+ dotenv.config({ path: path.resolve(__dirname, '.env.development') });
407
+
408
+ export default createPlaywrightConfig({
409
+ platforms: [
410
+ {
411
+ name: 'skills',
412
+ dependencies: ['setup'],
413
+ otherTestMatch: ['**skills/*/*.spec.ts'],
414
+ },
415
+ ],
416
+ });
417
+ ```
418
+
419
+ `createPlaywrightConfig` generates browser-specific setup projects (Chrome, Firefox, Safari, Edge) that each run `auth.setup.ts`, then creates test projects for each platform/browser combination. The `devices` option defaults to `['Desktop Chrome', 'Desktop Firefox', 'Desktop Safari', 'Desktop Edge']`.
420
+
421
+ #### Auth Setup
422
+
423
+ Create an `auth.setup.ts` that authenticates once per browser and saves the storage state:
424
+
425
+ ```typescript
426
+ // e2e/auth.setup.ts
427
+ import { test as setup, createAuthSetup } from '@iblai/iblai-js/playwright';
428
+
429
+ setup(
430
+ 'authenticate',
431
+ createAuthSetup({
432
+ hostUrl: process.env.SKILLS_HOST || '',
433
+ authHost: process.env.AUTH_HOST || '',
434
+ appName: 'skills',
435
+ postLoginUrlMatcher: (url) =>
436
+ url.href.includes('/home') || url.href.includes('/start'),
437
+ })
438
+ );
439
+ ```
440
+
441
+ `createAuthSetup` supports four auth flows via the `authFlow` option: `'username_password'` (default), `'magic_link'`, `'sso'`, and `'direct_sso'`. Credentials are read from `PLAYWRIGHT_USERNAME` and `PLAYWRIGHT_PASSWORD` env vars.
442
+
443
+ #### Custom Reporter
444
+
445
+ Re-export the SDK's custom reporter for Playwright:
446
+
447
+ ```typescript
448
+ // e2e/custom-reporter.ts
449
+ export { CustomReporter as default } from '@iblai/iblai-js/playwright';
450
+ ```
451
+
452
+ #### Test Helpers
453
+
454
+ ```typescript
455
+ import {
456
+ // Extended test fixture with step support (optional — most tests use @playwright/test directly)
457
+ test,
458
+ expect,
459
+
460
+ // Navigation
461
+ safeWaitForURL,
462
+ waitForPageLoad,
463
+ isFirefox,
464
+
465
+ // Page interaction
466
+ waitForPageReady,
467
+ checkAdminStatus,
468
+ reliableClick,
469
+ reliableFill,
470
+ waitForDialogReady,
471
+ selectDateFromCalendar,
472
+
473
+ // Accessibility
474
+ expectNoAccessibilityViolations,
475
+ expectNoAccessibilityViolationsOnDialogs,
476
+
477
+ // Auth helpers
478
+ loginWithEmailAndPassword,
479
+ signUpWithEmailAndPassword,
480
+ loginWithMicrosoftIdp,
481
+ AuthFlowBuilder,
482
+ createAuthSetup,
483
+
484
+ // Logging
485
+ logger,
486
+
487
+ // Email testing
488
+ MailsacClient,
489
+
490
+ // Config generation
491
+ createPlaywrightConfig,
492
+ createEnvConfig,
493
+ CustomReporter,
494
+ } from '@iblai/iblai-js/playwright';
495
+ ```
496
+
497
+ #### Environment Variables
498
+
499
+ Tests expect these env vars (set them in `.env.development` or CI):
500
+
501
+ | Variable | Description |
502
+ | --- | --- |
503
+ | `SKILLS_HOST` / `MENTOR_NEXTJS_HOST` | App host URL |
504
+ | `AUTH_HOST` | Auth service URL |
505
+ | `PLAYWRIGHT_USERNAME` | Login username |
506
+ | `PLAYWRIGHT_PASSWORD` | Login password |
507
+ | `AUTH_FLOW` | Auth flow type (`username_password`, `magic_link`, `sso`, `direct_sso`) |
508
+ | `AUTH_IDP` | SSO identity provider name (required for `sso`/`direct_sso` flows) |
509
+
510
+ #### Directory Structure
511
+
512
+ Both mentorai and skillsai follow this layout:
513
+
514
+ ```
515
+ e2e/
516
+ ├── playwright.config.ts # Uses createPlaywrightConfig()
517
+ ├── auth.setup.ts # Uses createAuthSetup()
518
+ ├── custom-reporter.ts # Re-exports CustomReporter
519
+ ├── .env.development # Environment variables
520
+ ├── tests/
521
+ │ ├── utils.ts # App-specific env var exports
522
+ │ ├── helpers.ts # App-specific auth/login helpers
523
+ │ ├── shared.ts # Shared test helper functions
524
+ │ └── <platform>/ # Test spec files by feature
525
+ └── utils/ # App-specific helper modules
526
+ ```
527
+
528
+ ---
529
+
384
530
  ## Relationship to Standalone Packages
385
531
 
386
532
  `@iblai/iblai-js` is a convenience wrapper. Each subpath is a direct re-export from its standalone package:
@@ -392,8 +538,9 @@ import {
392
538
  | `@iblai/iblai-js/web-containers/next` | `@iblai/web-containers/next`|
393
539
  | `@iblai/iblai-js/web-containers/sso` | `@iblai/web-containers/sso` |
394
540
  | `@iblai/iblai-js/web-utils` | `@iblai/web-utils` |
541
+ | `@iblai/iblai-js/playwright` | Original source (not a re-export) |
395
542
 
396
- You can use the standalone packages directly if you only need one module. This unified package is useful when you need multiple IBL libraries and prefer a single dependency.
543
+ You can use the standalone packages directly if you only need one module. This unified package is useful when you need multiple IBL libraries and prefer a single dependency. The `playwright` subpath is unique — it contains original source code rather than re-exporting a standalone package.
397
544
 
398
545
  ## TypeScript
399
546
 
@@ -2,9 +2,10 @@ import * as React from 'react';
2
2
  import React__default, { useRef, useEffect, useState, useCallback, useLayoutEffect, forwardRef, createElement as createElement$1, useMemo, createContext, useReducer, useImperativeHandle, useContext, useDebugValue, isValidElement, Children, PureComponent, cloneElement, Component } from 'react';
3
3
  import { LOCAL_STORAGE_KEYS, TimeTracker, getInitials, useTenantMetadata, isAlphaNumeric32, checkRbacPermission, getTimeAgo, formatRelativeTime as formatRelativeTime$2, ANONYMOUS_USERNAME, combineCSVData, redirectToAuthSpaJoinTenant, redirectToAuthSpa, getAuthSpaJoinUrl } from '@iblai/web-utils';
4
4
  import { useTimeTrackingMutation, useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, useGetRbacPoliciesQuery, usePlatformUsersQuery, usePlatformUserGroupsQuery, useUpdateTemplateMutation, useGetTemplateDetailsQuery, useGetTemplatesQuery, useLazyGetTemplateDetailsQuery, useToggleTemplateMutation, useGetTopicsStatsQuery, useGetUsersStatsQuery, useGetSessionStatsQuery, useGetTopicsDetailsStatsQuery, useGetAccessTimeHeatmapQuery, useGetUserDetailsStatsQuery, useGetTranscriptsConversationHeadlineQuery, useGetAverageRatingQuery, useGetFinancialStatsQuery, useGetDetailedFinancialStatsQuery, useGetTranscriptsMessagesDetailsQuery, useGetTranscriptsMessagesQuery, useGetReportsQuery, useGetReportDetailQuery, useCreateReportMutation, useLazyGetDownloadReportFromURLQuery, useGetMentorPublicSettingsQuery, useGetContentAnalyticsQuery, useGetContentAnalyticsDetailsQuery } from '@iblai/data-layer';
5
+ import { toast, Toaster as Toaster$1 } from 'sonner';
6
+ import { jsx, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
5
7
  import * as ReactDOM from 'react-dom';
6
8
  import ReactDOM__default from 'react-dom';
7
- import { jsx, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
8
9
  import { z as z$1 } from 'zod';
9
10
  import { NotificationSourceTypeEnum, StateEnum } from '@iblai/iblai-api';
10
11
  import { useSearchParams, useRouter, usePathname } from 'next/navigation';
@@ -351,1138 +352,6 @@ function useLocalStorage(key, initialValue) {
351
352
  return [storedValue, setValue, removeValue];
352
353
  }
353
354
 
354
- function __insertCSS(code) {
355
- if (typeof document == 'undefined') return
356
- let head = document.head || document.getElementsByTagName('head')[0];
357
- let style = document.createElement('style');
358
- style.type = 'text/css';
359
- head.appendChild(style)
360
- ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code));
361
- }
362
-
363
- const getAsset = (type)=>{
364
- switch(type){
365
- case 'success':
366
- return SuccessIcon;
367
- case 'info':
368
- return InfoIcon;
369
- case 'warning':
370
- return WarningIcon;
371
- case 'error':
372
- return ErrorIcon;
373
- default:
374
- return null;
375
- }
376
- };
377
- const bars = Array(12).fill(0);
378
- const Loader$1 = ({ visible, className })=>{
379
- return /*#__PURE__*/ React__default.createElement("div", {
380
- className: [
381
- 'sonner-loading-wrapper',
382
- className
383
- ].filter(Boolean).join(' '),
384
- "data-visible": visible
385
- }, /*#__PURE__*/ React__default.createElement("div", {
386
- className: "sonner-spinner"
387
- }, bars.map((_, i)=>/*#__PURE__*/ React__default.createElement("div", {
388
- className: "sonner-loading-bar",
389
- key: `spinner-bar-${i}`
390
- }))));
391
- };
392
- const SuccessIcon = /*#__PURE__*/ React__default.createElement("svg", {
393
- xmlns: "http://www.w3.org/2000/svg",
394
- viewBox: "0 0 20 20",
395
- fill: "currentColor",
396
- height: "20",
397
- width: "20"
398
- }, /*#__PURE__*/ React__default.createElement("path", {
399
- fillRule: "evenodd",
400
- d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
401
- clipRule: "evenodd"
402
- }));
403
- const WarningIcon = /*#__PURE__*/ React__default.createElement("svg", {
404
- xmlns: "http://www.w3.org/2000/svg",
405
- viewBox: "0 0 24 24",
406
- fill: "currentColor",
407
- height: "20",
408
- width: "20"
409
- }, /*#__PURE__*/ React__default.createElement("path", {
410
- fillRule: "evenodd",
411
- d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
412
- clipRule: "evenodd"
413
- }));
414
- const InfoIcon = /*#__PURE__*/ React__default.createElement("svg", {
415
- xmlns: "http://www.w3.org/2000/svg",
416
- viewBox: "0 0 20 20",
417
- fill: "currentColor",
418
- height: "20",
419
- width: "20"
420
- }, /*#__PURE__*/ React__default.createElement("path", {
421
- fillRule: "evenodd",
422
- d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
423
- clipRule: "evenodd"
424
- }));
425
- const ErrorIcon = /*#__PURE__*/ React__default.createElement("svg", {
426
- xmlns: "http://www.w3.org/2000/svg",
427
- viewBox: "0 0 20 20",
428
- fill: "currentColor",
429
- height: "20",
430
- width: "20"
431
- }, /*#__PURE__*/ React__default.createElement("path", {
432
- fillRule: "evenodd",
433
- d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
434
- clipRule: "evenodd"
435
- }));
436
- const CloseIcon = /*#__PURE__*/ React__default.createElement("svg", {
437
- xmlns: "http://www.w3.org/2000/svg",
438
- width: "12",
439
- height: "12",
440
- viewBox: "0 0 24 24",
441
- fill: "none",
442
- stroke: "currentColor",
443
- strokeWidth: "1.5",
444
- strokeLinecap: "round",
445
- strokeLinejoin: "round"
446
- }, /*#__PURE__*/ React__default.createElement("line", {
447
- x1: "18",
448
- y1: "6",
449
- x2: "6",
450
- y2: "18"
451
- }), /*#__PURE__*/ React__default.createElement("line", {
452
- x1: "6",
453
- y1: "6",
454
- x2: "18",
455
- y2: "18"
456
- }));
457
-
458
- const useIsDocumentHidden = ()=>{
459
- const [isDocumentHidden, setIsDocumentHidden] = React__default.useState(document.hidden);
460
- React__default.useEffect(()=>{
461
- const callback = ()=>{
462
- setIsDocumentHidden(document.hidden);
463
- };
464
- document.addEventListener('visibilitychange', callback);
465
- return ()=>window.removeEventListener('visibilitychange', callback);
466
- }, []);
467
- return isDocumentHidden;
468
- };
469
-
470
- let toastsCounter = 1;
471
- class Observer {
472
- constructor(){
473
- // We use arrow functions to maintain the correct `this` reference
474
- this.subscribe = (subscriber)=>{
475
- this.subscribers.push(subscriber);
476
- return ()=>{
477
- const index = this.subscribers.indexOf(subscriber);
478
- this.subscribers.splice(index, 1);
479
- };
480
- };
481
- this.publish = (data)=>{
482
- this.subscribers.forEach((subscriber)=>subscriber(data));
483
- };
484
- this.addToast = (data)=>{
485
- this.publish(data);
486
- this.toasts = [
487
- ...this.toasts,
488
- data
489
- ];
490
- };
491
- this.create = (data)=>{
492
- var _data_id;
493
- const { message, ...rest } = data;
494
- const id = typeof (data == null ? void 0 : data.id) === 'number' || ((_data_id = data.id) == null ? void 0 : _data_id.length) > 0 ? data.id : toastsCounter++;
495
- const alreadyExists = this.toasts.find((toast)=>{
496
- return toast.id === id;
497
- });
498
- const dismissible = data.dismissible === undefined ? true : data.dismissible;
499
- if (this.dismissedToasts.has(id)) {
500
- this.dismissedToasts.delete(id);
501
- }
502
- if (alreadyExists) {
503
- this.toasts = this.toasts.map((toast)=>{
504
- if (toast.id === id) {
505
- this.publish({
506
- ...toast,
507
- ...data,
508
- id,
509
- title: message
510
- });
511
- return {
512
- ...toast,
513
- ...data,
514
- id,
515
- dismissible,
516
- title: message
517
- };
518
- }
519
- return toast;
520
- });
521
- } else {
522
- this.addToast({
523
- title: message,
524
- ...rest,
525
- dismissible,
526
- id
527
- });
528
- }
529
- return id;
530
- };
531
- this.dismiss = (id)=>{
532
- if (id) {
533
- this.dismissedToasts.add(id);
534
- requestAnimationFrame(()=>this.subscribers.forEach((subscriber)=>subscriber({
535
- id,
536
- dismiss: true
537
- })));
538
- } else {
539
- this.toasts.forEach((toast)=>{
540
- this.subscribers.forEach((subscriber)=>subscriber({
541
- id: toast.id,
542
- dismiss: true
543
- }));
544
- });
545
- }
546
- return id;
547
- };
548
- this.message = (message, data)=>{
549
- return this.create({
550
- ...data,
551
- message
552
- });
553
- };
554
- this.error = (message, data)=>{
555
- return this.create({
556
- ...data,
557
- message,
558
- type: 'error'
559
- });
560
- };
561
- this.success = (message, data)=>{
562
- return this.create({
563
- ...data,
564
- type: 'success',
565
- message
566
- });
567
- };
568
- this.info = (message, data)=>{
569
- return this.create({
570
- ...data,
571
- type: 'info',
572
- message
573
- });
574
- };
575
- this.warning = (message, data)=>{
576
- return this.create({
577
- ...data,
578
- type: 'warning',
579
- message
580
- });
581
- };
582
- this.loading = (message, data)=>{
583
- return this.create({
584
- ...data,
585
- type: 'loading',
586
- message
587
- });
588
- };
589
- this.promise = (promise, data)=>{
590
- if (!data) {
591
- // Nothing to show
592
- return;
593
- }
594
- let id = undefined;
595
- if (data.loading !== undefined) {
596
- id = this.create({
597
- ...data,
598
- promise,
599
- type: 'loading',
600
- message: data.loading,
601
- description: typeof data.description !== 'function' ? data.description : undefined
602
- });
603
- }
604
- const p = Promise.resolve(promise instanceof Function ? promise() : promise);
605
- let shouldDismiss = id !== undefined;
606
- let result;
607
- const originalPromise = p.then(async (response)=>{
608
- result = [
609
- 'resolve',
610
- response
611
- ];
612
- const isReactElementResponse = React__default.isValidElement(response);
613
- if (isReactElementResponse) {
614
- shouldDismiss = false;
615
- this.create({
616
- id,
617
- type: 'default',
618
- message: response
619
- });
620
- } else if (isHttpResponse(response) && !response.ok) {
621
- shouldDismiss = false;
622
- const promiseData = typeof data.error === 'function' ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
623
- const description = typeof data.description === 'function' ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
624
- const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
625
- const toastSettings = isExtendedResult ? promiseData : {
626
- message: promiseData
627
- };
628
- this.create({
629
- id,
630
- type: 'error',
631
- description,
632
- ...toastSettings
633
- });
634
- } else if (response instanceof Error) {
635
- shouldDismiss = false;
636
- const promiseData = typeof data.error === 'function' ? await data.error(response) : data.error;
637
- const description = typeof data.description === 'function' ? await data.description(response) : data.description;
638
- const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
639
- const toastSettings = isExtendedResult ? promiseData : {
640
- message: promiseData
641
- };
642
- this.create({
643
- id,
644
- type: 'error',
645
- description,
646
- ...toastSettings
647
- });
648
- } else if (data.success !== undefined) {
649
- shouldDismiss = false;
650
- const promiseData = typeof data.success === 'function' ? await data.success(response) : data.success;
651
- const description = typeof data.description === 'function' ? await data.description(response) : data.description;
652
- const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
653
- const toastSettings = isExtendedResult ? promiseData : {
654
- message: promiseData
655
- };
656
- this.create({
657
- id,
658
- type: 'success',
659
- description,
660
- ...toastSettings
661
- });
662
- }
663
- }).catch(async (error)=>{
664
- result = [
665
- 'reject',
666
- error
667
- ];
668
- if (data.error !== undefined) {
669
- shouldDismiss = false;
670
- const promiseData = typeof data.error === 'function' ? await data.error(error) : data.error;
671
- const description = typeof data.description === 'function' ? await data.description(error) : data.description;
672
- const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
673
- const toastSettings = isExtendedResult ? promiseData : {
674
- message: promiseData
675
- };
676
- this.create({
677
- id,
678
- type: 'error',
679
- description,
680
- ...toastSettings
681
- });
682
- }
683
- }).finally(()=>{
684
- if (shouldDismiss) {
685
- // Toast is still in load state (and will be indefinitely — dismiss it)
686
- this.dismiss(id);
687
- id = undefined;
688
- }
689
- data.finally == null ? void 0 : data.finally.call(data);
690
- });
691
- const unwrap = ()=>new Promise((resolve, reject)=>originalPromise.then(()=>result[0] === 'reject' ? reject(result[1]) : resolve(result[1])).catch(reject));
692
- if (typeof id !== 'string' && typeof id !== 'number') {
693
- // cannot Object.assign on undefined
694
- return {
695
- unwrap
696
- };
697
- } else {
698
- return Object.assign(id, {
699
- unwrap
700
- });
701
- }
702
- };
703
- this.custom = (jsx, data)=>{
704
- const id = (data == null ? void 0 : data.id) || toastsCounter++;
705
- this.create({
706
- jsx: jsx(id),
707
- id,
708
- ...data
709
- });
710
- return id;
711
- };
712
- this.getActiveToasts = ()=>{
713
- return this.toasts.filter((toast)=>!this.dismissedToasts.has(toast.id));
714
- };
715
- this.subscribers = [];
716
- this.toasts = [];
717
- this.dismissedToasts = new Set();
718
- }
719
- }
720
- const ToastState = new Observer();
721
- // bind this to the toast function
722
- const toastFunction = (message, data)=>{
723
- const id = (data == null ? void 0 : data.id) || toastsCounter++;
724
- ToastState.addToast({
725
- title: message,
726
- ...data,
727
- id
728
- });
729
- return id;
730
- };
731
- const isHttpResponse = (data)=>{
732
- return data && typeof data === 'object' && 'ok' in data && typeof data.ok === 'boolean' && 'status' in data && typeof data.status === 'number';
733
- };
734
- const basicToast = toastFunction;
735
- const getHistory = ()=>ToastState.toasts;
736
- const getToasts = ()=>ToastState.getActiveToasts();
737
- // We use `Object.assign` to maintain the correct types as we would lose them otherwise
738
- const toast = Object.assign(basicToast, {
739
- success: ToastState.success,
740
- info: ToastState.info,
741
- warning: ToastState.warning,
742
- error: ToastState.error,
743
- custom: ToastState.custom,
744
- message: ToastState.message,
745
- promise: ToastState.promise,
746
- dismiss: ToastState.dismiss,
747
- loading: ToastState.loading
748
- }, {
749
- getHistory,
750
- getToasts
751
- });
752
-
753
- __insertCSS("[data-sonner-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}[data-sonner-toaster][dir=rtl],html[dir=rtl]{--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}[data-sonner-toaster]{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999;transition:transform .4s ease}@media (hover:none) and (pointer:coarse){[data-sonner-toaster][data-lifted=true]{transform:none}}[data-sonner-toaster][data-x-position=right]{right:var(--offset-right)}[data-sonner-toaster][data-x-position=left]{left:var(--offset-left)}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:var(--offset-top)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--offset-bottom)}[data-sonner-toast]{--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-sonner-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast][data-styled=true] [data-description]{font-weight:400;line-height:1.4;color:#3f3f3f}[data-rich-colors=true][data-sonner-toast][data-styled=true] [data-description]{color:inherit}[data-sonner-toaster][data-sonner-theme=dark] [data-description]{color:#e8e8e8}[data-sonner-toast][data-styled=true] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast][data-styled=true] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast][data-styled=true] [data-icon]>*{flex-shrink:0}[data-sonner-toast][data-styled=true] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast][data-styled=true] [data-content]{display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;font-weight:500;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-sonner-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast][data-styled=true] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast][data-styled=true] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-styled=true] [data-cancel]{background:rgba(255,255,255,.3)}[data-sonner-toast][data-styled=true] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;color:var(--gray12);background:var(--normal-bg);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]::before{content:'';position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]::before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast][data-expanded=true]::after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-x-position=right]{right:0}[data-sonner-toast][data-x-position=left]{left:0}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount-y,0)) translateX(var(--swipe-amount-x,0));transition:none}[data-sonner-toast][data-swiped=true]{user-select:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=left]{animation-name:swipe-out-left}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=right]{animation-name:swipe-out-right}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=up]{animation-name:swipe-out-up}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=down]{animation-name:swipe-out-down}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;right:var(--mobile-offset-right);left:var(--mobile-offset-left);width:100%}[data-sonner-toaster][dir=rtl]{left:calc(var(--mobile-offset-left) * -1)}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset-left) * 2)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset-left)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--mobile-offset-bottom)}[data-sonner-toaster][data-y-position=top]{top:var(--mobile-offset-top)}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset-left);right:var(--mobile-offset-right);transform:none}}[data-sonner-toaster][data-sonner-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 87%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 93%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 84%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-sonner-theme=dark]{--normal-bg:#000;--normal-bg-hover:hsl(0, 0%, 12%);--normal-border:hsl(0, 0%, 20%);--normal-border-hover:hsl(0, 0%, 25%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 43%, 17%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 9%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]{background:var(--normal-bg);border-color:var(--normal-border);color:var(--normal-text)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}[data-rich-colors=true][data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>*{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}");
754
-
755
- function isAction(action) {
756
- return action.label !== undefined;
757
- }
758
-
759
- // Visible toasts amount
760
- const VISIBLE_TOASTS_AMOUNT = 3;
761
- // Viewport padding
762
- const VIEWPORT_OFFSET = '24px';
763
- // Mobile viewport padding
764
- const MOBILE_VIEWPORT_OFFSET = '16px';
765
- // Default lifetime of a toasts (in ms)
766
- const TOAST_LIFETIME = 4000;
767
- // Default toast width
768
- const TOAST_WIDTH = 356;
769
- // Default gap between toasts
770
- const GAP = 14;
771
- // Threshold to dismiss a toast
772
- const SWIPE_THRESHOLD = 45;
773
- // Equal to exit animation duration
774
- const TIME_BEFORE_UNMOUNT = 200;
775
- function cn$1(...classes) {
776
- return classes.filter(Boolean).join(' ');
777
- }
778
- function getDefaultSwipeDirections(position) {
779
- const [y, x] = position.split('-');
780
- const directions = [];
781
- if (y) {
782
- directions.push(y);
783
- }
784
- if (x) {
785
- directions.push(x);
786
- }
787
- return directions;
788
- }
789
- const Toast$2 = (props)=>{
790
- var _toast_classNames, _toast_classNames1, _toast_classNames2, _toast_classNames3, _toast_classNames4, _toast_classNames5, _toast_classNames6, _toast_classNames7, _toast_classNames8;
791
- const { invert: ToasterInvert, toast, unstyled, interacting, setHeights, visibleToasts, heights, index, toasts, expanded, removeToast, defaultRichColors, closeButton: closeButtonFromToaster, style, cancelButtonStyle, actionButtonStyle, className = '', descriptionClassName = '', duration: durationFromToaster, position, gap, expandByDefault, classNames, icons, closeButtonAriaLabel = 'Close toast' } = props;
792
- const [swipeDirection, setSwipeDirection] = React__default.useState(null);
793
- const [swipeOutDirection, setSwipeOutDirection] = React__default.useState(null);
794
- const [mounted, setMounted] = React__default.useState(false);
795
- const [removed, setRemoved] = React__default.useState(false);
796
- const [swiping, setSwiping] = React__default.useState(false);
797
- const [swipeOut, setSwipeOut] = React__default.useState(false);
798
- const [isSwiped, setIsSwiped] = React__default.useState(false);
799
- const [offsetBeforeRemove, setOffsetBeforeRemove] = React__default.useState(0);
800
- const [initialHeight, setInitialHeight] = React__default.useState(0);
801
- const remainingTime = React__default.useRef(toast.duration || durationFromToaster || TOAST_LIFETIME);
802
- const dragStartTime = React__default.useRef(null);
803
- const toastRef = React__default.useRef(null);
804
- const isFront = index === 0;
805
- const isVisible = index + 1 <= visibleToasts;
806
- const toastType = toast.type;
807
- const dismissible = toast.dismissible !== false;
808
- const toastClassname = toast.className || '';
809
- const toastDescriptionClassname = toast.descriptionClassName || '';
810
- // Height index is used to calculate the offset as it gets updated before the toast array, which means we can calculate the new layout faster.
811
- const heightIndex = React__default.useMemo(()=>heights.findIndex((height)=>height.toastId === toast.id) || 0, [
812
- heights,
813
- toast.id
814
- ]);
815
- const closeButton = React__default.useMemo(()=>{
816
- var _toast_closeButton;
817
- return (_toast_closeButton = toast.closeButton) != null ? _toast_closeButton : closeButtonFromToaster;
818
- }, [
819
- toast.closeButton,
820
- closeButtonFromToaster
821
- ]);
822
- const duration = React__default.useMemo(()=>toast.duration || durationFromToaster || TOAST_LIFETIME, [
823
- toast.duration,
824
- durationFromToaster
825
- ]);
826
- const closeTimerStartTimeRef = React__default.useRef(0);
827
- const offset = React__default.useRef(0);
828
- const lastCloseTimerStartTimeRef = React__default.useRef(0);
829
- const pointerStartRef = React__default.useRef(null);
830
- const [y, x] = position.split('-');
831
- const toastsHeightBefore = React__default.useMemo(()=>{
832
- return heights.reduce((prev, curr, reducerIndex)=>{
833
- // Calculate offset up until current toast
834
- if (reducerIndex >= heightIndex) {
835
- return prev;
836
- }
837
- return prev + curr.height;
838
- }, 0);
839
- }, [
840
- heights,
841
- heightIndex
842
- ]);
843
- const isDocumentHidden = useIsDocumentHidden();
844
- const invert = toast.invert || ToasterInvert;
845
- const disabled = toastType === 'loading';
846
- offset.current = React__default.useMemo(()=>heightIndex * gap + toastsHeightBefore, [
847
- heightIndex,
848
- toastsHeightBefore
849
- ]);
850
- React__default.useEffect(()=>{
851
- remainingTime.current = duration;
852
- }, [
853
- duration
854
- ]);
855
- React__default.useEffect(()=>{
856
- // Trigger enter animation without using CSS animation
857
- setMounted(true);
858
- }, []);
859
- React__default.useEffect(()=>{
860
- const toastNode = toastRef.current;
861
- if (toastNode) {
862
- const height = toastNode.getBoundingClientRect().height;
863
- // Add toast height to heights array after the toast is mounted
864
- setInitialHeight(height);
865
- setHeights((h)=>[
866
- {
867
- toastId: toast.id,
868
- height,
869
- position: toast.position
870
- },
871
- ...h
872
- ]);
873
- return ()=>setHeights((h)=>h.filter((height)=>height.toastId !== toast.id));
874
- }
875
- }, [
876
- setHeights,
877
- toast.id
878
- ]);
879
- React__default.useLayoutEffect(()=>{
880
- // Keep height up to date with the content in case it updates
881
- if (!mounted) return;
882
- const toastNode = toastRef.current;
883
- const originalHeight = toastNode.style.height;
884
- toastNode.style.height = 'auto';
885
- const newHeight = toastNode.getBoundingClientRect().height;
886
- toastNode.style.height = originalHeight;
887
- setInitialHeight(newHeight);
888
- setHeights((heights)=>{
889
- const alreadyExists = heights.find((height)=>height.toastId === toast.id);
890
- if (!alreadyExists) {
891
- return [
892
- {
893
- toastId: toast.id,
894
- height: newHeight,
895
- position: toast.position
896
- },
897
- ...heights
898
- ];
899
- } else {
900
- return heights.map((height)=>height.toastId === toast.id ? {
901
- ...height,
902
- height: newHeight
903
- } : height);
904
- }
905
- });
906
- }, [
907
- mounted,
908
- toast.title,
909
- toast.description,
910
- setHeights,
911
- toast.id,
912
- toast.jsx,
913
- toast.action,
914
- toast.cancel
915
- ]);
916
- const deleteToast = React__default.useCallback(()=>{
917
- // Save the offset for the exit swipe animation
918
- setRemoved(true);
919
- setOffsetBeforeRemove(offset.current);
920
- setHeights((h)=>h.filter((height)=>height.toastId !== toast.id));
921
- setTimeout(()=>{
922
- removeToast(toast);
923
- }, TIME_BEFORE_UNMOUNT);
924
- }, [
925
- toast,
926
- removeToast,
927
- setHeights,
928
- offset
929
- ]);
930
- React__default.useEffect(()=>{
931
- if (toast.promise && toastType === 'loading' || toast.duration === Infinity || toast.type === 'loading') return;
932
- let timeoutId;
933
- // Pause the timer on each hover
934
- const pauseTimer = ()=>{
935
- if (lastCloseTimerStartTimeRef.current < closeTimerStartTimeRef.current) {
936
- // Get the elapsed time since the timer started
937
- const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
938
- remainingTime.current = remainingTime.current - elapsedTime;
939
- }
940
- lastCloseTimerStartTimeRef.current = new Date().getTime();
941
- };
942
- const startTimer = ()=>{
943
- // setTimeout(, Infinity) behaves as if the delay is 0.
944
- // As a result, the toast would be closed immediately, giving the appearance that it was never rendered.
945
- // See: https://github.com/denysdovhan/wtfjs?tab=readme-ov-file#an-infinite-timeout
946
- if (remainingTime.current === Infinity) return;
947
- closeTimerStartTimeRef.current = new Date().getTime();
948
- // Let the toast know it has started
949
- timeoutId = setTimeout(()=>{
950
- toast.onAutoClose == null ? void 0 : toast.onAutoClose.call(toast, toast);
951
- deleteToast();
952
- }, remainingTime.current);
953
- };
954
- if (expanded || interacting || isDocumentHidden) {
955
- pauseTimer();
956
- } else {
957
- startTimer();
958
- }
959
- return ()=>clearTimeout(timeoutId);
960
- }, [
961
- expanded,
962
- interacting,
963
- toast,
964
- toastType,
965
- isDocumentHidden,
966
- deleteToast
967
- ]);
968
- React__default.useEffect(()=>{
969
- if (toast.delete) {
970
- deleteToast();
971
- toast.onDismiss == null ? void 0 : toast.onDismiss.call(toast, toast);
972
- }
973
- }, [
974
- deleteToast,
975
- toast.delete
976
- ]);
977
- function getLoadingIcon() {
978
- var _toast_classNames;
979
- if (icons == null ? void 0 : icons.loading) {
980
- var _toast_classNames1;
981
- return /*#__PURE__*/ React__default.createElement("div", {
982
- className: cn$1(classNames == null ? void 0 : classNames.loader, toast == null ? void 0 : (_toast_classNames1 = toast.classNames) == null ? void 0 : _toast_classNames1.loader, 'sonner-loader'),
983
- "data-visible": toastType === 'loading'
984
- }, icons.loading);
985
- }
986
- return /*#__PURE__*/ React__default.createElement(Loader$1, {
987
- className: cn$1(classNames == null ? void 0 : classNames.loader, toast == null ? void 0 : (_toast_classNames = toast.classNames) == null ? void 0 : _toast_classNames.loader),
988
- visible: toastType === 'loading'
989
- });
990
- }
991
- const icon = toast.icon || (icons == null ? void 0 : icons[toastType]) || getAsset(toastType);
992
- var _toast_richColors, _icons_close;
993
- return /*#__PURE__*/ React__default.createElement("li", {
994
- tabIndex: 0,
995
- ref: toastRef,
996
- className: cn$1(className, toastClassname, classNames == null ? void 0 : classNames.toast, toast == null ? void 0 : (_toast_classNames = toast.classNames) == null ? void 0 : _toast_classNames.toast, classNames == null ? void 0 : classNames.default, classNames == null ? void 0 : classNames[toastType], toast == null ? void 0 : (_toast_classNames1 = toast.classNames) == null ? void 0 : _toast_classNames1[toastType]),
997
- "data-sonner-toast": "",
998
- "data-rich-colors": (_toast_richColors = toast.richColors) != null ? _toast_richColors : defaultRichColors,
999
- "data-styled": !Boolean(toast.jsx || toast.unstyled || unstyled),
1000
- "data-mounted": mounted,
1001
- "data-promise": Boolean(toast.promise),
1002
- "data-swiped": isSwiped,
1003
- "data-removed": removed,
1004
- "data-visible": isVisible,
1005
- "data-y-position": y,
1006
- "data-x-position": x,
1007
- "data-index": index,
1008
- "data-front": isFront,
1009
- "data-swiping": swiping,
1010
- "data-dismissible": dismissible,
1011
- "data-type": toastType,
1012
- "data-invert": invert,
1013
- "data-swipe-out": swipeOut,
1014
- "data-swipe-direction": swipeOutDirection,
1015
- "data-expanded": Boolean(expanded || expandByDefault && mounted),
1016
- "data-testid": toast.testId,
1017
- style: {
1018
- '--index': index,
1019
- '--toasts-before': index,
1020
- '--z-index': toasts.length - index,
1021
- '--offset': `${removed ? offsetBeforeRemove : offset.current}px`,
1022
- '--initial-height': expandByDefault ? 'auto' : `${initialHeight}px`,
1023
- ...style,
1024
- ...toast.style
1025
- },
1026
- onDragEnd: ()=>{
1027
- setSwiping(false);
1028
- setSwipeDirection(null);
1029
- pointerStartRef.current = null;
1030
- },
1031
- onPointerDown: (event)=>{
1032
- if (event.button === 2) return; // Return early on right click
1033
- if (disabled || !dismissible) return;
1034
- dragStartTime.current = new Date();
1035
- setOffsetBeforeRemove(offset.current);
1036
- // Ensure we maintain correct pointer capture even when going outside of the toast (e.g. when swiping)
1037
- event.target.setPointerCapture(event.pointerId);
1038
- if (event.target.tagName === 'BUTTON') return;
1039
- setSwiping(true);
1040
- pointerStartRef.current = {
1041
- x: event.clientX,
1042
- y: event.clientY
1043
- };
1044
- },
1045
- onPointerUp: ()=>{
1046
- var _toastRef_current, _toastRef_current1, _dragStartTime_current;
1047
- if (swipeOut || !dismissible) return;
1048
- pointerStartRef.current = null;
1049
- const swipeAmountX = Number(((_toastRef_current = toastRef.current) == null ? void 0 : _toastRef_current.style.getPropertyValue('--swipe-amount-x').replace('px', '')) || 0);
1050
- const swipeAmountY = Number(((_toastRef_current1 = toastRef.current) == null ? void 0 : _toastRef_current1.style.getPropertyValue('--swipe-amount-y').replace('px', '')) || 0);
1051
- const timeTaken = new Date().getTime() - ((_dragStartTime_current = dragStartTime.current) == null ? void 0 : _dragStartTime_current.getTime());
1052
- const swipeAmount = swipeDirection === 'x' ? swipeAmountX : swipeAmountY;
1053
- const velocity = Math.abs(swipeAmount) / timeTaken;
1054
- if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
1055
- setOffsetBeforeRemove(offset.current);
1056
- toast.onDismiss == null ? void 0 : toast.onDismiss.call(toast, toast);
1057
- if (swipeDirection === 'x') {
1058
- setSwipeOutDirection(swipeAmountX > 0 ? 'right' : 'left');
1059
- } else {
1060
- setSwipeOutDirection(swipeAmountY > 0 ? 'down' : 'up');
1061
- }
1062
- deleteToast();
1063
- setSwipeOut(true);
1064
- return;
1065
- } else {
1066
- var _toastRef_current2, _toastRef_current3;
1067
- (_toastRef_current2 = toastRef.current) == null ? void 0 : _toastRef_current2.style.setProperty('--swipe-amount-x', `0px`);
1068
- (_toastRef_current3 = toastRef.current) == null ? void 0 : _toastRef_current3.style.setProperty('--swipe-amount-y', `0px`);
1069
- }
1070
- setIsSwiped(false);
1071
- setSwiping(false);
1072
- setSwipeDirection(null);
1073
- },
1074
- onPointerMove: (event)=>{
1075
- var _window_getSelection, // Apply transform using both x and y values
1076
- _toastRef_current, _toastRef_current1;
1077
- if (!pointerStartRef.current || !dismissible) return;
1078
- const isHighlighted = ((_window_getSelection = window.getSelection()) == null ? void 0 : _window_getSelection.toString().length) > 0;
1079
- if (isHighlighted) return;
1080
- const yDelta = event.clientY - pointerStartRef.current.y;
1081
- const xDelta = event.clientX - pointerStartRef.current.x;
1082
- var _props_swipeDirections;
1083
- const swipeDirections = (_props_swipeDirections = props.swipeDirections) != null ? _props_swipeDirections : getDefaultSwipeDirections(position);
1084
- // Determine swipe direction if not already locked
1085
- if (!swipeDirection && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {
1086
- setSwipeDirection(Math.abs(xDelta) > Math.abs(yDelta) ? 'x' : 'y');
1087
- }
1088
- let swipeAmount = {
1089
- x: 0,
1090
- y: 0
1091
- };
1092
- const getDampening = (delta)=>{
1093
- const factor = Math.abs(delta) / 20;
1094
- return 1 / (1.5 + factor);
1095
- };
1096
- // Only apply swipe in the locked direction
1097
- if (swipeDirection === 'y') {
1098
- // Handle vertical swipes
1099
- if (swipeDirections.includes('top') || swipeDirections.includes('bottom')) {
1100
- if (swipeDirections.includes('top') && yDelta < 0 || swipeDirections.includes('bottom') && yDelta > 0) {
1101
- swipeAmount.y = yDelta;
1102
- } else {
1103
- // Smoothly transition to dampened movement
1104
- const dampenedDelta = yDelta * getDampening(yDelta);
1105
- // Ensure we don't jump when transitioning to dampened movement
1106
- swipeAmount.y = Math.abs(dampenedDelta) < Math.abs(yDelta) ? dampenedDelta : yDelta;
1107
- }
1108
- }
1109
- } else if (swipeDirection === 'x') {
1110
- // Handle horizontal swipes
1111
- if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
1112
- if (swipeDirections.includes('left') && xDelta < 0 || swipeDirections.includes('right') && xDelta > 0) {
1113
- swipeAmount.x = xDelta;
1114
- } else {
1115
- // Smoothly transition to dampened movement
1116
- const dampenedDelta = xDelta * getDampening(xDelta);
1117
- // Ensure we don't jump when transitioning to dampened movement
1118
- swipeAmount.x = Math.abs(dampenedDelta) < Math.abs(xDelta) ? dampenedDelta : xDelta;
1119
- }
1120
- }
1121
- }
1122
- if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) {
1123
- setIsSwiped(true);
1124
- }
1125
- (_toastRef_current = toastRef.current) == null ? void 0 : _toastRef_current.style.setProperty('--swipe-amount-x', `${swipeAmount.x}px`);
1126
- (_toastRef_current1 = toastRef.current) == null ? void 0 : _toastRef_current1.style.setProperty('--swipe-amount-y', `${swipeAmount.y}px`);
1127
- }
1128
- }, closeButton && !toast.jsx && toastType !== 'loading' ? /*#__PURE__*/ React__default.createElement("button", {
1129
- "aria-label": closeButtonAriaLabel,
1130
- "data-disabled": disabled,
1131
- "data-close-button": true,
1132
- onClick: disabled || !dismissible ? ()=>{} : ()=>{
1133
- deleteToast();
1134
- toast.onDismiss == null ? void 0 : toast.onDismiss.call(toast, toast);
1135
- },
1136
- className: cn$1(classNames == null ? void 0 : classNames.closeButton, toast == null ? void 0 : (_toast_classNames2 = toast.classNames) == null ? void 0 : _toast_classNames2.closeButton)
1137
- }, (_icons_close = icons == null ? void 0 : icons.close) != null ? _icons_close : CloseIcon) : null, (toastType || toast.icon || toast.promise) && toast.icon !== null && ((icons == null ? void 0 : icons[toastType]) !== null || toast.icon) ? /*#__PURE__*/ React__default.createElement("div", {
1138
- "data-icon": "",
1139
- className: cn$1(classNames == null ? void 0 : classNames.icon, toast == null ? void 0 : (_toast_classNames3 = toast.classNames) == null ? void 0 : _toast_classNames3.icon)
1140
- }, toast.promise || toast.type === 'loading' && !toast.icon ? toast.icon || getLoadingIcon() : null, toast.type !== 'loading' ? icon : null) : null, /*#__PURE__*/ React__default.createElement("div", {
1141
- "data-content": "",
1142
- className: cn$1(classNames == null ? void 0 : classNames.content, toast == null ? void 0 : (_toast_classNames4 = toast.classNames) == null ? void 0 : _toast_classNames4.content)
1143
- }, /*#__PURE__*/ React__default.createElement("div", {
1144
- "data-title": "",
1145
- className: cn$1(classNames == null ? void 0 : classNames.title, toast == null ? void 0 : (_toast_classNames5 = toast.classNames) == null ? void 0 : _toast_classNames5.title)
1146
- }, toast.jsx ? toast.jsx : typeof toast.title === 'function' ? toast.title() : toast.title), toast.description ? /*#__PURE__*/ React__default.createElement("div", {
1147
- "data-description": "",
1148
- className: cn$1(descriptionClassName, toastDescriptionClassname, classNames == null ? void 0 : classNames.description, toast == null ? void 0 : (_toast_classNames6 = toast.classNames) == null ? void 0 : _toast_classNames6.description)
1149
- }, typeof toast.description === 'function' ? toast.description() : toast.description) : null), /*#__PURE__*/ React__default.isValidElement(toast.cancel) ? toast.cancel : toast.cancel && isAction(toast.cancel) ? /*#__PURE__*/ React__default.createElement("button", {
1150
- "data-button": true,
1151
- "data-cancel": true,
1152
- style: toast.cancelButtonStyle || cancelButtonStyle,
1153
- onClick: (event)=>{
1154
- // We need to check twice because typescript
1155
- if (!isAction(toast.cancel)) return;
1156
- if (!dismissible) return;
1157
- toast.cancel.onClick == null ? void 0 : toast.cancel.onClick.call(toast.cancel, event);
1158
- deleteToast();
1159
- },
1160
- className: cn$1(classNames == null ? void 0 : classNames.cancelButton, toast == null ? void 0 : (_toast_classNames7 = toast.classNames) == null ? void 0 : _toast_classNames7.cancelButton)
1161
- }, toast.cancel.label) : null, /*#__PURE__*/ React__default.isValidElement(toast.action) ? toast.action : toast.action && isAction(toast.action) ? /*#__PURE__*/ React__default.createElement("button", {
1162
- "data-button": true,
1163
- "data-action": true,
1164
- style: toast.actionButtonStyle || actionButtonStyle,
1165
- onClick: (event)=>{
1166
- // We need to check twice because typescript
1167
- if (!isAction(toast.action)) return;
1168
- toast.action.onClick == null ? void 0 : toast.action.onClick.call(toast.action, event);
1169
- if (event.defaultPrevented) return;
1170
- deleteToast();
1171
- },
1172
- className: cn$1(classNames == null ? void 0 : classNames.actionButton, toast == null ? void 0 : (_toast_classNames8 = toast.classNames) == null ? void 0 : _toast_classNames8.actionButton)
1173
- }, toast.action.label) : null);
1174
- };
1175
- function getDocumentDirection() {
1176
- if (typeof window === 'undefined') return 'ltr';
1177
- if (typeof document === 'undefined') return 'ltr'; // For Fresh purpose
1178
- const dirAttribute = document.documentElement.getAttribute('dir');
1179
- if (dirAttribute === 'auto' || !dirAttribute) {
1180
- return window.getComputedStyle(document.documentElement).direction;
1181
- }
1182
- return dirAttribute;
1183
- }
1184
- function assignOffset(defaultOffset, mobileOffset) {
1185
- const styles = {};
1186
- [
1187
- defaultOffset,
1188
- mobileOffset
1189
- ].forEach((offset, index)=>{
1190
- const isMobile = index === 1;
1191
- const prefix = isMobile ? '--mobile-offset' : '--offset';
1192
- const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
1193
- function assignAll(offset) {
1194
- [
1195
- 'top',
1196
- 'right',
1197
- 'bottom',
1198
- 'left'
1199
- ].forEach((key)=>{
1200
- styles[`${prefix}-${key}`] = typeof offset === 'number' ? `${offset}px` : offset;
1201
- });
1202
- }
1203
- if (typeof offset === 'number' || typeof offset === 'string') {
1204
- assignAll(offset);
1205
- } else if (typeof offset === 'object') {
1206
- [
1207
- 'top',
1208
- 'right',
1209
- 'bottom',
1210
- 'left'
1211
- ].forEach((key)=>{
1212
- if (offset[key] === undefined) {
1213
- styles[`${prefix}-${key}`] = defaultValue;
1214
- } else {
1215
- styles[`${prefix}-${key}`] = typeof offset[key] === 'number' ? `${offset[key]}px` : offset[key];
1216
- }
1217
- });
1218
- } else {
1219
- assignAll(defaultValue);
1220
- }
1221
- });
1222
- return styles;
1223
- }
1224
- const Toaster$1 = /*#__PURE__*/ React__default.forwardRef(function Toaster(props, ref) {
1225
- const { id, invert, position = 'bottom-right', hotkey = [
1226
- 'altKey',
1227
- 'KeyT'
1228
- ], expand, closeButton, className, offset, mobileOffset, theme = 'light', richColors, duration, style, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, containerAriaLabel = 'Notifications' } = props;
1229
- const [toasts, setToasts] = React__default.useState([]);
1230
- const filteredToasts = React__default.useMemo(()=>{
1231
- if (id) {
1232
- return toasts.filter((toast)=>toast.toasterId === id);
1233
- }
1234
- return toasts.filter((toast)=>!toast.toasterId);
1235
- }, [
1236
- toasts,
1237
- id
1238
- ]);
1239
- const possiblePositions = React__default.useMemo(()=>{
1240
- return Array.from(new Set([
1241
- position
1242
- ].concat(filteredToasts.filter((toast)=>toast.position).map((toast)=>toast.position))));
1243
- }, [
1244
- filteredToasts,
1245
- position
1246
- ]);
1247
- const [heights, setHeights] = React__default.useState([]);
1248
- const [expanded, setExpanded] = React__default.useState(false);
1249
- const [interacting, setInteracting] = React__default.useState(false);
1250
- const [actualTheme, setActualTheme] = React__default.useState(theme !== 'system' ? theme : typeof window !== 'undefined' ? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : 'light');
1251
- const listRef = React__default.useRef(null);
1252
- const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
1253
- const lastFocusedElementRef = React__default.useRef(null);
1254
- const isFocusWithinRef = React__default.useRef(false);
1255
- const removeToast = React__default.useCallback((toastToRemove)=>{
1256
- setToasts((toasts)=>{
1257
- var _toasts_find;
1258
- if (!((_toasts_find = toasts.find((toast)=>toast.id === toastToRemove.id)) == null ? void 0 : _toasts_find.delete)) {
1259
- ToastState.dismiss(toastToRemove.id);
1260
- }
1261
- return toasts.filter(({ id })=>id !== toastToRemove.id);
1262
- });
1263
- }, []);
1264
- React__default.useEffect(()=>{
1265
- return ToastState.subscribe((toast)=>{
1266
- if (toast.dismiss) {
1267
- // Prevent batching of other state updates
1268
- requestAnimationFrame(()=>{
1269
- setToasts((toasts)=>toasts.map((t)=>t.id === toast.id ? {
1270
- ...t,
1271
- delete: true
1272
- } : t));
1273
- });
1274
- return;
1275
- }
1276
- // Prevent batching, temp solution.
1277
- setTimeout(()=>{
1278
- ReactDOM__default.flushSync(()=>{
1279
- setToasts((toasts)=>{
1280
- const indexOfExistingToast = toasts.findIndex((t)=>t.id === toast.id);
1281
- // Update the toast if it already exists
1282
- if (indexOfExistingToast !== -1) {
1283
- return [
1284
- ...toasts.slice(0, indexOfExistingToast),
1285
- {
1286
- ...toasts[indexOfExistingToast],
1287
- ...toast
1288
- },
1289
- ...toasts.slice(indexOfExistingToast + 1)
1290
- ];
1291
- }
1292
- return [
1293
- toast,
1294
- ...toasts
1295
- ];
1296
- });
1297
- });
1298
- });
1299
- });
1300
- }, [
1301
- toasts
1302
- ]);
1303
- React__default.useEffect(()=>{
1304
- if (theme !== 'system') {
1305
- setActualTheme(theme);
1306
- return;
1307
- }
1308
- if (theme === 'system') {
1309
- // check if current preference is dark
1310
- if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
1311
- // it's currently dark
1312
- setActualTheme('dark');
1313
- } else {
1314
- // it's not dark
1315
- setActualTheme('light');
1316
- }
1317
- }
1318
- if (typeof window === 'undefined') return;
1319
- const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
1320
- try {
1321
- // Chrome & Firefox
1322
- darkMediaQuery.addEventListener('change', ({ matches })=>{
1323
- if (matches) {
1324
- setActualTheme('dark');
1325
- } else {
1326
- setActualTheme('light');
1327
- }
1328
- });
1329
- } catch (error) {
1330
- // Safari < 14
1331
- darkMediaQuery.addListener(({ matches })=>{
1332
- try {
1333
- if (matches) {
1334
- setActualTheme('dark');
1335
- } else {
1336
- setActualTheme('light');
1337
- }
1338
- } catch (e) {
1339
- console.error(e);
1340
- }
1341
- });
1342
- }
1343
- }, [
1344
- theme
1345
- ]);
1346
- React__default.useEffect(()=>{
1347
- // Ensure expanded is always false when no toasts are present / only one left
1348
- if (toasts.length <= 1) {
1349
- setExpanded(false);
1350
- }
1351
- }, [
1352
- toasts
1353
- ]);
1354
- React__default.useEffect(()=>{
1355
- const handleKeyDown = (event)=>{
1356
- var _listRef_current;
1357
- const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key);
1358
- if (isHotkeyPressed) {
1359
- var _listRef_current1;
1360
- setExpanded(true);
1361
- (_listRef_current1 = listRef.current) == null ? void 0 : _listRef_current1.focus();
1362
- }
1363
- if (event.code === 'Escape' && (document.activeElement === listRef.current || ((_listRef_current = listRef.current) == null ? void 0 : _listRef_current.contains(document.activeElement)))) {
1364
- setExpanded(false);
1365
- }
1366
- };
1367
- document.addEventListener('keydown', handleKeyDown);
1368
- return ()=>document.removeEventListener('keydown', handleKeyDown);
1369
- }, [
1370
- hotkey
1371
- ]);
1372
- React__default.useEffect(()=>{
1373
- if (listRef.current) {
1374
- return ()=>{
1375
- if (lastFocusedElementRef.current) {
1376
- lastFocusedElementRef.current.focus({
1377
- preventScroll: true
1378
- });
1379
- lastFocusedElementRef.current = null;
1380
- isFocusWithinRef.current = false;
1381
- }
1382
- };
1383
- }
1384
- }, [
1385
- listRef.current
1386
- ]);
1387
- return(// Remove item from normal navigation flow, only available via hotkey
1388
- /*#__PURE__*/ React__default.createElement("section", {
1389
- ref: ref,
1390
- "aria-label": `${containerAriaLabel} ${hotkeyLabel}`,
1391
- tabIndex: -1,
1392
- "aria-live": "polite",
1393
- "aria-relevant": "additions text",
1394
- "aria-atomic": "false",
1395
- suppressHydrationWarning: true
1396
- }, possiblePositions.map((position, index)=>{
1397
- var _heights_;
1398
- const [y, x] = position.split('-');
1399
- if (!filteredToasts.length) return null;
1400
- return /*#__PURE__*/ React__default.createElement("ol", {
1401
- key: position,
1402
- dir: dir === 'auto' ? getDocumentDirection() : dir,
1403
- tabIndex: -1,
1404
- ref: listRef,
1405
- className: className,
1406
- "data-sonner-toaster": true,
1407
- "data-sonner-theme": actualTheme,
1408
- "data-y-position": y,
1409
- "data-x-position": x,
1410
- style: {
1411
- '--front-toast-height': `${((_heights_ = heights[0]) == null ? void 0 : _heights_.height) || 0}px`,
1412
- '--width': `${TOAST_WIDTH}px`,
1413
- '--gap': `${gap}px`,
1414
- ...style,
1415
- ...assignOffset(offset, mobileOffset)
1416
- },
1417
- onBlur: (event)=>{
1418
- if (isFocusWithinRef.current && !event.currentTarget.contains(event.relatedTarget)) {
1419
- isFocusWithinRef.current = false;
1420
- if (lastFocusedElementRef.current) {
1421
- lastFocusedElementRef.current.focus({
1422
- preventScroll: true
1423
- });
1424
- lastFocusedElementRef.current = null;
1425
- }
1426
- }
1427
- },
1428
- onFocus: (event)=>{
1429
- const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
1430
- if (isNotDismissible) return;
1431
- if (!isFocusWithinRef.current) {
1432
- isFocusWithinRef.current = true;
1433
- lastFocusedElementRef.current = event.relatedTarget;
1434
- }
1435
- },
1436
- onMouseEnter: ()=>setExpanded(true),
1437
- onMouseMove: ()=>setExpanded(true),
1438
- onMouseLeave: ()=>{
1439
- // Avoid setting expanded to false when interacting with a toast, e.g. swiping
1440
- if (!interacting) {
1441
- setExpanded(false);
1442
- }
1443
- },
1444
- onDragEnd: ()=>setExpanded(false),
1445
- onPointerDown: (event)=>{
1446
- const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
1447
- if (isNotDismissible) return;
1448
- setInteracting(true);
1449
- },
1450
- onPointerUp: ()=>setInteracting(false)
1451
- }, filteredToasts.filter((toast)=>!toast.position && index === 0 || toast.position === position).map((toast, index)=>{
1452
- var _toastOptions_duration, _toastOptions_closeButton;
1453
- return /*#__PURE__*/ React__default.createElement(Toast$2, {
1454
- key: toast.id,
1455
- icons: icons,
1456
- index: index,
1457
- toast: toast,
1458
- defaultRichColors: richColors,
1459
- duration: (_toastOptions_duration = toastOptions == null ? void 0 : toastOptions.duration) != null ? _toastOptions_duration : duration,
1460
- className: toastOptions == null ? void 0 : toastOptions.className,
1461
- descriptionClassName: toastOptions == null ? void 0 : toastOptions.descriptionClassName,
1462
- invert: invert,
1463
- visibleToasts: visibleToasts,
1464
- closeButton: (_toastOptions_closeButton = toastOptions == null ? void 0 : toastOptions.closeButton) != null ? _toastOptions_closeButton : closeButton,
1465
- interacting: interacting,
1466
- position: position,
1467
- style: toastOptions == null ? void 0 : toastOptions.style,
1468
- unstyled: toastOptions == null ? void 0 : toastOptions.unstyled,
1469
- classNames: toastOptions == null ? void 0 : toastOptions.classNames,
1470
- cancelButtonStyle: toastOptions == null ? void 0 : toastOptions.cancelButtonStyle,
1471
- actionButtonStyle: toastOptions == null ? void 0 : toastOptions.actionButtonStyle,
1472
- closeButtonAriaLabel: toastOptions == null ? void 0 : toastOptions.closeButtonAriaLabel,
1473
- removeToast: removeToast,
1474
- toasts: filteredToasts.filter((t)=>t.position == toast.position),
1475
- heights: heights.filter((h)=>h.position == toast.position),
1476
- setHeights: setHeights,
1477
- expandByDefault: expand,
1478
- gap: gap,
1479
- expanded: expanded,
1480
- swipeDirections: props.swipeDirections
1481
- });
1482
- }));
1483
- })));
1484
- });
1485
-
1486
355
  const LOCAL_STORAGE_KEY = 'model_download_state';
1487
356
  const FIRST_LAUNCH_DISMISSED_KEY = 'model_download_prompt_dismissed';
1488
357
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iblai/iblai-js",
3
- "version": "1.0.21",
3
+ "version": "1.0.23",
4
4
  "description": "Unified JavaScript SDK for IBL.ai — re-exports data-layer, web-containers, and web-utils under a single package",
5
5
  "type": "module",
6
6
  "engines": {
@@ -58,8 +58,8 @@
58
58
  "dotenv": "^16.5.0",
59
59
  "winston": "^3.19.0",
60
60
  "@iblai/data-layer": "1.1.9",
61
- "@iblai/web-utils": "1.1.10",
62
- "@iblai/web-containers": "1.1.16"
61
+ "@iblai/web-containers": "1.1.17",
62
+ "@iblai/web-utils": "1.1.11"
63
63
  },
64
64
  "peerDependencies": {
65
65
  "@iblai/iblai-api": "4.166.0-ai",