From 7d2d4d86581433c66012c725bb0ccb4be1847377 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Mon, 24 Feb 2025 12:39:42 +0530 Subject: [PATCH 1/9] fix: toast should be above the modal --- packages/components/toast/package.json | 1 + .../components/toast/src/toast-provider.tsx | 1 + .../toast/stories/toast.stories.tsx | 54 +++++++++++++++++++ packages/core/theme/src/components/toast.ts | 2 +- pnpm-lock.yaml | 2 +- 5 files changed, 58 insertions(+), 2 deletions(-) diff --git a/packages/components/toast/package.json b/packages/components/toast/package.json index 47bb04a439..2593304a7b 100644 --- a/packages/components/toast/package.json +++ b/packages/components/toast/package.json @@ -56,6 +56,7 @@ "@heroui/system": "workspace:*", "@heroui/theme": "workspace:*", "@heroui/button": "workspace:*", + "@heroui/modal": "workspace:*", "clean-package": "2.2.0", "react": "^18.0.0", "react-dom": "^18.0.0" diff --git a/packages/components/toast/src/toast-provider.tsx b/packages/components/toast/src/toast-provider.tsx index 4a80a6872c..f8527f9c5f 100644 --- a/packages/components/toast/src/toast-provider.tsx +++ b/packages/components/toast/src/toast-provider.tsx @@ -73,5 +73,6 @@ export const closeAll = () => { keys.map((key) => { globalToastQueue?.close(key); + globalToastQueue?.remove(key); }); }; diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx index d85529f032..2ca9dafe20 100644 --- a/packages/components/toast/stories/toast.stories.tsx +++ b/packages/components/toast/stories/toast.stories.tsx @@ -2,6 +2,14 @@ import React, {useEffect} from "react"; import {Meta} from "@storybook/react"; import {cn, toast} from "@heroui/theme"; import {Button} from "@heroui/button"; +import { + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + useDisclosure, +} from "@heroui/modal"; import {Toast, ToastProps, ToastProvider, addToast, closeAll} from "../src"; @@ -217,6 +225,45 @@ const PromiseToastTemplate = (args: ToastProps) => { ); }; +const WithToastFromModalTemplate = (args) => { + const {isOpen, onOpen, onOpenChange, onClose} = useDisclosure(); + + return ( + <> + + + + Toast from Modal + +
Press "Show Toast" to launch a toast.
+ + + + + + +
+
+ +
+
+ +
+
+ + ); +}; + const CustomToastComponent = (args) => { const color = args.color; const colorMap = { @@ -409,6 +456,13 @@ export const WithEndContent = { }, }; +export const WithToastFromModal = { + render: WithToastFromModalTemplate, + args: { + ...defaultProps, + }, +}; + export const CustomStyles = { render: CustomToastTemplate, args: { diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts index 918a204f44..d379e0b844 100644 --- a/packages/core/theme/src/components/toast.ts +++ b/packages/core/theme/src/components/toast.ts @@ -5,7 +5,7 @@ import {colorVariants} from "../utils"; const toastRegion = tv({ slots: { - base: "relative z-50", + base: "relative z-[100]", }, variants: { disableAnimation: { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 73069a0fb1..9f5a832674 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30039,4 +30039,4 @@ snapshots: react: 18.3.0 use-sync-external-store: 1.4.0(react@18.3.0) - zwitch@2.0.4: {} + zwitch@2.0.4: {} \ No newline at end of file From 4c6bf32765542ba8fe4d862005e6f0ac75c5e49a Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Mon, 24 Feb 2025 16:15:48 +0530 Subject: [PATCH 2/9] fix: renaming the loadingIcon to loadingComponent --- apps/docs/content/docs/components/toast.mdx | 8 ++++---- packages/components/toast/src/toast.tsx | 15 +++++++-------- packages/components/toast/src/use-toast.ts | 18 ++++++++++-------- .../components/toast/stories/toast.stories.tsx | 9 +++++++++ packages/core/theme/src/components/toast.ts | 4 ++-- 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/apps/docs/content/docs/components/toast.mdx b/apps/docs/content/docs/components/toast.mdx index fa48d91092..8cf1d0d530 100644 --- a/apps/docs/content/docs/components/toast.mdx +++ b/apps/docs/content/docs/components/toast.mdx @@ -168,7 +168,7 @@ Toast has the following slots: - `title`: The title element - `description`: The description element - `icon`: The icon element -- `loadingIcon`: The icon to be displayed until `promise` is resolved/rejected. +- `loadingComponent`: The component to be displayed until `promise` is resolved/rejected. - `content`: The wrapper for the title, description and icon content. - `motionDiv`: The motion.div for the FramerMotion. - `progressTrack`: The track of the progressBar. @@ -253,9 +253,9 @@ Toast has the following slots: default: "undefined" }, { - attribute: "loadingIcon", + attribute: "loadingComponent", type: "ReactNode", - description: "The loading icon for toasts with promise prop - overrides the default loading icon", + description: "The loading component for toasts with promise prop - overrides the default loading component", default: "-" }, { @@ -284,7 +284,7 @@ Toast has the following slots: }, { attribute: "classNames", - type: "Partial>", + type: "Partial>", description: "Allows to set custom class names for the toast slots.", default: "-" } diff --git a/packages/components/toast/src/toast.tsx b/packages/components/toast/src/toast.tsx index 372f24b6e2..d5ad73896a 100644 --- a/packages/components/toast/src/toast.tsx +++ b/packages/components/toast/src/toast.tsx @@ -31,7 +31,7 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => { severity, Component, icon, - loadingIcon, + loadingComponent, domRef, endContent, color, @@ -51,7 +51,7 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => { getIconProps, getMotionDivProps, getCloseIconProps, - getLoadingIconProps, + getLoadingComponentProps, isLoading, } = useToast({ ...props, @@ -60,16 +60,15 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => { const customIcon = icon && isValidElement(icon) ? cloneElement(icon, getIconProps()) : null; const IconComponent = severity ? iconMap[severity] : iconMap[color] || iconMap.default; - const customLoadingIcon = - loadingIcon && isValidElement(loadingIcon) - ? cloneElement(loadingIcon, getLoadingIconProps()) + const customLoadingComponent = + loadingComponent && isValidElement(loadingComponent) + ? cloneElement(loadingComponent, getLoadingComponentProps()) : null; const loadingIconComponent = isLoading - ? customLoadingIcon || ( + ? customLoadingComponent || ( ) : null; diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts index 51e793bbea..fbadcbdf03 100644 --- a/packages/components/toast/src/use-toast.ts +++ b/packages/components/toast/src/use-toast.ts @@ -49,7 +49,7 @@ export interface ToastProps extends ToastVariantProps { * content: "content-classes" * description: "description-classes" * title: "title-classes" - * loadingIcon: "loading-icon-classes", + * loadingComponent: "loading-component-classes", * icon: "icon-classes", * progressTrack: "progress-track-classes", * progressIndicator: "progress-indicator-classes", @@ -73,9 +73,9 @@ export interface ToastProps extends ToastVariantProps { */ closeIcon?: ReactNode | ((props: any) => ReactNode); /** - * Icon to be displayed in the loading toast - overrides the loading icon + * Component to be displayed in the loading toast - overrides the default loading component */ - loadingIcon?: ReactNode; + loadingComponent?: ReactNode; /** * Whether the toast-icon should be hidden. * @default false @@ -160,6 +160,7 @@ export function useToast(originalProps: UseToastProps) onClose, severity, maxVisibleToasts, + loadingComponent, ...otherProps } = props; @@ -261,7 +262,6 @@ export function useToast(originalProps: UseToastProps) ]); const Component = as || "div"; - const loadingIcon: ReactNode = icon; const domRef = useDOMRef(ref); const baseStyles = clsx(className, classNames?.base); @@ -433,9 +433,11 @@ export function useToast(originalProps: UseToastProps) [], ); - const getLoadingIconProps: PropGetter = useCallback( + const getLoadingComponentProps: PropGetter = useCallback( (props = {}) => ({ - className: slots.loadingIcon({class: classNames?.loadingIcon}), + className: slots.loadingComponent({class: classNames?.loadingComponent}), + color: "current", + size: "sm", ...props, }), [], @@ -616,7 +618,7 @@ export function useToast(originalProps: UseToastProps) title, description, icon, - loadingIcon, + loadingComponent, domRef, severity, closeIcon, @@ -639,7 +641,7 @@ export function useToast(originalProps: UseToastProps) getIconProps, getMotionDivProps, getCloseIconProps, - getLoadingIconProps, + getLoadingComponentProps, progressBarRef, endContent, slots, diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx index 2ca9dafe20..625834268a 100644 --- a/packages/components/toast/stories/toast.stories.tsx +++ b/packages/components/toast/stories/toast.stories.tsx @@ -10,6 +10,7 @@ import { ModalHeader, useDisclosure, } from "@heroui/modal"; +import {Spinner} from "@heroui/spinner"; import {Toast, ToastProps, ToastProvider, addToast, closeAll} from "../src"; @@ -435,6 +436,14 @@ export const PromiseToast = { }, }; +export const PromiseWithCustomLoadingComponent = { + render: PromiseToastTemplate, + args: { + ...defaultProps, + loadingComponent: , + }, +}; + export const ShowTimeoutProgress = { render: ShowTimeoutProgressTemplate, args: { diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts index d379e0b844..643ba37b42 100644 --- a/packages/core/theme/src/components/toast.ts +++ b/packages/core/theme/src/components/toast.ts @@ -48,7 +48,7 @@ const toast = tv({ title: ["text-sm", "me-4", "font-medium", "text-foreground"], description: ["text-sm", "me-4", "text-default-500"], icon: ["w-6 h-6 flex-none fill-current"], - loadingIcon: ["w-6 h-6 flex-none fill-current"], + loadingComponent: ["w-6 h-6 flex-none fill-current"], content: ["flex flex-grow flex-row gap-x-4 items-center relative"], progressTrack: ["absolute inset-0 pointer-events-none bg-transparent overflow-hidden"], progressIndicator: ["h-full bg-default-400 opacity-20"], @@ -72,7 +72,7 @@ const toast = tv({ size: { sm: { icon: "w-5 h-5", - loadingIcon: "w-5 h-5", + loadingComponent: "w-5 h-5", }, md: {}, lg: {}, From 779b487a5df3157dffb0d879bd8c20b5caebbcd6 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Mon, 24 Feb 2025 17:05:43 +0530 Subject: [PATCH 3/9] chore: adding changeset --- .changeset/popular-forks-sparkle.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/popular-forks-sparkle.md diff --git a/.changeset/popular-forks-sparkle.md b/.changeset/popular-forks-sparkle.md new file mode 100644 index 0000000000..e9dd5d0c29 --- /dev/null +++ b/.changeset/popular-forks-sparkle.md @@ -0,0 +1,7 @@ +--- +"@heroui/toast": patch +"@heroui/theme": patch +--- + +Toast should be above the modal(#4898). +Renaming loadingIcon to loadingComponent. From 5927fb1fba84dd72308adbe923e6bdf9c6a02114 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Fri, 28 Feb 2025 13:59:49 +0530 Subject: [PATCH 4/9] chore: fixing conflicts --- pnpm-lock.yaml | 168 +++++++++++++++++++++++++++++++++++-------------- 1 file changed, 122 insertions(+), 46 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f5a832674..e018f3799c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -123,16 +123,16 @@ importers: version: 7.32.0 eslint-config-airbnb: specifier: ^18.2.1 - version: 18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0) + version: 18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0) eslint-config-airbnb-typescript: specifier: ^12.3.1 - version: 12.3.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3) + version: 12.3.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3) eslint-config-prettier: specifier: ^8.2.0 version: 8.10.0(eslint@7.32.0) eslint-config-react-app: specifier: ^6.0.0 - version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0)(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3) + version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3) eslint-config-ts-lambdas: specifier: ^1.2.3 version: 1.2.3(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3) @@ -141,7 +141,7 @@ importers: version: 2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0) eslint-loader: specifier: ^4.0.2 - version: 4.0.2(eslint@7.32.0)(webpack@5.97.1) + version: 4.0.2(eslint@7.32.0)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)) eslint-plugin-import: specifier: ^2.26.0 version: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0) @@ -195,13 +195,13 @@ importers: version: 10.7.11 jest: specifier: ^29.7.0 - version: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + version: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) jest-environment-jsdom: specifier: ^29.7.0 version: 29.7.0 jest-watch-typeahead: specifier: 2.2.2 - version: 2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))) + version: 2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))) lint-staged: specifier: ^13.0.3 version: 13.3.0(enquirer@2.4.1) @@ -252,7 +252,7 @@ importers: version: 5.7.3 webpack: specifier: ^5.53.0 - version: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1)) + version: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12) webpack-bundle-analyzer: specifier: ^4.4.2 version: 4.10.2 @@ -3157,6 +3157,9 @@ importers: '@heroui/button': specifier: workspace:* version: link:../button + '@heroui/modal': + specifier: workspace:* + version: link:../modal '@heroui/system': specifier: workspace:* version: link:../../core/system @@ -3509,7 +3512,7 @@ importers: version: 18.3.0 tailwind-variants: specifier: ^0.3.0 - version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))) + version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))) packages/core/theme: dependencies: @@ -3536,7 +3539,7 @@ importers: version: 2.5.4 tailwind-variants: specifier: 0.3.0 - version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))) + version: 0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))) devDependencies: '@types/color': specifier: ^4.2.0 @@ -3549,7 +3552,7 @@ importers: version: 2.2.0 tailwindcss: specifier: ^3.4.16 - version: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) + version: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) packages/hooks/use-aria-accordion: dependencies: @@ -16989,7 +16992,7 @@ snapshots: lodash.merge: 4.6.2 lodash.uniq: 4.5.0 resolve-from: 5.0.0 - ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3) + ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3) typescript: 5.7.3 transitivePeerDependencies: - '@swc/core' @@ -17708,7 +17711,7 @@ snapshots: jest-util: 29.7.0 slash: 3.0.0 - '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))': + '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0 @@ -17722,7 +17725,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -22283,7 +22286,7 @@ snapshots: dependencies: '@types/node': 20.5.1 cosmiconfig: 8.3.6(typescript@5.7.3) - ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3) + ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3) typescript: 5.7.3 cosmiconfig@8.3.6(typescript@5.7.3): @@ -22304,13 +22307,13 @@ snapshots: optionalDependencies: typescript: 5.7.3 - create-jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)): + create-jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -22973,7 +22976,7 @@ snapshots: optionalDependencies: source-map: 0.6.1 - eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0): + eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0): dependencies: confusing-browser-globals: 1.0.11 eslint: 7.32.0 @@ -22981,11 +22984,11 @@ snapshots: object.assign: 4.1.7 object.entries: 1.1.8 - eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3): + eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3): dependencies: '@typescript-eslint/parser': 4.33.0(eslint@7.32.0)(typescript@5.7.3) - eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0) - eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0) + eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0) + eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0) transitivePeerDependencies: - eslint - eslint-plugin-import @@ -22995,10 +22998,10 @@ snapshots: - supports-color - typescript - eslint-config-airbnb@18.2.1(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0): + eslint-config-airbnb@18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0): dependencies: eslint: 7.32.0 - eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0)(eslint@7.32.0) + eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0) eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0) eslint-plugin-jsx-a11y: 6.10.2(eslint@7.32.0) eslint-plugin-react: 7.37.3(eslint@7.32.0) @@ -23030,7 +23033,7 @@ snapshots: dependencies: eslint: 7.32.0 - eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0)(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3): + eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.3(eslint@7.32.0))(eslint@7.32.0)(typescript@5.7.3): dependencies: '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0)(typescript@5.7.3) '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@5.7.3) @@ -23089,7 +23092,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.97.1): + eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)): dependencies: eslint: 7.32.0 find-cache-dir: 3.3.2 @@ -23097,9 +23100,9 @@ snapshots: loader-utils: 2.0.4 object-hash: 2.2.0 schema-utils: 2.7.1 - webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12) - eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0): + eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -23133,7 +23136,7 @@ snapshots: doctrine: 2.1.0 eslint: 7.32.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -24861,16 +24864,16 @@ snapshots: - babel-plugin-macros - supports-color - jest-cli@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)): + jest-cli@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + create-jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) exit: 0.1.2 import-local: 3.2.0 - jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -24880,7 +24883,7 @@ snapshots: - supports-color - ts-node - jest-config@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)): + jest-config@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)): dependencies: '@babel/core': 7.26.0 '@jest/test-sequencer': 29.7.0 @@ -24906,7 +24909,7 @@ snapshots: strip-json-comments: 3.1.1 optionalDependencies: '@types/node': 15.14.9 - ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3) + ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3) transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -25123,11 +25126,11 @@ snapshots: leven: 3.1.0 pretty-format: 29.7.0 - jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))): + jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))): dependencies: ansi-escapes: 6.2.1 chalk: 5.4.1 - jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) jest-regex-util: 29.6.3 jest-watcher: 29.7.0 slash: 5.1.0 @@ -25158,12 +25161,12 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 - jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)): + jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) '@jest/types': 29.6.3 import-local: 3.2.0 - jest-cli: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) + jest-cli: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -27207,6 +27210,14 @@ snapshots: camelcase-css: 2.0.1 postcss: 8.4.49 + postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)): + dependencies: + lilconfig: 3.1.3 + yaml: 2.7.0 + optionalDependencies: + postcss: 8.4.49 + ts-node: 10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3) + postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)): dependencies: lilconfig: 3.1.3 @@ -28819,10 +28830,10 @@ snapshots: tailwind-merge: 2.5.4 tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)) - tailwind-variants@0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3))): + tailwind-variants@0.3.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3))): dependencies: tailwind-merge: 2.5.4 - tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) + tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3)): dependencies: @@ -28878,7 +28889,7 @@ snapshots: transitivePeerDependencies: - ts-node - tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)): + tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)): dependencies: '@alloc/quick-lru': 5.2.0 arg: 5.0.2 @@ -28897,7 +28908,7 @@ snapshots: postcss: 8.4.49 postcss-import: 15.1.0(postcss@8.4.49) postcss-js: 4.0.1(postcss@8.4.49) - postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.7.3)) + postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3)) postcss-nested: 6.2.0(postcss@8.4.49) postcss-selector-parser: 6.1.2 resolve: 1.22.10 @@ -28953,7 +28964,7 @@ snapshots: term-size@2.2.1: {} - terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1): + terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 @@ -28965,6 +28976,18 @@ snapshots: '@swc/core': 1.10.6(@swc/helpers@0.5.15) esbuild: 0.24.2 + terser-webpack-plugin@5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)): + dependencies: + '@jridgewell/trace-mapping': 0.3.25 + jest-worker: 27.5.1 + schema-utils: 4.3.0 + serialize-javascript: 6.0.2 + terser: 5.37.0 + webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12) + optionalDependencies: + '@swc/core': 1.10.6(@swc/helpers@0.5.15) + esbuild: 0.24.2 + terser@5.37.0: dependencies: '@jridgewell/source-map': 0.3.6 @@ -29102,6 +29125,26 @@ snapshots: ts-interface-checker@0.1.13: {} + ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@5.7.3): + dependencies: + '@cspotcode/source-map-support': 0.8.1 + '@tsconfig/node10': 1.0.11 + '@tsconfig/node12': 1.0.11 + '@tsconfig/node14': 1.0.3 + '@tsconfig/node16': 1.0.4 + '@types/node': 15.14.9 + acorn: 8.14.0 + acorn-walk: 8.3.4 + arg: 4.1.3 + create-require: 1.1.1 + diff: 4.0.2 + make-error: 1.3.6 + typescript: 5.7.3 + v8-compile-cache-lib: 3.0.1 + yn: 3.1.1 + optionalDependencies: + '@swc/core': 1.10.6(@swc/helpers@0.5.15) + ts-node@10.9.2(@swc/core@1.10.6(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.7.3): dependencies: '@cspotcode/source-map-support': 0.8.1 @@ -29142,6 +29185,7 @@ snapshots: yn: 3.1.1 optionalDependencies: '@swc/core': 1.10.6(@swc/helpers@0.5.15) + optional: true ts-pattern@5.6.0: {} @@ -29779,7 +29823,7 @@ snapshots: loader-utils: 1.4.2 supports-color: 6.1.0 v8-compile-cache: 2.4.0 - webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1)) + webpack: 5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12) yargs: 13.3.2 webpack-merge@5.10.0: @@ -29814,7 +29858,39 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1) + terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12(webpack@5.97.1))) + watchpack: 2.4.2 + webpack-sources: 3.2.3 + optionalDependencies: + webpack-cli: 3.3.12(webpack@5.97.1) + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + + webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12): + dependencies: + '@types/eslint-scope': 3.7.7 + '@types/estree': 1.0.6 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/wasm-edit': 1.14.1 + '@webassemblyjs/wasm-parser': 1.14.1 + acorn: 8.14.0 + browserslist: 4.24.3 + chrome-trace-event: 1.0.4 + enhanced-resolve: 5.18.0 + es-module-lexer: 1.6.0 + eslint-scope: 5.1.1 + events: 3.3.0 + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + json-parse-even-better-errors: 2.3.1 + loader-runner: 4.3.0 + mime-types: 2.1.35 + neo-async: 2.6.2 + schema-utils: 3.3.0 + tapable: 2.2.1 + terser-webpack-plugin: 5.3.11(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack@5.97.1(@swc/core@1.10.6(@swc/helpers@0.5.15))(esbuild@0.24.2)(webpack-cli@3.3.12)) watchpack: 2.4.2 webpack-sources: 3.2.3 optionalDependencies: @@ -30039,4 +30115,4 @@ snapshots: react: 18.3.0 use-sync-external-store: 1.4.0(react@18.3.0) - zwitch@2.0.4: {} \ No newline at end of file + zwitch@2.0.4: {} From be899a349cfcf1bb01b4c706e6558a7363f8f0f5 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Fri, 28 Feb 2025 21:05:04 +0530 Subject: [PATCH 5/9] chore: adding the region props --- apps/docs/content/docs/components/toast.mdx | 20 +++++++++++++++++- .../components/toast/src/toast-provider.tsx | 5 ++++- .../components/toast/src/toast-region.tsx | 21 ++++++++++++++++--- 3 files changed, 41 insertions(+), 5 deletions(-) diff --git a/apps/docs/content/docs/components/toast.mdx b/apps/docs/content/docs/components/toast.mdx index 8cf1d0d530..18bcd42678 100644 --- a/apps/docs/content/docs/components/toast.mdx +++ b/apps/docs/content/docs/components/toast.mdx @@ -180,7 +180,7 @@ Toast has the following slots: ## Accessibility - Toast has role of `alert` -- All Toasts are present in ToastRegion. +- All Toasts are present in `ToastRegion`. - Close button has aria-label="Close" by default - When no toast are present, ToastRegion is removed from the DOM @@ -331,9 +331,27 @@ Toast has the following slots: description: "Props to be passed to all toasts", default: "-" }, + { + attribute: "regionProps", + type: "ToastRegionProps", + description: "Props to be passed to toast region", + default: "-" + }, ]} /> +### ToastRegion Props + +>", + description: "Allows to set custom class names for the toast region slots.", + default: "-" + } + ]} +/> ### Toast Events diff --git a/packages/components/toast/src/toast-provider.tsx b/packages/components/toast/src/toast-provider.tsx index f8527f9c5f..4e65af9d99 100644 --- a/packages/components/toast/src/toast-provider.tsx +++ b/packages/components/toast/src/toast-provider.tsx @@ -1,7 +1,7 @@ import {ToastOptions, ToastQueue, useToastQueue} from "@react-stately/toast"; import {useProviderContext} from "@heroui/system"; -import {ToastRegion} from "./toast-region"; +import {RegionProps, ToastRegion} from "./toast-region"; import {ToastProps, ToastPlacement} from "./use-toast"; let globalToastQueue: ToastQueue | null = null; @@ -12,6 +12,7 @@ interface ToastProviderProps { disableAnimation?: boolean; toastProps?: ToastProps; toastOffset?: number; + regionProps?: RegionProps; } export const getToastQueue = () => { @@ -31,6 +32,7 @@ export const ToastProvider = ({ maxVisibleToasts = 3, toastOffset = 0, toastProps = {}, + regionProps, }: ToastProviderProps) => { const toastQueue = useToastQueue(getToastQueue()); const globalContext = useProviderContext(); @@ -48,6 +50,7 @@ export const ToastProvider = ({ toastOffset={toastOffset} toastProps={toastProps} toastQueue={toastQueue} + {...regionProps} /> ); }; diff --git a/packages/components/toast/src/toast-region.tsx b/packages/components/toast/src/toast-region.tsx index 54c568661a..9c21dac263 100644 --- a/packages/components/toast/src/toast-region.tsx +++ b/packages/components/toast/src/toast-region.tsx @@ -3,12 +3,23 @@ import {useToastRegion, AriaToastRegionProps} from "@react-aria/toast"; import {QueuedToast, ToastState} from "@react-stately/toast"; import {useHover} from "@react-aria/interactions"; import {mergeProps} from "@react-aria/utils"; -import {toastRegion, ToastRegionVariantProps} from "@heroui/theme"; +import { + SlotsToClasses, + toastRegion, + ToastRegionSlots, + ToastRegionVariantProps, +} from "@heroui/theme"; +import {clsx} from "@heroui/shared-utils"; import Toast from "./toast"; import {ToastProps, ToastPlacement} from "./use-toast"; -interface ToastRegionProps extends AriaToastRegionProps, ToastRegionVariantProps { +export interface RegionProps { + className?: string; + classNames?: SlotsToClasses; +} + +interface ToastRegionProps extends AriaToastRegionProps, ToastRegionVariantProps, RegionProps { toastQueue: ToastState; placement?: ToastPlacement; maxVisibleToasts: number; @@ -23,6 +34,8 @@ export function ToastRegion({ maxVisibleToasts, toastOffset, toastProps = {}, + className, + classNames, ...props }: ToastRegionProps) { const ref = useRef(null); @@ -41,6 +54,8 @@ export function ToastRegion({ [disableAnimation], ); + const baseStyles = clsx(className, classNames?.base); + useEffect(() => { function handleTouchOutside(event: TouchEvent) { if (ref.current && !(ref.current as HTMLDivElement).contains(event.target as Node)) { @@ -65,7 +80,7 @@ export function ToastRegion({
From 18dbfdc4fe01e4c19e2e789a640dcf4132d98ad8 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Sat, 1 Mar 2025 10:41:16 +0530 Subject: [PATCH 6/9] fix: adding Marcus' suggestions --- .../components/toast/src/toast-region.tsx | 11 +++--- .../toast/stories/toast.stories.tsx | 36 +++++++++---------- 2 files changed, 21 insertions(+), 26 deletions(-) diff --git a/packages/components/toast/src/toast-region.tsx b/packages/components/toast/src/toast-region.tsx index 9c21dac263..f70941c0dd 100644 --- a/packages/components/toast/src/toast-region.tsx +++ b/packages/components/toast/src/toast-region.tsx @@ -1,14 +1,11 @@ +import type {SlotsToClasses, ToastRegionSlots, ToastRegionVariantProps} from "@heroui/theme"; + import {useCallback, useEffect, useMemo, useRef, useState} from "react"; import {useToastRegion, AriaToastRegionProps} from "@react-aria/toast"; import {QueuedToast, ToastState} from "@react-stately/toast"; import {useHover} from "@react-aria/interactions"; import {mergeProps} from "@react-aria/utils"; -import { - SlotsToClasses, - toastRegion, - ToastRegionSlots, - ToastRegionVariantProps, -} from "@heroui/theme"; +import {toastRegion} from "@heroui/theme"; import {clsx} from "@heroui/shared-utils"; import Toast from "./toast"; @@ -80,7 +77,7 @@ export function ToastRegion({
diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx index 625834268a..594494f1bc 100644 --- a/packages/components/toast/stories/toast.stories.tsx +++ b/packages/components/toast/stories/toast.stories.tsx @@ -232,34 +232,32 @@ const WithToastFromModalTemplate = (args) => { return ( <> - + Toast from Modal
Press "Show Toast" to launch a toast.
 - +
+ + +
-
-
- -
-
- -
+
+
); From 20dd8987c7b5ed1d984206d69a5202f2774fdf40 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Mon, 3 Mar 2025 17:26:22 +0530 Subject: [PATCH 7/9] fix: marcus' suggestions --- packages/components/toast/package.json | 1 + .../toast/stories/toast.stories.tsx | 36 ++++++++++++++++--- pnpm-lock.yaml | 3 ++ 3 files changed, 35 insertions(+), 5 deletions(-) diff --git a/packages/components/toast/package.json b/packages/components/toast/package.json index 2593304a7b..64db24490d 100644 --- a/packages/components/toast/package.json +++ b/packages/components/toast/package.json @@ -57,6 +57,7 @@ "@heroui/theme": "workspace:*", "@heroui/button": "workspace:*", "@heroui/modal": "workspace:*", + "@heroui/drawer": "workspace:*", "clean-package": "2.2.0", "react": "^18.0.0", "react-dom": "^18.0.0" diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx index 594494f1bc..cc4b8e040e 100644 --- a/packages/components/toast/stories/toast.stories.tsx +++ b/packages/components/toast/stories/toast.stories.tsx @@ -10,6 +10,7 @@ import { ModalHeader, useDisclosure, } from "@heroui/modal"; +import {Drawer, DrawerContent} from "@heroui/drawer"; import {Spinner} from "@heroui/spinner"; import {Toast, ToastProps, ToastProvider, addToast, closeAll} from "../src"; @@ -226,12 +227,18 @@ const PromiseToastTemplate = (args: ToastProps) => { ); }; -const WithToastFromModalTemplate = (args) => { +const WithToastFromOverlayTemplate = (args) => { const {isOpen, onOpen, onOpenChange, onClose} = useDisclosure(); + const { + isOpen: isDrawerOpen, + onOpen: onDrawerOpen, + onOpenChange: onDrawerOpenChange, + } = useDisclosure({defaultOpen: args.defaultOpen}); return ( <> + Toast from Modal @@ -243,7 +250,7 @@ const WithToastFromModalTemplate = (args) => { + + + +
+
); @@ -463,8 +489,8 @@ export const WithEndContent = { }, }; -export const WithToastFromModal = { - render: WithToastFromModalTemplate, +export const ToastFromOverlay = { + render: WithToastFromOverlayTemplate, args: { ...defaultProps, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e018f3799c..ad946bd572 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3157,6 +3157,9 @@ importers: '@heroui/button': specifier: workspace:* version: link:../button + '@heroui/drawer': + specifier: workspace:* + version: link:../drawer '@heroui/modal': specifier: workspace:* version: link:../modal From 8466e69022d7d5b04c1638aff23443868b0dceeb Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Sat, 8 Mar 2025 19:35:17 +0530 Subject: [PATCH 8/9] Revert "fix: renaming the loadingIcon to loadingComponent" This reverts commit 4c6bf32765542ba8fe4d862005e6f0ac75c5e49a. --- .changeset/popular-forks-sparkle.md | 3 +-- apps/docs/content/docs/components/toast.mdx | 8 ++++---- packages/components/toast/src/toast.tsx | 15 ++++++++------- packages/components/toast/src/use-toast.ts | 18 ++++++++---------- .../components/toast/stories/toast.stories.tsx | 9 --------- packages/core/theme/src/components/toast.ts | 4 ++-- 6 files changed, 23 insertions(+), 34 deletions(-) diff --git a/.changeset/popular-forks-sparkle.md b/.changeset/popular-forks-sparkle.md index e9dd5d0c29..2a79405ad7 100644 --- a/.changeset/popular-forks-sparkle.md +++ b/.changeset/popular-forks-sparkle.md @@ -3,5 +3,4 @@ "@heroui/theme": patch --- -Toast should be above the modal(#4898). -Renaming loadingIcon to loadingComponent. +Toast should be above the modal(#4898). \ No newline at end of file diff --git a/apps/docs/content/docs/components/toast.mdx b/apps/docs/content/docs/components/toast.mdx index 18bcd42678..a0f343e467 100644 --- a/apps/docs/content/docs/components/toast.mdx +++ b/apps/docs/content/docs/components/toast.mdx @@ -168,7 +168,7 @@ Toast has the following slots: - `title`: The title element - `description`: The description element - `icon`: The icon element -- `loadingComponent`: The component to be displayed until `promise` is resolved/rejected. +- `loadingIcon`: The icon to be displayed until `promise` is resolved/rejected. - `content`: The wrapper for the title, description and icon content. - `motionDiv`: The motion.div for the FramerMotion. - `progressTrack`: The track of the progressBar. @@ -253,9 +253,9 @@ Toast has the following slots: default: "undefined" }, { - attribute: "loadingComponent", + attribute: "loadingIcon", type: "ReactNode", - description: "The loading component for toasts with promise prop - overrides the default loading component", + description: "The loading icon for toasts with promise prop - overrides the default loading icon", default: "-" }, { @@ -284,7 +284,7 @@ Toast has the following slots: }, { attribute: "classNames", - type: "Partial>", + type: "Partial>", description: "Allows to set custom class names for the toast slots.", default: "-" } diff --git a/packages/components/toast/src/toast.tsx b/packages/components/toast/src/toast.tsx index d5ad73896a..372f24b6e2 100644 --- a/packages/components/toast/src/toast.tsx +++ b/packages/components/toast/src/toast.tsx @@ -31,7 +31,7 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => { severity, Component, icon, - loadingComponent, + loadingIcon, domRef, endContent, color, @@ -51,7 +51,7 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => { getIconProps, getMotionDivProps, getCloseIconProps, - getLoadingComponentProps, + getLoadingIconProps, isLoading, } = useToast({ ...props, @@ -60,15 +60,16 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => { const customIcon = icon && isValidElement(icon) ? cloneElement(icon, getIconProps()) : null; const IconComponent = severity ? iconMap[severity] : iconMap[color] || iconMap.default; - const customLoadingComponent = - loadingComponent && isValidElement(loadingComponent) - ? cloneElement(loadingComponent, getLoadingComponentProps()) + const customLoadingIcon = + loadingIcon && isValidElement(loadingIcon) + ? cloneElement(loadingIcon, getLoadingIconProps()) : null; const loadingIconComponent = isLoading - ? customLoadingComponent || ( + ? customLoadingIcon || ( ) : null; diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts index fbadcbdf03..51e793bbea 100644 --- a/packages/components/toast/src/use-toast.ts +++ b/packages/components/toast/src/use-toast.ts @@ -49,7 +49,7 @@ export interface ToastProps extends ToastVariantProps { * content: "content-classes" * description: "description-classes" * title: "title-classes" - * loadingComponent: "loading-component-classes", + * loadingIcon: "loading-icon-classes", * icon: "icon-classes", * progressTrack: "progress-track-classes", * progressIndicator: "progress-indicator-classes", @@ -73,9 +73,9 @@ export interface ToastProps extends ToastVariantProps { */ closeIcon?: ReactNode | ((props: any) => ReactNode); /** - * Component to be displayed in the loading toast - overrides the default loading component + * Icon to be displayed in the loading toast - overrides the loading icon */ - loadingComponent?: ReactNode; + loadingIcon?: ReactNode; /** * Whether the toast-icon should be hidden. * @default false @@ -160,7 +160,6 @@ export function useToast(originalProps: UseToastProps) onClose, severity, maxVisibleToasts, - loadingComponent, ...otherProps } = props; @@ -262,6 +261,7 @@ export function useToast(originalProps: UseToastProps) ]); const Component = as || "div"; + const loadingIcon: ReactNode = icon; const domRef = useDOMRef(ref); const baseStyles = clsx(className, classNames?.base); @@ -433,11 +433,9 @@ export function useToast(originalProps: UseToastProps) [], ); - const getLoadingComponentProps: PropGetter = useCallback( + const getLoadingIconProps: PropGetter = useCallback( (props = {}) => ({ - className: slots.loadingComponent({class: classNames?.loadingComponent}), - color: "current", - size: "sm", + className: slots.loadingIcon({class: classNames?.loadingIcon}), ...props, }), [], @@ -618,7 +616,7 @@ export function useToast(originalProps: UseToastProps) title, description, icon, - loadingComponent, + loadingIcon, domRef, severity, closeIcon, @@ -641,7 +639,7 @@ export function useToast(originalProps: UseToastProps) getIconProps, getMotionDivProps, getCloseIconProps, - getLoadingComponentProps, + getLoadingIconProps, progressBarRef, endContent, slots, diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx index cc4b8e040e..b599039f7e 100644 --- a/packages/components/toast/stories/toast.stories.tsx +++ b/packages/components/toast/stories/toast.stories.tsx @@ -11,7 +11,6 @@ import { useDisclosure, } from "@heroui/modal"; import {Drawer, DrawerContent} from "@heroui/drawer"; -import {Spinner} from "@heroui/spinner"; import {Toast, ToastProps, ToastProvider, addToast, closeAll} from "../src"; @@ -460,14 +459,6 @@ export const PromiseToast = { }, }; -export const PromiseWithCustomLoadingComponent = { - render: PromiseToastTemplate, - args: { - ...defaultProps, - loadingComponent: , - }, -}; - export const ShowTimeoutProgress = { render: ShowTimeoutProgressTemplate, args: { diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts index 643ba37b42..d379e0b844 100644 --- a/packages/core/theme/src/components/toast.ts +++ b/packages/core/theme/src/components/toast.ts @@ -48,7 +48,7 @@ const toast = tv({ title: ["text-sm", "me-4", "font-medium", "text-foreground"], description: ["text-sm", "me-4", "text-default-500"], icon: ["w-6 h-6 flex-none fill-current"], - loadingComponent: ["w-6 h-6 flex-none fill-current"], + loadingIcon: ["w-6 h-6 flex-none fill-current"], content: ["flex flex-grow flex-row gap-x-4 items-center relative"], progressTrack: ["absolute inset-0 pointer-events-none bg-transparent overflow-hidden"], progressIndicator: ["h-full bg-default-400 opacity-20"], @@ -72,7 +72,7 @@ const toast = tv({ size: { sm: { icon: "w-5 h-5", - loadingComponent: "w-5 h-5", + loadingIcon: "w-5 h-5", }, md: {}, lg: {}, From 54e0144597a6c840e8b7310a2db9c98a3c021d1e Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Sat, 8 Mar 2025 20:04:38 +0530 Subject: [PATCH 9/9] chore: adding marcus' suggestions --- packages/components/toast/src/toast-region.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/toast/src/toast-region.tsx b/packages/components/toast/src/toast-region.tsx index f70941c0dd..f5ecedc033 100644 --- a/packages/components/toast/src/toast-region.tsx +++ b/packages/components/toast/src/toast-region.tsx @@ -51,7 +51,7 @@ export function ToastRegion({ [disableAnimation], ); - const baseStyles = clsx(className, classNames?.base); + const baseStyles = clsx(classNames?.base, className); useEffect(() => { function handleTouchOutside(event: TouchEvent) { @@ -77,7 +77,7 @@ export function ToastRegion({