From 7c8d8e6678da3bdfcec0ab05f1ab8fef5b508a28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Schr=C3=B6ter?= Date: Tue, 5 Dec 2023 11:19:58 +0100 Subject: [PATCH 1/2] chore: wip --- .../frameworks/react/src/toast/create-toaster.tsx | 7 ++++--- packages/frameworks/react/src/toast/index.ts | 9 ++++++--- packages/frameworks/react/src/toast/toast-group.tsx | 10 ++++++++++ packages/frameworks/react/src/toast/toast.test.tsx | 12 +++++++----- .../frameworks/solid/src/toast/create-toaster.tsx | 7 ++++--- packages/frameworks/solid/src/toast/index.ts | 9 ++++++--- packages/frameworks/solid/src/toast/toast-group.tsx | 7 +++++++ packages/frameworks/vue/src/toast/create-toaster.tsx | 6 +++--- packages/frameworks/vue/src/toast/index.ts | 9 ++++++--- packages/frameworks/vue/src/toast/toast-group.tsx | 11 +++++++++++ 10 files changed, 64 insertions(+), 23 deletions(-) create mode 100644 packages/frameworks/react/src/toast/toast-group.tsx create mode 100644 packages/frameworks/solid/src/toast/toast-group.tsx create mode 100644 packages/frameworks/vue/src/toast/toast-group.tsx diff --git a/packages/frameworks/react/src/toast/create-toaster.tsx b/packages/frameworks/react/src/toast/create-toaster.tsx index e6ed9f4ad4..e8c4c08a84 100644 --- a/packages/frameworks/react/src/toast/create-toaster.tsx +++ b/packages/frameworks/react/src/toast/create-toaster.tsx @@ -2,9 +2,10 @@ import { mergeProps, normalizeProps, useActor, type PropTypes } from '@zag-js/re import * as toast from '@zag-js/toast' import { forwardRef, useEffect, type JSX } from 'react' import { useEnvironmentContext } from '../environment' -import { ark, type HTMLArkProps } from '../factory' +import { type HTMLArkProps } from '../factory' import type { Optional } from '../types' import { ToastProvider } from './toast-context' +import { ToastGroup } from './toast-group' type GroupContext = Partial @@ -35,11 +36,11 @@ export const createToaster = (props: CreateToasterProps): CreateToasterReturn => const toasts = api.toastsByPlacement[placement] ?? [] return ( - + {toasts.map((toast) => ( ))} - + ) }) diff --git a/packages/frameworks/react/src/toast/index.ts b/packages/frameworks/react/src/toast/index.ts index ee9f0112b7..ac4264cbae 100644 --- a/packages/frameworks/react/src/toast/index.ts +++ b/packages/frameworks/react/src/toast/index.ts @@ -2,22 +2,25 @@ import { createToaster, type CreateToasterProps, type CreateToasterReturn } from import { Toast as ToastRoot, type ToastProps } from './toast' import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger' import { ToastDescription, type ToastDescriptionProps } from './toast-description' +import { ToastGroup, type ToastGroupProps } from './toast-group' import { ToastTitle, type ToastTitleProps } from './toast-title' const Toast = Object.assign(ToastRoot, { Root: ToastRoot, - Title: ToastTitle, - Description: ToastDescription, CloseTrigger: ToastCloseTrigger, + Description: ToastDescription, + Group: ToastGroup, + Title: ToastTitle, }) -export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle } +export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle } export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, + ToastGroupProps, ToastProps, ToastTitleProps, } diff --git a/packages/frameworks/react/src/toast/toast-group.tsx b/packages/frameworks/react/src/toast/toast-group.tsx new file mode 100644 index 0000000000..67cafc634d --- /dev/null +++ b/packages/frameworks/react/src/toast/toast-group.tsx @@ -0,0 +1,10 @@ +import { forwardRef } from 'react' +import { ark, type HTMLArkProps } from '../factory' + +export interface ToastGroupProps extends HTMLArkProps<'ol'> {} + +export const ToastGroup = forwardRef((props, ref) => { + return +}) + +ToastGroup.displayName = 'ToastGroup' diff --git a/packages/frameworks/react/src/toast/toast.test.tsx b/packages/frameworks/react/src/toast/toast.test.tsx index ae0b4e2965..d44141e4cd 100644 --- a/packages/frameworks/react/src/toast/toast.test.tsx +++ b/packages/frameworks/react/src/toast/toast.test.tsx @@ -1,7 +1,7 @@ import { toastAnatomy } from '@ark-ui/anatomy' import { render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' -import { getParts } from '../setup-test' +import { getExports, getParts } from '../setup-test' import { Toast, createToaster } from './' const [Toaster, toast] = createToaster({ @@ -27,14 +27,16 @@ export const ComponentUnderTest = () => ( ) describe('Toast', () => { - it.skip.each(getParts(toastAnatomy))('should render part! %s', async (part) => { + it.each(getParts(toastAnatomy))('should render part! %s', async (part) => { render() + await user.click(screen.getByText('Create Toast')) expect(document.querySelector(part)).toBeInTheDocument() + await user.click(screen.getByText('Close')) }) - // it.skip.each(getExports(toastAnatomy))('should export %s', async (part) => { - // expect(Toast[part]).toBeDefined() - // }) + it.each(getExports(toastAnatomy))('should export %s', async (part) => { + expect(Toast[part]).toBeDefined() + }) it('should show and hide a toast message', async () => { render() diff --git a/packages/frameworks/solid/src/toast/create-toaster.tsx b/packages/frameworks/solid/src/toast/create-toaster.tsx index 45c2262f81..2a7b487170 100644 --- a/packages/frameworks/solid/src/toast/create-toaster.tsx +++ b/packages/frameworks/solid/src/toast/create-toaster.tsx @@ -2,9 +2,10 @@ import { mergeProps, normalizeProps, useActor, type PropTypes } from '@zag-js/so import * as toast from '@zag-js/toast' import { Index, createEffect, createMemo, onCleanup, type Accessor, type JSX } from 'solid-js' import { useEnvironmentContext } from '../environment' -import { ark, type HTMLArkProps } from '../factory' +import { type HTMLArkProps } from '../factory' import type { Optional } from '../types' import { ToastProvider, type Options } from './toast-context' +import { ToastGroup } from './toast-group' type GroupContext = Partial @@ -37,11 +38,11 @@ export const createToaster = (props: CreateToasterProps): CreateToasterReturn => ) return ( - + {(toast) => } - + ) } diff --git a/packages/frameworks/solid/src/toast/index.ts b/packages/frameworks/solid/src/toast/index.ts index ee9f0112b7..ac4264cbae 100644 --- a/packages/frameworks/solid/src/toast/index.ts +++ b/packages/frameworks/solid/src/toast/index.ts @@ -2,22 +2,25 @@ import { createToaster, type CreateToasterProps, type CreateToasterReturn } from import { Toast as ToastRoot, type ToastProps } from './toast' import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger' import { ToastDescription, type ToastDescriptionProps } from './toast-description' +import { ToastGroup, type ToastGroupProps } from './toast-group' import { ToastTitle, type ToastTitleProps } from './toast-title' const Toast = Object.assign(ToastRoot, { Root: ToastRoot, - Title: ToastTitle, - Description: ToastDescription, CloseTrigger: ToastCloseTrigger, + Description: ToastDescription, + Group: ToastGroup, + Title: ToastTitle, }) -export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle } +export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle } export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, + ToastGroupProps, ToastProps, ToastTitleProps, } diff --git a/packages/frameworks/solid/src/toast/toast-group.tsx b/packages/frameworks/solid/src/toast/toast-group.tsx new file mode 100644 index 0000000000..e6cf4e09df --- /dev/null +++ b/packages/frameworks/solid/src/toast/toast-group.tsx @@ -0,0 +1,7 @@ +import { ark, type HTMLArkProps } from '../factory' + +export interface ToastGroupProps extends HTMLArkProps<'ol'> {} + +export const ToastGroup = (props: ToastGroupProps) => { + return +} diff --git a/packages/frameworks/vue/src/toast/create-toaster.tsx b/packages/frameworks/vue/src/toast/create-toaster.tsx index 8d46621acc..14bcfcdec9 100644 --- a/packages/frameworks/vue/src/toast/create-toaster.tsx +++ b/packages/frameworks/vue/src/toast/create-toaster.tsx @@ -11,9 +11,9 @@ import { type VNode, } from 'vue' import { useEnvironmentContext } from '../environment' -import { ark } from '../factory' import type { Optional } from '../types' import { ToastProvider } from './toast-context' +import { ToastGroup } from './toast-group' type GroupContext = Partial @@ -44,11 +44,11 @@ export const createToaster = (props: CreateToasterProps): CreateToasterReturn => }) return () => ( - + {(api.value.toastsByPlacement[placement] ?? []).map((toast) => ( ))} - + ) }, }) diff --git a/packages/frameworks/vue/src/toast/index.ts b/packages/frameworks/vue/src/toast/index.ts index ee9f0112b7..ac4264cbae 100644 --- a/packages/frameworks/vue/src/toast/index.ts +++ b/packages/frameworks/vue/src/toast/index.ts @@ -2,22 +2,25 @@ import { createToaster, type CreateToasterProps, type CreateToasterReturn } from import { Toast as ToastRoot, type ToastProps } from './toast' import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger' import { ToastDescription, type ToastDescriptionProps } from './toast-description' +import { ToastGroup, type ToastGroupProps } from './toast-group' import { ToastTitle, type ToastTitleProps } from './toast-title' const Toast = Object.assign(ToastRoot, { Root: ToastRoot, - Title: ToastTitle, - Description: ToastDescription, CloseTrigger: ToastCloseTrigger, + Description: ToastDescription, + Group: ToastGroup, + Title: ToastTitle, }) -export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle } +export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle } export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, + ToastGroupProps, ToastProps, ToastTitleProps, } diff --git a/packages/frameworks/vue/src/toast/toast-group.tsx b/packages/frameworks/vue/src/toast/toast-group.tsx new file mode 100644 index 0000000000..8737cb83c3 --- /dev/null +++ b/packages/frameworks/vue/src/toast/toast-group.tsx @@ -0,0 +1,11 @@ +import { defineComponent } from 'vue' +import { ark, type HTMLArkProps } from '../factory' + +export type ToastGroupProps = HTMLArkProps<'ol'> + +export const ToastGroup = defineComponent({ + name: 'ToastGroup', + setup(_, { attrs }) { + return () => + }, +}) From 403f54e98d880ea474ee22a30cb1eb5e5fa2638a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Schr=C3=B6ter?= Date: Tue, 5 Dec 2023 12:14:47 +0100 Subject: [PATCH 2/2] docs: changelog --- packages/frameworks/react/CHANGELOG.md | 9 +++++++++ packages/frameworks/solid/CHANGELOG.md | 12 ++++++++++++ 2 files changed, 21 insertions(+) diff --git a/packages/frameworks/react/CHANGELOG.md b/packages/frameworks/react/CHANGELOG.md index 974f614a4e..4048adc265 100644 --- a/packages/frameworks/react/CHANGELOG.md +++ b/packages/frameworks/react/CHANGELOG.md @@ -6,11 +6,20 @@ description: All notable changes to this project will be documented in this file ## [Unreleased] +### Added + +- Added the `ToastGroup` component. + +### Changed + +- Revised the `FileUpload` component. Check out the [documentation](https://ark-ui.com/docs/components/file-upload) for more information. + ### Fixed - Added an explicit return type for the `Portal` component to resolve an issue with online code editors. - Resolved an issue where the `present` prop in the disclosure-type component was not being respected. - Resolved an issue where the `ark` function would log a warning when the `asChild` prop was set to `false`. +- Fixed an issue where keyboard interactions within a submenu would bubble up to the parent `Menu`. ## [1.1.0] - 2023-11-21 diff --git a/packages/frameworks/solid/CHANGELOG.md b/packages/frameworks/solid/CHANGELOG.md index e3cf7687f4..5aec9f8a45 100644 --- a/packages/frameworks/solid/CHANGELOG.md +++ b/packages/frameworks/solid/CHANGELOG.md @@ -6,6 +6,18 @@ description: All notable changes to this project will be documented in this file ## [Unreleased] +### Added + +- Added the `ToastGroup` component. + +### Changed + +- Revised the `FileUpload` component. Check out the [documentation](https://ark-ui.com/docs/components/file-upload) for more information. + +### Fixed + +- Fixed an issue where keyboard interactions within a submenu would bubble up to the parent `Menu`. + ## [1.1.0] - 2023-11-21 ### Added