From f83d82dcbfa76ef04a1d7b4cf8eb9597c662c981 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=AFeul?= <45822175+maiieul@users.noreply.github.com> Date: Wed, 21 Aug 2024 22:25:11 +0200 Subject: [PATCH 01/27] move to SSG adapter (#941) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * allow people to pass handlers to modal close * moving to the static adapter * Preview (#940) * chore(website): bump to qwik 1.7.3 + entry files output (#926) * Revert-new-sw (#927) * Revert "change to new sw impl" This reverts commit 3081504323255d76ebdae5bcad45a267d22ebd4e. * chore(website): charSet -> charset in root.tsx * Remove-import-meta-glob-eager-true (#928) * chore(website): remove import.meta.glob eager true * chore(website): comment out vite config trick to se chunk names * chore(pkg.pr.new): remove 0.0.9 flag (#921) * chore(qwik-themes): move code internally + signal implementation (#922) * chore(qwik-themes): move code internally under _state folder * chore(themes): linting * fix(themes): use signals instead of stores * chore(themes provider): useVisibleTask to useOnWindow * chore(themes): move to qwik-ui/themes * Tooltip Beta (#934) * feat(tooltip): implement tooltip to beta phase * fix(tooltip): small tweaks to the tooltip state * fix: remove animations form tooltip docs and fix placement example * feat(tooltip): implement onOpenChange$ * chore: fix changeset type * test: update placement test to remove loop * fix: remove breaking examples and tooltip route * fix: checkbox tests preventing us from opening pw * refactor: deprecate popover hover prop in favor of tooltip * latest --------- Co-authored-by: Christopher Woolum * fix: comment out bundle issue when changing user pref (#935) * chore(website): disable qwikVite linter to speed up preview and builds (#936) * Inline comp docs (#931) * allow people to pass handlers to modal close * docs: improve contributor guide * docs: mention inline components * add utils changeset (#937) * Version Packages (#917) Co-authored-by: github-actions[bot] * chore(/themes): turn visible task to strategy:document-idle (#938) * chore(/themes): turn visible task to strategy:document-idle * fix(themes): add timeout to themeSig assignment to localstorage * fix(themes): augment timeout to themeSig assignment to localstorage * fix(website): remove js execution on load by assigning themes sig on click (#939) * feat: static adapter * use improved shiki node version now that we're on static --------- Co-authored-by: Maïeul <45822175+maiieul@users.noreply.github.com> Co-authored-by: Christopher Woolum Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] Co-authored-by: maiieul * fix(website): click on copy code --------- Co-authored-by: jack shelton Co-authored-by: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Co-authored-by: Christopher Woolum Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] --- apps/website/README.md | 14 +++++--- .../adapters/cloudflare-pages/vite.config.ts | 22 ------------- apps/website/adapters/static/vite.config.ts | 19 +++++++++++ apps/website/project.json | 2 +- .../src/components/highlight/highlight.tsx | 33 ++++++++----------- apps/website/vite.config.ts | 5 +++ 6 files changed, 49 insertions(+), 46 deletions(-) delete mode 100644 apps/website/adapters/cloudflare-pages/vite.config.ts create mode 100644 apps/website/adapters/static/vite.config.ts diff --git a/apps/website/README.md b/apps/website/README.md index 3705c3c6a..69c7f279d 100644 --- a/apps/website/README.md +++ b/apps/website/README.md @@ -35,7 +35,7 @@ Inside your project, you'll see the following directory structure: Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/). ```shell -pnpm qwik add # or `yarn qwik add` +pnpm qwik add # or `pnpm qwik add` ``` ## Development @@ -43,7 +43,7 @@ pnpm qwik add # or `yarn qwik add` Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output. ```shell -npm start # or `yarn start` +npm start # or `pnpm start` ``` > Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build. @@ -53,7 +53,7 @@ npm start # or `yarn start` The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server. ```shell -pnpm preview # or `yarn preview` +pnpm preview # or `pnpm preview` ``` ## Production @@ -61,5 +61,11 @@ pnpm preview # or `yarn preview` The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code. ```shell -pnpm build # or `yarn build` +pnpm build # or `pnpm build` +``` + +## Static Site Generator (Node.js) + +```shell +pnpm build.server ``` diff --git a/apps/website/adapters/cloudflare-pages/vite.config.ts b/apps/website/adapters/cloudflare-pages/vite.config.ts deleted file mode 100644 index 8f3036425..000000000 --- a/apps/website/adapters/cloudflare-pages/vite.config.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { cloudflarePagesAdapter } from '@builder.io/qwik-city/adapters/cloudflare-pages/vite'; -import { extendConfig } from '@builder.io/qwik-city/vite'; -import baseConfig from '../../vite.config'; - -export default extendConfig(baseConfig, () => { - return { - build: { - ssr: true, - rollupOptions: { - input: ['apps/website/src/entry.cloudflare-pages.tsx', '@qwik-city-plan'], - }, - }, - plugins: [ - cloudflarePagesAdapter({ - ssg: { - include: ['/*'], - origin: 'https://qwikui.com', - }, - }), - ], - }; -}); diff --git a/apps/website/adapters/static/vite.config.ts b/apps/website/adapters/static/vite.config.ts new file mode 100644 index 000000000..5a0a297d1 --- /dev/null +++ b/apps/website/adapters/static/vite.config.ts @@ -0,0 +1,19 @@ +import { staticAdapter } from '@builder.io/qwik-city/adapters/static/vite'; +import { extendConfig } from '@builder.io/qwik-city/vite'; +import baseConfig from '../../vite.config'; + +export default extendConfig(baseConfig, () => { + return { + build: { + ssr: true, + rollupOptions: { + input: ['@qwik-city-plan'], + }, + }, + plugins: [ + staticAdapter({ + origin: 'https://qwikui.com', + }), + ], + }; +}); diff --git a/apps/website/project.json b/apps/website/project.json index b1aa7c9b6..aff989143 100644 --- a/apps/website/project.json +++ b/apps/website/project.json @@ -47,7 +47,7 @@ "mode": "production" }, "production": { - "configFile": "apps/website/adapters/cloudflare-pages/vite.config.ts" + "configFile": "apps/website/adapters/static/vite.config.ts" } }, "dependsOn": [] diff --git a/apps/website/src/components/highlight/highlight.tsx b/apps/website/src/components/highlight/highlight.tsx index 06bed0143..5bc47d5be 100644 --- a/apps/website/src/components/highlight/highlight.tsx +++ b/apps/website/src/components/highlight/highlight.tsx @@ -1,23 +1,12 @@ -import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik'; +import { ClassList, PropsOf, component$, useSignal, useTask$, $ } from '@builder.io/qwik'; import { CodeCopy } from '../code-copy/code-copy'; import { cn } from '@qwik-ui/utils'; -import poimandres from 'shiki/themes/poimandres.mjs'; -import html from 'shiki/langs/html.mjs'; -import css from 'shiki/langs/css.mjs'; -import tsx from 'shiki/langs/tsx.mjs'; -import { createHighlighterCore, BundledLanguage } from 'shiki/index.mjs'; - -// Create a single highlighter instance -const highlighterPromise = createHighlighterCore({ - themes: [poimandres], - langs: [html, css, tsx], - loadWasm: import('shiki/wasm'), -}); +import { codeToHtml } from 'shiki'; export type HighlightProps = PropsOf<'div'> & { code: string; copyCodeClass?: ClassList; - language?: BundledLanguage; + language?: 'tsx' | 'html' | 'css'; splitCommentStart?: string; splitCommentEnd?: string; }; @@ -33,26 +22,32 @@ export const Highlight = component$( }: HighlightProps) => { const codeSig = useSignal(''); - useTask$(async ({ track }) => { - track(() => code); + const addShiki$ = $(async () => { let modifiedCode: string = code; let partsOfCode = modifiedCode.split(splitCommentStart); + if (partsOfCode.length > 1) { modifiedCode = partsOfCode[1]; } partsOfCode = modifiedCode.split(splitCommentEnd); + if (partsOfCode.length > 1) { modifiedCode = partsOfCode[0]; } - const highlighter = await highlighterPromise; - const str = highlighter.codeToHtml(modifiedCode, { + const str = await codeToHtml(modifiedCode, { lang: language, theme: 'poimandres', }); - codeSig.value = str; + + codeSig.value = str.toString(); + }); + + useTask$(async ({ track }) => { + track(() => code); + await addShiki$(); }); return ( diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts index 19fe368ec..7d3229ee8 100644 --- a/apps/website/vite.config.ts +++ b/apps/website/vite.config.ts @@ -105,5 +105,10 @@ export default defineConfig(async () => { 'Cache-Control': 'public, max-age=600', }, }, + optimizeDeps: { + // Put problematic deps that break bundling here, mostly those with binaries. + // For example ['better-sqlite3'] if you use that in server functions. + exclude: ['shiki'], + }, }; }); From b78cce6cfd93249228a6356940f642dea7cca0c9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 26 Aug 2024 20:28:25 +0000 Subject: [PATCH 02/27] @ArkadiK94 has signed the CLA from Pull Request #948 --- cla-signs/v1/cla.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/cla-signs/v1/cla.json b/cla-signs/v1/cla.json index db893252b..8ad8beb1c 100644 --- a/cla-signs/v1/cla.json +++ b/cla-signs/v1/cla.json @@ -551,6 +551,14 @@ "created_at": "2024-08-08T20:45:05Z", "repoId": 545159943, "pullRequestNo": 916 + }, + { + "name": "ArkadiK94", + "id": 76536506, + "comment_id": 2311027894, + "created_at": "2024-08-26T20:28:12Z", + "repoId": 545159943, + "pullRequestNo": 948 } ] } \ No newline at end of file From e1db6c2c6ba2b3379350b3a30a7c17ac49ba0caf Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 2 Sep 2024 19:31:55 +0000 Subject: [PATCH 03/27] @steffanek has signed the CLA from Pull Request #957 --- cla-signs/v1/cla.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/cla-signs/v1/cla.json b/cla-signs/v1/cla.json index 8ad8beb1c..72d09f8e6 100644 --- a/cla-signs/v1/cla.json +++ b/cla-signs/v1/cla.json @@ -559,6 +559,14 @@ "created_at": "2024-08-26T20:28:12Z", "repoId": 545159943, "pullRequestNo": 948 + }, + { + "name": "steffanek", + "id": 22999414, + "comment_id": 2325233734, + "created_at": "2024-09-02T19:31:42Z", + "repoId": 545159943, + "pullRequestNo": 957 } ] } \ No newline at end of file From fca032d1c4556ff630e9e5325e2d40f1dd1806a7 Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Mon, 2 Sep 2024 23:58:16 -0500 Subject: [PATCH 04/27] Refactored ProgressBar + Carousel Stepper (#952) * allow people to pass handlers to modal close * refactored progress / backwards compatible * get example working again * feat: progress bar accounts for any range and computes a progress * initial stepper * feat: indeterminate * feat: indeterminate animation code snippet * feat: improve progress examples * docs: finish progress docs * feat: stepper * tests: initial tests * refactor: carousel test reorganization * refactor: remove test numbers * tests: add multiple slides tests * tests: add non-draggable test * feat: mobile tests * feat: enabled and disabled tests * test: slide snapping * test: csr * test: autoplay tests * test: add state tests * test: stepper tests * docs: carousel docs * autoplay and last stepper tests --- .../headless/carousel/examples/carousel.css | 30 +- .../headless/carousel/examples/progress.tsx | 38 + .../carousel/examples/stepper-no-scroll.tsx | 22 + .../examples/stepper-presentational.tsx | 26 + .../headless/carousel/examples/stepper.tsx | 24 + .../carousel/examples/test-player-visible.tsx | 46 + .../carousel/examples/vertical-stepper.tsx | 26 + .../routes/docs/headless/carousel/index.mdx | 144 ++- .../headless/progress/examples/complete.tsx | 15 + .../docs/headless/progress/examples/csr.tsx | 23 + .../docs/headless/progress/examples/hero.tsx | 11 +- .../progress/examples/indeterminate.tsx | 17 + .../docs/headless/progress/examples/max.tsx | 48 + .../docs/headless/progress/examples/min.tsx | 53 + .../headless/progress/examples/reactive.tsx | 20 + .../routes/docs/headless/progress/index.mdx | 103 +- .../progress/snippets/indeterminate.css | 15 + .../headless/progress/snippets/progress.css | 37 + .../docs/styled/progress/examples/hero.tsx | 4 +- .../src/components/carousel/actionable.md | 21 - .../src/components/carousel/carousel.test.ts | 912 +++++++++++++----- .../src/components/carousel/context.ts | 13 +- .../src/components/carousel/driver.ts | 80 +- .../src/components/carousel/index.ts | 2 + .../src/components/carousel/inline.tsx | 10 + .../src/components/carousel/next.tsx | 2 +- .../src/components/carousel/player.tsx | 57 +- .../src/components/carousel/previous.tsx | 2 +- .../src/components/carousel/root.tsx | 32 +- .../src/components/carousel/scroller.tsx | 2 +- .../src/components/carousel/slide.tsx | 6 +- .../src/components/carousel/step.tsx | 50 + .../src/components/carousel/stepper.tsx | 9 + .../src/components/carousel/use-carousel.tsx | 52 + .../src/components/polymorphic/index.ts | 1 + .../components/polymorphic/polymorphic.tsx | 19 + .../src/components/progress/index.ts | 4 +- .../components/progress/progress-context.ts | 8 +- .../progress/progress-indicator.tsx | 22 +- .../src/components/progress/progress-root.tsx | 111 +++ .../src/components/progress/progress.test.ts | 84 +- .../src/components/progress/progress.tsx | 57 -- .../src/components/progress/util.ts | 24 - packages/kit-headless/src/index.ts | 1 + .../src/components/progress/progress.tsx | 11 +- 45 files changed, 1759 insertions(+), 535 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/progress.tsx create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/stepper-no-scroll.tsx create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/stepper-presentational.tsx create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/stepper.tsx create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/test-player-visible.tsx create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/vertical-stepper.tsx create mode 100644 apps/website/src/routes/docs/headless/progress/examples/complete.tsx create mode 100644 apps/website/src/routes/docs/headless/progress/examples/csr.tsx create mode 100644 apps/website/src/routes/docs/headless/progress/examples/indeterminate.tsx create mode 100644 apps/website/src/routes/docs/headless/progress/examples/max.tsx create mode 100644 apps/website/src/routes/docs/headless/progress/examples/min.tsx create mode 100644 apps/website/src/routes/docs/headless/progress/examples/reactive.tsx create mode 100644 apps/website/src/routes/docs/headless/progress/snippets/indeterminate.css delete mode 100644 packages/kit-headless/src/components/carousel/actionable.md create mode 100644 packages/kit-headless/src/components/carousel/step.tsx create mode 100644 packages/kit-headless/src/components/carousel/stepper.tsx create mode 100644 packages/kit-headless/src/components/carousel/use-carousel.tsx create mode 100644 packages/kit-headless/src/components/polymorphic/index.ts create mode 100644 packages/kit-headless/src/components/polymorphic/polymorphic.tsx create mode 100644 packages/kit-headless/src/components/progress/progress-root.tsx delete mode 100644 packages/kit-headless/src/components/progress/progress.tsx delete mode 100644 packages/kit-headless/src/components/progress/util.ts diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index 92a4a26fe..05e3ad931 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -18,7 +18,6 @@ gap: 0.5rem; padding: 1rem; border: 2px dotted hsl(var(--foreground)); - outline: none; } .carousel-buttons { @@ -43,6 +42,7 @@ .carousel-pagination-bullet { cursor: pointer; padding-inline: 0.5rem; + outline: none; } .carousel-pagination-bullet[data-active] { @@ -71,3 +71,31 @@ .carousel-conditional .carousel-slide[data-active] { opacity: 1; } + +.carousel-stepper { + display: flex; + justify-content: space-between; +} + +.carousel-step { + display: flex; + gap: 1rem; + align-items: center; +} + +.carousel-step::before { + content: attr(data-step); + display: grid; + place-items: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + background-color: hsl(var(--muted)); + + /* Slight adjustment for visual centering */ + padding-bottom: 0.1em; +} + +.carousel-step[data-current]::before { + background-color: hsl(var(--primary)); +} diff --git a/apps/website/src/routes/docs/headless/carousel/examples/progress.tsx b/apps/website/src/routes/docs/headless/carousel/examples/progress.tsx new file mode 100644 index 000000000..76abcbbb8 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/progress.tsx @@ -0,0 +1,38 @@ +import { component$, PropsOf, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Carousel, Progress } from '@qwik-ui/headless'; +import styles from '../../progress/snippets/progress.css?inline'; + +export const CarouselProgress = component$((props: PropsOf) => { + useStyles$(styles); + + return ( + + + + ); +}); + +export default component$(() => { + useStyles$(styles); + + const progress = useSignal(0); + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + return ( + <> + + +
+ Prev + Next +
+ {colors.map((color) => ( + + {color} + + ))} + + + ); +}); +// internal diff --git a/apps/website/src/routes/docs/headless/carousel/examples/stepper-no-scroll.tsx b/apps/website/src/routes/docs/headless/carousel/examples/stepper-no-scroll.tsx new file mode 100644 index 000000000..72af429a4 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/stepper-no-scroll.tsx @@ -0,0 +1,22 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + return ( + + + {Array.from({ length: 3 }).map((_, index) => ( + Header {index + 1} + ))} + + + {Array.from({ length: 3 }).map((_, index) => ( + Content {index + 1} + ))} + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/stepper-presentational.tsx b/apps/website/src/routes/docs/headless/carousel/examples/stepper-presentational.tsx new file mode 100644 index 000000000..f27efeb7b --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/stepper-presentational.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + return ( + + + {Array.from({ length: 3 }).map((_, index) => ( + + Header {index + 1} + + ))} + + + + {Array.from({ length: 3 }).map((_, index) => ( + Content {index + 1} + ))} + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/stepper.tsx b/apps/website/src/routes/docs/headless/carousel/examples/stepper.tsx new file mode 100644 index 000000000..d89e46b5c --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/stepper.tsx @@ -0,0 +1,24 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + return ( + + + {Array.from({ length: 3 }).map((_, index) => ( + Header {index + 1} + ))} + + + + {Array.from({ length: 3 }).map((_, index) => ( + Content {index + 1} + ))} + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/test-player-visible.tsx b/apps/website/src/routes/docs/headless/carousel/examples/test-player-visible.tsx new file mode 100644 index 000000000..7700a5c66 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/test-player-visible.tsx @@ -0,0 +1,46 @@ +import { component$, useOn, useSignal, useStyles$, $ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + const isPlaying = useSignal(false); + + useOn( + 'qvisible', + $(() => { + isPlaying.value = true; + }), + ); + + return ( + <> + +
+ Prev + Next +
+ + {colors.map((color, index) => ( + + {color} +
{index === 1 && }
+ + ))} + + +

isPlaying: {isPlaying.value.toString()}

+ + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/vertical-stepper.tsx b/apps/website/src/routes/docs/headless/carousel/examples/vertical-stepper.tsx new file mode 100644 index 000000000..87e174f6b --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/vertical-stepper.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const space = { marginBlock: '1rem' }; + + return ( + + {/* example stepper css uses flex for horizontal examples */} + + {Array.from({ length: 3 }).map((_, index) => ( + <> + Header {index + 1} + + Content {index + 1} + + + ))} + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index de43bc2cc..632ff9d46 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -27,20 +27,18 @@ Displays multiple content items in one space, rotating through them. 'Support for multiple slides per view', 'Reactive slide updates', 'Initial slide selection', + 'Carousels can be horizontal or vertical', 'Customizable accessible names', - 'Supports scroller and conditional carousels', - ]} - roadmap={[ - 'Improve test coverage', - 'Enhance documentation', - 'Refine API for consistency with other components', - 'Add support for vertical carousels', + 'Supports carousels with or without scrollers', + 'Optionally exposed as an accessible stepper', ]} /> -## CSS Scroll snapping +## Why use the Qwik UI Carousel? + +### CSS Scroll snapping -Qwik UI combines CSS scroll snapping and flexbox for the carousel: +On coarse devices and when getting initial slide positions, Qwik UI combines CSS scroll snapping and flexbox for an optimized swiping experience: - Scroll snapping: Used on mobile for smooth touch interactions and initial snap position. - Flexbox: Provides a simple layout system for variable widths, gaps, and columns. @@ -88,27 +86,53 @@ Qwik UI combines CSS scroll snapping and flexbox for the carousel: } ``` -## Pagination +## Alignment Options -Use `` and `` components to add pagination. +### Start Alignment - +The default alignment is `start`. Slides will snap to the left edge of the carousel. -> These are exposed to assistive technologies as tabs for screen readers. + + +### Center Alignment + +Set the `align` prop to `center` to align slides to the center of the carousel. + + + +### End Alignment + +Set the `align` prop to `end` to align slides to the right edge of the carousel. + + + +## Component State + +### Initial + +To set an initial slide position, use the `startIndex` prop. + + -## Multiple Slides +### Reactive + +Reactively control the selected slide index by using the `bind:selectedIndex` prop. + + + +### Multiple Slides Set the `slidesPerView` prop for multiple slides. -## Non-draggable +### Non-draggable Opt-out of the draggable behavior by setting the `draggable` prop to `false`. -## Different widths +### Different widths By default, the slides will take up the full width of the carousel. @@ -116,7 +140,7 @@ To change this, use the `flex-basis` CSS property on the `` co -## Without Scroller +### No Scroll Qwik UI supports carousels without a scroller, which can be useful for conditional slide carousels. @@ -124,9 +148,7 @@ Qwik UI supports carousels without a scroller, which can be useful for condition Remove the `` component to remove the scroller. -## Animations - -### Conditional Slides +#### Example Conditional Animation @@ -150,35 +172,31 @@ Remove the `` component to remove the scroller. } ``` -## CSR +### CSR Both SSR and CSR are supported. In this example, we conditionally render the carousel based on an interaction. -## Center +### Loop -Align slides to the center of the carousel by setting the `align` prop to `center`. - - - -## End +Loop the carousel by setting the `loop` prop to `true`. -Align slides to the end of the carousel by setting the `align` prop to `end`. + - +> When looping, navigation buttons are never disabled. -## Loop +### Autoplay -Loop the carousel by setting the `loop` prop to `true`. +To use autoplay, use the `bind:autoplay` prop. - + -> When looping, navigation buttons are never disabled. +### Accessible name -## Accessible Name +By default, the carousel is automatically labeled with the `aria-label` attribute. -Add an accessible name to the carousel by adding the `` component. +In the case that you want to add a custom accessible name, use the `` component. @@ -186,13 +204,7 @@ To hide the title from screen readers, use the `` component. > The title is automatically added to the carousel's `aria-labelledby` attribute. -## Autoplay - -To use autoplay, use the `bind:autoplay` prop. - - - -### What if I want to autoplay on initial render? +#### What if I want to autoplay on initial render? Use a visible task to change the signal passed to `bind:autoplay` to `true` when the component is visible. @@ -206,17 +218,53 @@ Use a visible task to change the signal passed to `bind:autoplay` to `true` when ``` -## Initial +## Configurations -To set an initial slide position, use the `startIndex` prop. +### Pagination - +Use `` and `` components to add pagination. + + -## Reactive +Inspired by [Adam Argyle's carousel examples](https://gui-challenges.web.app/carousel/dist/), the carousel component allows the pagination to be extendable, while intending to be intuitive. -Reactively control the selected slide index by using the `bind:selectedIndex` prop. +> These are exposed to assistive technologies as tabs for screen readers. - +### Stepper + +The Carousel component also includes built-in accessibility support for steppers and setup wizards. + + + +Steps can be disabled and enabled based on the index of the current slide or any other piece of state. + +> Steppers are seen by screen readers as a navigation area with series of steps that the user can navigate through. + +#### No Scroll + +Similar to Carousel's, steppers can be used without a scroller. + + + +#### Vertical + +Vertical steppers can be created by changing the markup position of the stepper. + + + +#### Presentational + +Create non-interactive steppers by setting the `as` prop to `div` or `span`. Use `Carousel.Next` and `Carousel.Previous` components for navigation instead. + + + +### Progress + +You can also control the progress of the carousel by using the `bind:progress` prop. + + + +In the above example, we also use the headless progress component to show the progress of the carousel. ## API diff --git a/apps/website/src/routes/docs/headless/progress/examples/complete.tsx b/apps/website/src/routes/docs/headless/progress/examples/complete.tsx new file mode 100644 index 000000000..18624c514 --- /dev/null +++ b/apps/website/src/routes/docs/headless/progress/examples/complete.tsx @@ -0,0 +1,15 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Progress } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + return ( + + + + ); +}); + +// internal +import styles from '../snippets/progress.css?inline'; diff --git a/apps/website/src/routes/docs/headless/progress/examples/csr.tsx b/apps/website/src/routes/docs/headless/progress/examples/csr.tsx new file mode 100644 index 000000000..805c3e704 --- /dev/null +++ b/apps/website/src/routes/docs/headless/progress/examples/csr.tsx @@ -0,0 +1,23 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Progress } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const progress = 30; + const isRendered = useSignal(false); + + return ( + <> + + {isRendered.value && ( + + + + )} + + ); +}); + +// internal +import styles from '../snippets/progress.css?inline'; diff --git a/apps/website/src/routes/docs/headless/progress/examples/hero.tsx b/apps/website/src/routes/docs/headless/progress/examples/hero.tsx index 26dd98e4a..452374e03 100644 --- a/apps/website/src/routes/docs/headless/progress/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/progress/examples/hero.tsx @@ -1,6 +1,5 @@ import { component$, useStyles$ } from '@builder.io/qwik'; import { Progress } from '@qwik-ui/headless'; -import styles from '../snippets/progress.css?inline'; export default component$(() => { useStyles$(styles); @@ -9,12 +8,10 @@ export default component$(() => { return ( - + ); }); + +// internal +import styles from '../snippets/progress.css?inline'; diff --git a/apps/website/src/routes/docs/headless/progress/examples/indeterminate.tsx b/apps/website/src/routes/docs/headless/progress/examples/indeterminate.tsx new file mode 100644 index 000000000..d553522ff --- /dev/null +++ b/apps/website/src/routes/docs/headless/progress/examples/indeterminate.tsx @@ -0,0 +1,17 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Progress } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const progressSig = useSignal(null); + + return ( + + + + ); +}); + +// internal +import styles from '../snippets/progress.css?inline'; diff --git a/apps/website/src/routes/docs/headless/progress/examples/max.tsx b/apps/website/src/routes/docs/headless/progress/examples/max.tsx new file mode 100644 index 000000000..1f2527e2f --- /dev/null +++ b/apps/website/src/routes/docs/headless/progress/examples/max.tsx @@ -0,0 +1,48 @@ +import { component$, useSignal, useStyles$, $ } from '@builder.io/qwik'; +import { Progress } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const initialNumTreats = 25; + + const totalTreats = useSignal(initialNumTreats); + const treatsEaten = 20; + + const space = { margin: '1rem' }; + + const increment = $(() => totalTreats.value++); + const decrement = $(() => { + if (totalTreats.value > 20) totalTreats.value--; + }); + + return ( + <> +

🧁 Tiara's Treats

+ +
+ Total treats: + + {totalTreats.value} + +
+ + + + + +

Number of eaten treats: {treatsEaten}

+ + ); +}); + +// internal +import styles from '../snippets/progress.css?inline'; diff --git a/apps/website/src/routes/docs/headless/progress/examples/min.tsx b/apps/website/src/routes/docs/headless/progress/examples/min.tsx new file mode 100644 index 000000000..8a021e62f --- /dev/null +++ b/apps/website/src/routes/docs/headless/progress/examples/min.tsx @@ -0,0 +1,53 @@ +import { component$, useSignal, useStyles$, $ } from '@builder.io/qwik'; +import { Progress } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const fundraisingGoal = 10000; + const amountRaised = 5000; + const minGoal = useSignal(2000); + + const space = { margin: '1rem' }; + + const incrementMin = $(() => { + if (minGoal.value < amountRaised) minGoal.value += 500; + }); + + const decrementMin = $(() => { + if (minGoal.value > 0) minGoal.value -= 500; + }); + + return ( +
+

🎗️ Charity Fundraiser

+ +
+ Initial funding: + + ${minGoal.value} + +
+ +
Amount raised: ${amountRaised}
+ + + + + +

Funding goal: ${fundraisingGoal}

+
+ ); +}); + +// internal +import styles from '../snippets/progress.css?inline'; diff --git a/apps/website/src/routes/docs/headless/progress/examples/reactive.tsx b/apps/website/src/routes/docs/headless/progress/examples/reactive.tsx new file mode 100644 index 000000000..4861b0fe5 --- /dev/null +++ b/apps/website/src/routes/docs/headless/progress/examples/reactive.tsx @@ -0,0 +1,20 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Progress } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const progressSig = useSignal(30); + + return ( + <> + + + + + + ); +}); + +// internal +import styles from '../snippets/progress.css?inline'; diff --git a/apps/website/src/routes/docs/headless/progress/index.mdx b/apps/website/src/routes/docs/headless/progress/index.mdx index 557a00d3a..89a3180e5 100644 --- a/apps/website/src/routes/docs/headless/progress/index.mdx +++ b/apps/website/src/routes/docs/headless/progress/index.mdx @@ -3,7 +3,9 @@ title: Qwik UI | Progress --- import { statusByComponent } from '~/_state/component-statuses'; + import { FeatureList } from '~/components/feature-list/feature-list'; + import { Note } from '~/components/note/note'; @@ -16,7 +18,88 @@ A visual indicator that shows how much of a task has been completed. ## ✨ Features - + + +## Defining the range + +### Min + +The `min` prop sets a minimum starting point for the progress bar. + + + +### Adding a value + +To set a value for the progress bar, use the `value` prop in the `Progress.Root` component. + + + +### Max + +The `max` prop defines the upper limit of the progress bar. + + + +## Status + +### In progress + +When the task is ongoing, the progress component reflects this state. + + + +The `data-progress="in-progress"` attribute is applied to the progress and its indicator. + +### Complete + +When the task is finished, the `data-progress="complete"` attribute is applied. + + + +### Indeterminate progress + +If the progress is uncertain, the bar should be in an indeterminate state. This occurs when the value is `null`. + + + +In this state, the progress and its indicator will have the `data-progress="indeterminate"` attribute. + +> Indeterminate progress is ideal for indicating ongoing operations without a clear completion time. + +#### Indeterminate Example CSS + + + +## State + +### Initial Progress + +To set the initial progress on page load, you can pass a `value` prop to the `Progress.Root` component. + + + +### Dynamic Progress Updates + +To update the progress bar in real-time, pass a signal to the `bind:value` prop. + + + +The progress bar can also be used in combination with other Qwik UI headless components, such as the Carousel component when the user [navigates through the slides](../carousel/#progress). + +## CSR + +Similar to other Qwik UI headless components, the Progress Bar automatically renders based on its environment. The previous progress bars are rendered on the server. + + + +The example above shows the progress bar being rendered on the client when the `isRendered` signal is set to `true`. ## Building blocks @@ -49,8 +132,15 @@ A visual indicator that shows how much of a task has been completed. propDescriptors={[ { name: 'value', + type: 'union', + info: 'number | null', + description: + 'Current value of the progress bar. Can be null for indeterminate state.', + }, + { + name: 'min', type: 'number', - description: 'Current value of the progress bar.', + description: 'Minimum starting point for the progress bar.', }, { name: 'max', @@ -61,7 +151,14 @@ A visual indicator that shows how much of a task has been completed. name: 'getValueLabel', type: 'function', description: - 'A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.', + 'A function to get the accessible label for the current value. If not provided, the label will be shown as a percentage of the range.', + }, + { + name: 'bind:value', + type: 'Signal', + info: 'Signal', + description: + 'A signal to bind the current value of the progress bar for reactive updates.', }, ]} /> diff --git a/apps/website/src/routes/docs/headless/progress/snippets/indeterminate.css b/apps/website/src/routes/docs/headless/progress/snippets/indeterminate.css new file mode 100644 index 000000000..bf84d1ae5 --- /dev/null +++ b/apps/website/src/routes/docs/headless/progress/snippets/indeterminate.css @@ -0,0 +1,15 @@ +@media (prefers-reduced-motion: no-preference) { + .progress-indicator.indeterminate { + width: 30%; + animation: indeterminate-slide 2s infinite cubic-bezier(0.37, 0, 0.63, 1); + } +} + +@keyframes indeterminate-slide { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(400%); + } +} diff --git a/apps/website/src/routes/docs/headless/progress/snippets/progress.css b/apps/website/src/routes/docs/headless/progress/snippets/progress.css index 4374333f4..2b77c2f00 100644 --- a/apps/website/src/routes/docs/headless/progress/snippets/progress.css +++ b/apps/website/src/routes/docs/headless/progress/snippets/progress.css @@ -11,3 +11,40 @@ width: 100%; background-color: hsl(var(--primary)); } + +@keyframes loading-flash { + 0% { + opacity: 0.1; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.1; + } +} + +@media (prefers-reduced-motion: no-preference) { + .progress-indicator.indeterminate { + width: 30%; + animation: indeterminate-slide 2s infinite cubic-bezier(0.37, 0, 0.63, 1); + } +} + +@keyframes indeterminate-slide { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(400%); + } +} + +.progress-example-input { + border-radius: calc(var(--border-radius) / 2); + border: 2px dotted hsl(var(--primary)); + margin-left: 0.5rem; + max-width: 3rem; + padding: 0.25rem; + outline: none; +} diff --git a/apps/website/src/routes/docs/styled/progress/examples/hero.tsx b/apps/website/src/routes/docs/styled/progress/examples/hero.tsx index 54c3b76e7..58570940e 100644 --- a/apps/website/src/routes/docs/styled/progress/examples/hero.tsx +++ b/apps/website/src/routes/docs/styled/progress/examples/hero.tsx @@ -2,7 +2,7 @@ import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'; import { Progress } from '~/components/ui'; export default component$(() => { - const progress = useSignal(30); + const progress = useSignal(20); useVisibleTask$(() => { setTimeout(() => { @@ -10,5 +10,5 @@ export default component$(() => { }, 500); }); - return ; + return ; }); diff --git a/packages/kit-headless/src/components/carousel/actionable.md b/packages/kit-headless/src/components/carousel/actionable.md deleted file mode 100644 index 91a991e0b..000000000 --- a/packages/kit-headless/src/components/carousel/actionable.md +++ /dev/null @@ -1,21 +0,0 @@ -# Accessibility Improvements for Carousel Component - -## 1. Implement auto-rotation control - -- Add a start/stop button for users to control auto-rotation [x] - -LET CONSUMERS DO: - -- Pause rotation on hover, focus -- Disable auto-rotation completely as an option - -## 5. Ensure proper color contrast - -- Maintain sufficient contrast for controls and text, especially when overlaying images -- Consider moving controls and captions outside the image area - -## 6. Implement focus styling - -- Highlight the entire tab list when a tab receives focus -- Ensure focus indicators are visible in high contrast mode -- Place the rotation control as the first element in the Tab sequence inside the carousel diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index a8434d916..c43c83881 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -15,252 +15,461 @@ async function setup(page: Page, exampleName: string) { test.describe('Mouse Behavior', () => { test(`GIVEN a carousel WHEN clicking on the next button - THEN it should move to the next slide - `, async ({ page }) => { - /* - example that gets used goes here. In this case it's hero from: - apps/website/src/routes/docs/headless/carousel/examples/hero.tsx - - If you type in 'test' in the setup parameter it will look for the test.tsx file - */ + THEN it should move to the next slide`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); await d.getNextButton().click(); - - // every slide might be "visible" in the case of scroller carousels. It might be easier to check if the slide has the data-active attribute. - await expect(d.getSlideAt(1)).toBeVisible(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel WHEN clicking on the previous button - THEN it should move to the previous slide - `, async ({ page }) => { + THEN it should move to the previous slide`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // initial setup (if this gets used often we can make it a function in dthe drriver) + // initial setup await d.getNextButton().click(); - await expect(d.getSlideAt(1)).toBeVisible(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); - // test previous work + // testing clicking the "previous" button + await d.getPrevButton().click(); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with dragging enabled WHEN using a pointer device and dragging to the left - THEN it should move to the next slide - `, async ({ page }) => { + THEN it should move to the next slide`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + // Ensure the first slide is active + const firstSlide = d.getSlideAt(0); + await expect(firstSlide).toHaveAttribute('data-active'); + + // grab first slide dimensions + const boundingBox = await d.getSlideBoundingBoxAt(0); + + const startX = boundingBox.x + boundingBox.width * 0.8; // near right edge + const endX = boundingBox.x + boundingBox.width * 0.2; // near left edge + const y = boundingBox.y + boundingBox.height / 2; // swipe height + + // perform the drag action + await firstSlide.hover({ position: { x: 5, y: 5 } }); + await page.mouse.move(startX, y); + await page.mouse.down(); + await page.mouse.move(endX, y, { steps: 10 }); + await page.mouse.up(); - // TODO + // second slide should be active + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with dragging enabled - WHEN using a pointer device and dragging to the right - THEN it should move to the previous slide -`, async ({ page }) => { + WHEN using a pointer device and dragging to the right + THEN it should move to the previous slide`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + // initial setup + await d.getNextButton().click(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + const boundingBox = await d.getSlideBoundingBoxAt(1); - // TODO + const endX = boundingBox.x + boundingBox.width * 0.9; // End closer to the right edge + const y = 5; + + // dragging + const slide = d.getSlideAt(1); + await slide.hover({ position: { x: 5, y: 5 } }); + await page.mouse.down(); + await page.mouse.move(endX, y, { steps: 5 }); + await page.mouse.up(); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with a pagination control WHEN clicking on the pagination bullets - THEN it should move to the corresponding slide -`, async ({ page }) => { + THEN it should move to the corresponding slide`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; + await d.getPaginationBullet(6).click(); + await expect(d.getSlideAt(6)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(2)).not.toHaveAttribute('data-active'); - // TODO + await d.getPaginationBullet(1).click(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(6)).not.toHaveAttribute('data-active'); }); test(`GIVEN a carousel with dragging enabled - WHEN on the first slide and the mouse is moved far right - THEN it should stay snapped on the first slide -`, async ({ page }) => { + WHEN dragging the carousel + THEN it should affect the slide position`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + const initialSlideBox = await d.getSlideBoundingBoxAt(0); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + + const startX = initialSlideBox.x + initialSlideBox.width * 0.8; + const endX = initialSlideBox.x + initialSlideBox.width * 0.2; + const y = initialSlideBox.y + initialSlideBox.height / 2; + + await d.getSlideAt(0).hover({ position: { x: 5, y: 5 } }); + await page.mouse.move(startX, y); + await page.mouse.down(); + await page.mouse.move(endX, y, { steps: 10 }); + await page.mouse.up(); + + const finalSlideBox = await d.getSlideBoundingBoxAt(0); + expect(Math.abs(finalSlideBox.x - initialSlideBox.x)).toBeGreaterThan(1); + }); - // TODO + test(`GIVEN a carousel with dragging disabled + WHEN attempting to drag the carousel + THEN it should not affect the slide position`, async ({ page }) => { + const { driver: d } = await setup(page, 'non-draggable'); + + const initialSlideBox = await d.getSlideBoundingBoxAt(0); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + + const startX = initialSlideBox.x + initialSlideBox.width * 0.8; + const endX = initialSlideBox.x + initialSlideBox.width * 0.2; + const y = initialSlideBox.y + initialSlideBox.height / 2; + + await d.getSlideAt(0).hover({ position: { x: 5, y: 5 } }); + await page.mouse.move(startX, y); + await page.mouse.down(); + await page.mouse.move(endX, y, { steps: 10 }); + await page.mouse.up(); + + const finalSlideBox = await d.getSlideBoundingBoxAt(0); + expect(finalSlideBox.x).toBeCloseTo(initialSlideBox.x, 0); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with dragging enabled - WHEN on the last slide and the mouse is moved far left - THEN it should stay snapped on the last slide -`, async ({ page }) => { + WHEN dragging to the next slide + THEN the next slide should snap to the left side of the scroller`, async ({ + page, + }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + const initialSlideBox = await d.getSlideBoundingBoxAt(0); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + + const startX = initialSlideBox.x + initialSlideBox.width * 0.8; + const endX = initialSlideBox.x + initialSlideBox.width * 0.2; + const y = initialSlideBox.y + initialSlideBox.height / 2; - // TODO + await d.getSlideAt(0).hover({ position: { x: 5, y: 5 } }); + await page.mouse.move(startX, y); + await page.mouse.down(); + await page.mouse.move(endX, y, { steps: 10 }); + await page.mouse.up(); + await d.getSlideAt(1).hover({ position: { x: 5, y: 5 } }); + + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + const scrollerBox = await d.getScrollerBoundingBox(); + const secondSlideBox = await d.getSlideBoundingBoxAt(1); + + // we need to check the space between the scroller left and the second slide left + expect(Math.abs(secondSlideBox.x - scrollerBox.x)).toBeLessThan(1); + }); + + test(`GIVEN a carousel + WHEN clicking the next button + THEN the next slide should snap to the left side of the scroller`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'hero'); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await d.getNextButton().click(); + + const scrollerBox = await d.getScrollerBoundingBox(); + const secondSlideBox = await d.getSlideBoundingBoxAt(1); + + const gap = await page.evaluate(() => { + const scroller = document.querySelector('[data-qui-carousel-scroller]'); + return parseInt(window.getComputedStyle(scroller!).getPropertyValue('gap')); + }); + + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + const slideWidth = secondSlideBox.width; + + // we need to check the distance travelled to the next slide + await expect(Math.abs(secondSlideBox.x - scrollerBox.x) - gap).toBeCloseTo( + slideWidth, + 0, + ); }); }); test.describe('Keyboard Behavior', () => { test(`GIVEN a carousel WHEN the enter key is pressed on the focused next button - THEN it should move to the next slide - `, async ({ page }) => { + THEN it should move to the next slide`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); + await d.getNextButton().focus(); await d.getNextButton().press('Enter'); - await expect(d.getSlideAt(1)).toBeVisible(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + await d.getNextButton().focus(); + await d.getNextButton().press('Enter'); + + await expect(d.getSlideAt(2)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel WHEN the enter key is pressed on the focused previous button - THEN it should move to the previous slide - `, async ({ page }) => { + THEN it should move to the previous slide`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getPrevButton()).toBeDisabled(); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + + await d.getPaginationBullet(6).click(); + await expect(d.getSlideAt(6)).toHaveAttribute('data-active'); - // TODO + await d.getPrevButton().press('Enter'); + await expect(d.getSlideAt(5)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with a pagination control WHEN the first bullet is focused and the right arrow key is pressed - THEN focus should move to the next bullet -`, async ({ page }) => { + THEN focus should move to the next bullet`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; + // Focus the first pagination bullet + const firstBullet = await d.getPaginationBullet(0); + await d.getPaginationBullet(0).focus(); - // TODO + await expect(firstBullet).toHaveAttribute('aria-selected', 'true'); + await page.keyboard.press('ArrowRight'); + + await expect(d.getPaginationBullet(1)).toHaveAttribute('aria-selected', 'true'); }); test(`GIVEN a carousel with a pagination control WHEN the 2nd bullet is focused and the left arrow key is pressed - THEN focus should move to the previous bullet -`, async ({ page }) => { + THEN focus should move to the previous bullet`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); + const secondBullet = d.getPaginationBullet(1); + await secondBullet.focus(); - // remove this (there so that TS doesn't complain) - d; + await expect(secondBullet).toHaveAttribute('aria-selected', 'true'); + await page.keyboard.press('ArrowLeft'); - // TODO + await expect(d.getPaginationBullet(0)).toHaveAttribute('aria-selected', 'true'); }); test(`GIVEN a carousel with a pagination control WHEN the first bullet is focused and the right arrow key is pressed - THEN focus should move to the 2nd slide -`, async ({ page }) => { + THEN focus should move to the 2nd slide`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; + // Focus on the first pagination bullet + const firstBullet = d.getPaginationBullet(0); + await firstBullet.focus(); - // TODO + await page.keyboard.press('ArrowRight'); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with a pagination control WHEN the 2nd bullet is focused and the left arrow key is pressed - THEN it should move to the 1st slide -`, async ({ page }) => { + THEN focus should move to the 1st slide`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; + // initial + const secondBullet = d.getPaginationBullet(1); + await secondBullet.focus(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); - // TODO + await page.keyboard.press('ArrowLeft'); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with a pagination control - WHEN the 1st bullet is focused and the end key is pressed - THEN it should move to the last slide -`, async ({ page }) => { + WHEN the 1st bullet is focused and the END key is pressed + THEN it should move to the last slide`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; + await d.getPaginationBullet(0).focus(); - // TODO + await page.keyboard.press('End'); + const totalSlides = await d.getTotalSlides(); + await expect(d.getSlideAt(totalSlides - 1)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with a pagination control - WHEN the last bullet is focused and the home key is pressed - THEN it should move to the first slide -`, async ({ page }) => { + WHEN the last bullet is focused and the HOME key is pressed + THEN it should move to the first slide`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); + const totalSlides = await d.getTotalSlides(); + const lastBullet = d.getPaginationBullet(totalSlides - 1); + await lastBullet.focus(); + await expect(lastBullet).toHaveAttribute('aria-selected', 'true'); - // remove this (there so that TS doesn't complain) - d; - - // TODO + await page.keyboard.press('Home'); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); }); }); +// PW doesn't support swipe actions, which is why we use mouse events in-between taps test.describe('Mobile / Touch Behavior', () => { + test.use({ viewport: { width: 414, height: 896 }, isMobile: true, hasTouch: true }); + + test(`GIVEN a mobile carousel + WHEN it is rendered + THEN it should use CSS scroll snap for swiping`, async ({ page }) => { + await setup(page, 'hero'); + + // is css scroll snapping enabled + const isCoarsePointer = await page.evaluate( + () => matchMedia('(pointer: coarse)').matches, + ); + expect(isCoarsePointer).toBe(true); + }); + test(`GIVEN a carousel with dragging enabled WHEN swiping to the left - THEN it should move to the next slide -`, async ({ page }) => { + THEN it should move to the next slide`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + const boundingBox = await d.getSlideBoundingBoxAt(0); - // TODO + const startX = boundingBox.x + boundingBox.width * 0.8; // near right edge + const endX = boundingBox.x + boundingBox.width * 0.2; // near left edge + const y = boundingBox.y + boundingBox.height / 2; // swipe height + + // perform the swipe action + await page.touchscreen.tap(startX, y); + await page.mouse.move(startX, y, { steps: 10 }); + await page.mouse.move(endX, y, { steps: 10 }); + await page.touchscreen.tap(endX, y); + + // second slide should be active + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + await expect(d.getPrevButton()).toBeEnabled(); }); test(`GIVEN a carousel with dragging enabled WHEN swiping to the right - THEN it should move to the previous slide -`, async ({ page }) => { + THEN it should move to the previous slide`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + // initial setup + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await d.getNextButton().tap(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + const boundingBox = await d.getSlideBoundingBoxAt(0); + + const startX = boundingBox.x + boundingBox.width * 0.2; // near left edge + const endX = boundingBox.x + boundingBox.width * 0.8; // near right edge + const y = boundingBox.y + boundingBox.height / 2; // swipe height + + await page.touchscreen.tap(startX, y); + await page.mouse.move(startX, y, { steps: 10 }); + await page.mouse.move(endX, y, { steps: 10 }); + await page.touchscreen.tap(endX, y); - // TODO + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await expect(d.getPrevButton()).toBeDisabled(); + }); + + test(`GIVEN a carousel with dragging enabled + WHEN tapping on the next button + THEN it should move to the next slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await d.getNextButton().tap(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + }); + + test(`GIVEN a carousel with dragging enabled + WHEN tapping on the previous button + THEN it should move to the previous slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await d.getNextButton().tap(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + await d.getPrevButton().tap(); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); }); test(`GIVEN a carousel with a pagination control WHEN tapping on the pagination bullets - THEN it should move to the corresponding slide -`, async ({ page }) => { + THEN it should move to the corresponding slide`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - // TODO + await d.getPaginationBullet(3).tap(); + await expect(d.getSlideAt(3)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(0)).not.toHaveAttribute('data-active'); }); - test(`GIVEN a carousel with dragging enabled - WHEN on the first slide and is mobile swiped far left - THEN it should stay snapped on the last slide -`, async ({ page }) => { + test(`GIVEN a mobile carousel + WHEN swiping to the next slide + THEN the next slide should snap to the left side of the scroller`, async ({ + page, + }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + const boundingBox = await d.getSlideBoundingBoxAt(0); + + const startX = boundingBox.x + boundingBox.width * 0.8; + const endX = boundingBox.x + boundingBox.width * 0.2; + const y = boundingBox.y + boundingBox.height / 2; + + await page.touchscreen.tap(startX, y); + await page.mouse.move(startX, y, { steps: 10 }); + await page.mouse.move(endX, y, { steps: 10 }); + await page.touchscreen.tap(endX, y); - // TODO + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + const scrollerBox = await d.getScrollerBoundingBox(); + const secondSlideBox = await d.getSlideBoundingBoxAt(1); + + expect(Math.abs(secondSlideBox.x - scrollerBox.x)).toBeLessThan(1); // Allow 1px tolerance }); - test(`GIVEN a carousel with dragging enabled - WHEN on the last slide and is mobile swiped far right - THEN it should stay snapped on the first slide -`, async ({ page }) => { + test(`GIVEN a mobile carousel + WHEN tapping the next button + THEN the next slide should snap to the left side of the scroller`, async ({ + page, + }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await d.getNextButton().tap(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + const scrollerBox = await d.getScrollerBoundingBox(); + const secondSlideBox = await d.getSlideBoundingBoxAt(1); + + const gap = await page.evaluate(() => { + const scroller = document.querySelector('[data-qui-carousel-scroller]'); + return parseInt(window.getComputedStyle(scroller!).getPropertyValue('gap')); + }); + + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + const slideWidth = secondSlideBox.width; + + const actualDifference = Math.abs(secondSlideBox.x - scrollerBox.x); - // TODO + // within range (e.g., ±20 pixels) + expect(Math.abs(actualDifference - slideWidth)).toBeLessThanOrEqual(20); }); }); @@ -277,8 +486,7 @@ test.describe('Accessibility', () => { test(`GIVEN a carousel WHEN it is rendered - THEN it should have an accessible name -`, async ({ page }) => { + THEN it should have an accessible name`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); // remove this (there so that TS doesn't complain) @@ -290,227 +498,419 @@ test.describe('Accessibility', () => { test(`GIVEN a carousel with a title WHEN it is rendered - THEN the carousel container should have the role of group - AND the title should be the accessible name`, async ({ page }) => { + THEN the title should be the accessible name`, async ({ page }) => { const { driver: d } = await setup(page, 'title'); await expect(d.getRoot()).toBeVisible(); - await expect(d.getRoot()).toHaveAttribute('aria-labelledby', 'Favorite Colors'); + await expect(d.getRoot()).toHaveAttribute('aria-labelledby'); }); test(`GIVEN a carousel WHEN it is rendered - THEN the carousel container should have the role of group -`, async ({ page }) => { + THEN the carousel container should have the role of group`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; - - // TODO + await expect(d.getRoot()).toBeVisible(); + await expect(d.getRoot()).toHaveRole('group'); }); test(`GIVEN a carousel WHEN it is rendered - THEN the items should have a posinset of its current index -`, async ({ page }) => { + THEN the slide should have the accessible as its index out of the total slides`, async ({ + page, + }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getRoot()).toBeVisible(); - // TODO + await expect(d.getSlideAt(1)).toHaveAccessibleName('2 of 7'); + await expect(d.getSlideAt(2)).toHaveAccessibleName('3 of 7'); }); test(`GIVEN a carousel with a pagination control WHEN it is rendered - THEN the parent of the slide tabs should have the role of tablist -`, async ({ page }) => { + THEN the parent of the slide tabs should have the role of tablist`, async ({ + page, + }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; - - // TODO + // Verify the parent element has the role of 'tablist' + await expect(d.getSlideTabsParent()).toHaveRole('tablist'); }); test(`GIVEN a carousel with a pagination control WHEN it is rendered - THEN each bullet should have the role of tab -`, async ({ page }) => { + THEN each bullet should have the role of tab`, async ({ page }) => { const { driver: d } = await setup(page, 'pagination'); - // remove this (there so that TS doesn't complain) - d; + const bulletCount = await d.getTotalSlides(); - // TODO + // Verify each bullet has the role of 'tab' + for (let i = 0; i < bulletCount; i++) { + const bullet = await d.getPaginationBullet(i); + await expect(bullet).toHaveRole('tab'); + } }); - // it should also have aria-live polite and announce the current slide - test(`GIVEN a carousel WHEN a slide is not the current slide - THEN it should be inert -`, async ({ page }) => { + THEN it should be inert`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(1)).toHaveAttribute('inert'); - // remove this (there so that TS doesn't complain) - d; + await d.getNextButton().click(); - // TODO + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(0)).toHaveAttribute('inert'); }); - test(`GIVEN a carousel - WHEN on the current slide - THEN items inside the slide should be the only focusable items -`, async ({ page }) => { + test(`GIVEN a carousel stepper + WHEN it is rendered + THEN the current slide's step should have aria-current="step"`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'stepper'); + await expect(d.getStepAt(0)).toHaveAttribute('aria-current', 'step'); + }); + + test(`GIVEN a carousel stepper + WHEN it is rendered + THEN the stepper parent should have role="navigation"`, async ({ page }) => { + const { driver: d } = await setup(page, 'stepper'); + await expect(d.getStepperParent()).toHaveRole('navigation'); + await expect(d.getStepperParent()).toBeVisible(); + }); +}); + +test.describe('Looping', () => { + test(`GIVEN a carousel with loop disabled + WHEN navigating via keyboard to the last slide + THEN the previous button should be focused after 2 seconds`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + const totalSlides = await d.getTotalSlides(); + + for (let i = 0; i < totalSlides - 1; i++) { + await d.getNextButton().press('Enter'); + } + + await expect(d.getSlideAt(totalSlides - 1)).toHaveAttribute('data-active'); + + // if focus doesn't change in 2 seconds in next impl, then it focuses prev + await page.waitForTimeout(2000); + await expect(d.getPrevButton()).toBeFocused(); + }); + + test(`GIVEN a carousel with loop disabled + WHEN navigating via keyboard to the first slide + THEN the next button should be focused after 2 seconds`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + await d.getNextButton().press('Enter'); + await d.getPrevButton().press('Enter'); - // TODO + await page.waitForTimeout(2000); + await expect(d.getNextButton()).toBeFocused(); }); test(`GIVEN a carousel with loop disabled WHEN on the last slide - THEN the previous button should be focused -`, async ({ page }) => { + THEN the next button should be disabled`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + const totalSlides = await d.getTotalSlides(); - // TODO + for (let i = 0; i < totalSlides - 1; i++) { + await d.getNextButton().click(); + } + + await expect(d.getNextButton()).toBeDisabled(); }); test(`GIVEN a carousel with loop disabled WHEN on the first slide - THEN the next button should be focused -`, async ({ page }) => { + THEN the previous button should be disabled`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await expect(d.getPrevButton()).toHaveAttribute('disabled'); // + }); + + test(`GIVEN a carousel with loop enabled + WHEN on the last slide and the next button is clicked + THEN it should move to the first slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'loop'); + + const totalSlides = await d.getTotalSlides(); + for (let i = 0; i < totalSlides - 1; i++) { + await d.getNextButton().click(); + } + + const lastSlide = d.getSlideAt(totalSlides - 1); + + await expect(lastSlide).toHaveAttribute('data-active'); + + await expect(d.getNextButton()).toBeVisible(); + await expect(d.getNextButton()).toBeEnabled(); + await d.getNextButton().click(); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + }); - // TODO + test(`GIVEN a carousel with loop enabled + WHEN on the first slide and the previous button is clicked + THEN it should move to the last slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'loop'); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await d.getPrevButton().click(); + + const totalSlides = await d.getTotalSlides(); + await expect(d.getSlideAt(totalSlides - 1)).toHaveAttribute('data-active'); }); }); -test.describe('Props', () => { - test.describe('loop', () => { - test(`GIVEN a carousel with loop disabled - WHEN on the last slide - THEN the next button should be disabled -`, async ({ page }) => { - const { driver: d } = await setup(page, 'hero'); +test.describe('Multiple slides', () => { + test(`GIVEN a carousel with multiple slides per view set to 3 + WHEN the carousel is rendered + THEN 3 slides should be visible at a time`, async ({ page }) => { + const { driver: d } = await setup(page, 'multiple-slides'); + await expect(d.getRoot()).toBeVisible(); + await expect(d.getSlideAt(0)).toBeVisible(); + await expect(d.getSlideAt(1)).toBeVisible(); + await expect(d.getSlideAt(2)).toBeVisible(); + }); - // remove this (there so that TS doesn't complain) - d; + test(`GIVEN a carousel with multiple slides per view set to 3 + WHEN the carousel is rendered + THEN the first 3 slides should be interactive`, async ({ page }) => { + const { driver: d } = await setup(page, 'multiple-slides'); + await expect(d.getRoot()).toBeVisible(); + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(2)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(3)).not.toHaveAttribute('data-active'); + }); - // TODO - }); + test(`GIVEN a carousel with multiple slides per view set to 3 + WHEN the next button is clicked + THEN the slides 2, 3, 4 should be interactive`, async ({ page }) => { + const { driver: d } = await setup(page, 'multiple-slides'); + await expect(d.getRoot()).toBeVisible(); + await d.getNextButton().click(); + await expect(d.getSlideAt(0)).not.toHaveAttribute('data-active'); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(2)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(3)).toHaveAttribute('data-active'); + }); - test(`GIVEN a carousel with loop disabled - WHEN on the first slide - THEN the previous button should be disabled -`, async ({ page }) => { - const { driver: d } = await setup(page, 'hero'); + test(`GIVEN a carousel with multiple slides per view set to 3 + WHEN the carousel is rendered + THEN slide 4 should not be interactive`, async ({ page }) => { + const { driver: d } = await setup(page, 'multiple-slides'); + await expect(d.getRoot()).toBeVisible(); + await expect(d.getSlideAt(0)).not.toHaveAttribute('inert'); + await expect(d.getSlideAt(3)).toHaveAttribute('inert'); + }); +}); - // remove this (there so that TS doesn't complain) - d; +test.describe('CSR', () => { + test(`GIVEN a button that conditionally renders a carousel + WHEN the button is clicked + THEN the carousel should be visible`, async ({ page }) => { + const { driver: d } = await setup(page, 'csr'); + await expect(d.getRoot()).not.toBeVisible(); + await expect(d.getNextButton()).not.toBeVisible(); + await expect(d.getPrevButton()).not.toBeVisible(); + await expect(d.getSlideAt(0)).not.toBeVisible(); - // TODO - }); + await page.getByRole('button').click(); - test(`GIVEN a carousel with loop enabled - WHEN on the last slide and the next button is clicked - THEN it should move to the first slide -`, async ({ page }) => { - // JACK HASNT DONE THIS YET - const { driver: d } = await setup(page, 'loop'); + await expect(d.getRoot()).toBeVisible(); + await expect(d.getNextButton()).toBeVisible(); + await expect(d.getPrevButton()).toBeVisible(); + await expect(d.getSlideAt(0)).toBeVisible(); + }); - // remove this (there so that TS doesn't complain) - d; + test(`GIVEN a button that conditionally renders a carousel + WHEN the button is clicked + THEN the carousel should be interactive`, async ({ page }) => { + const { driver: d } = await setup(page, 'csr'); + await expect(d.getRoot()).not.toBeVisible(); - // TODO - }); + await page.getByRole('button').click(); + + await expect(d.getNextButton()).toBeVisible(); + await expect(d.getSlideAt(1)).toBeVisible(); + }); - test(`GIVEN a carousel with loop enabled - WHEN on the first slide and the previous button is clicked - THEN it should move to the first slide -`, async ({ page }) => { - const { driver: d } = await setup(page, 'loop'); + test(`GIVEN a button that conditionally renders a carousel + WHEN the button is clicked and the carousel is dragged to the left + THEN it should move to the next slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'csr'); - // remove this (there so that TS doesn't complain) - d; + await page.getByRole('button').click(); - // TODO - }); + await expect(d.getNextButton()).toBeVisible(); + await expect(d.getSlideAt(1)).toBeVisible(); + + // Ensure the first slide is active + const firstSlide = d.getSlideAt(0); + await expect(firstSlide).toHaveAttribute('data-active'); + + // grab first slide dimensions + const boundingBox = await d.getSlideBoundingBoxAt(0); + + const startX = boundingBox.x + boundingBox.width * 0.8; // near right edge + const endX = boundingBox.x + boundingBox.width * 0.2; // near left edge + const y = boundingBox.y + boundingBox.height / 2; // swipe height + + // perform the drag action + await firstSlide.hover({ position: { x: 5, y: 5 } }); + await page.mouse.move(startX, y); + await page.mouse.down(); + await page.mouse.move(endX, y, { steps: 10 }); + await page.mouse.up(); + + // second slide should be active + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); }); +}); - test(`GIVEN a carousel with a prop changing its initial index - WHEN rendered - THEN its scroll position should be at the initial index slide -`, async ({ page }) => { +test.describe('Autoplay', () => { + test(`GIVEN a carousel + WHEN the autoplay trigger is clicked + THEN it should automatically move to the next slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'player'); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await d.getPlayer().click(); + + await page.waitForTimeout(3500); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + await page.waitForTimeout(3500); + await expect(d.getSlideAt(2)).toHaveAttribute('data-active'); + }); + + test(`GIVEN a carousel that has autoplay enabled when visible + WHEN the component is visible + THEN it should automatically move to the next slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-player-visible'); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await expect(d.getRoot()).toBeVisible(); + + await page.waitForTimeout(3500); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + await page.waitForTimeout(3500); + await expect(d.getSlideAt(2)).toHaveAttribute('data-active'); + }); +}); + +test.describe('State', () => { + test(`GIVEN a carousel that has a start Index + WHEN the component is rendered + THEN that start index should be active + AND visible`, async ({ page }) => { const { driver: d } = await setup(page, 'initial'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getSlideAt(4)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(4)).toBeVisible(); + }); + + test(`GIVEN a carousel that can be reactively changed + WHEN the index is changed to 4 + THEN it should scroll to the fourth slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'reactive'); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + + await page.locator('button', { hasText: 'Change to index 4' }).click(); - // TODO + await expect(d.getSlideAt(4)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(4)).toBeVisible(); }); - test.describe('reactive', () => { - test(`GIVEN a carousel with a bind prop - WHEN rendered - THEN the selected slide should be at the initial index slide -`, async ({ page }) => { - const { driver: d } = await setup(page, 'reactive'); + test(`GIVEN a carousel that can be reactively changed + WHEN the index is changed to 4, to a new slide, and back + THEN it should update back to the fourth slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'reactive'); - // remove this (there so that TS doesn't complain) - d; + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - // TODO - }); + await page.locator('button', { hasText: 'Change to index 4' }).click(); - test(`GIVEN a carousel with a bind prop - WHEN the signal passed to bind changes - THEN the selected slide should be at the new signal value -`, async ({ page }) => { - const { driver: d } = await setup(page, 'reactive'); + await expect(d.getSlideAt(4)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(4)).toBeVisible(); - // remove this (there so that TS doesn't complain) - d; + await d.getNextButton().click(); + await expect(d.getSlideAt(5)).toHaveAttribute('data-active'); - // TODO - }); + await page.locator('button', { hasText: 'Change to index 4' }).click(); + + await expect(d.getSlideAt(4)).toHaveAttribute('data-active'); + }); + + test(`GIVEN a carousel with a progress bar + WHEN the next button is clicked + THEN it should affect the progress bar`, async ({ page }) => { + const { driver: d } = await setup(page, 'progress'); + const progressBar = page.getByRole('progressbar'); + await expect(progressBar).toBeVisible(); + await expect(progressBar).toHaveAttribute('aria-valuetext', '0%'); + + await d.getNextButton().click(); + + await expect(progressBar).toHaveAttribute('aria-valuetext', '17%'); }); }); -// TODO: finish test cases, create new ones based on the expected behavior in Figma. - -// Getting a failing test when the test is expected to work helps us find bugs. - -// https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ <-- another good resource for what functionality is expected - -/** - * - * When there is a use case that the default hero.tsx example doesn't cover, add a new test file in the docs headless/carousel/examples folder. - * - * - */ - -/** - * Future possible tests: - * Autoplay - * - * Snapping between center and end of slides - * - * Non-scroller or "conditional" carousels - * - * Multiple slides per view (2-n slides at a time) - * - * Multiple slider per move (+n slides per navigation) - * - */ +test.describe('Stepper', () => { + test(`GIVEN a carousel stepper + WHEN it is rendered + THEN the first step should be the current one`, async ({ page }) => { + const { driver: d } = await setup(page, 'stepper'); + await expect(d.getStepAt(0)).toHaveAttribute('data-current'); + await expect(d.getStepAt(1)).not.toHaveAttribute('data-current'); + }); + + test(`GIVEN a carousel stepper + WHEN clicking on the second step + THEN the second step should be the current one`, async ({ page }) => { + const { driver: d } = await setup(page, 'stepper'); + await expect(d.getStepAt(0)).toHaveAttribute('data-current'); + + await d.getStepAt(1).click(); + await expect(d.getStepAt(1)).toHaveAttribute('data-current'); + }); + + test(`GIVEN a carousel stepper + WHEN clicking on the second step + THEN it should move to the second slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'stepper'); + await expect(d.getStepAt(0)).toHaveAttribute('data-current'); + + await d.getStepAt(1).click(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + }); + + test(`GIVEN a carousel stepper that isn't interactive + WHEN the as prop is a div + THEN it should be a div and not be interactive`, async ({ page }) => { + const { driver: d } = await setup(page, 'stepper-presentational'); + + const firstStep = d.getStepAt(0); + let tagName; + + const isDiv = await firstStep.evaluate((el) => { + el.tagName === 'DIV'; + tagName = el.tagName; + }); + + expect(isDiv).toBe(tagName); + await expect(firstStep).not.toHaveAttribute('role', 'button'); + await expect(firstStep).not.toHaveAttribute('tabindex', '0'); + }); +}); diff --git a/packages/kit-headless/src/components/carousel/context.ts b/packages/kit-headless/src/components/carousel/context.ts index e6b1d8589..cb47ad33d 100644 --- a/packages/kit-headless/src/components/carousel/context.ts +++ b/packages/kit-headless/src/components/carousel/context.ts @@ -1,10 +1,8 @@ -import { createContextId } from '@builder.io/qwik'; +import { createContextId, type Signal } from '@builder.io/qwik'; -export const carouselContextId = createContextId('carousel-context'); +export const carouselContextId = createContextId('qui-carousel-context'); -import { type Signal } from '@builder.io/qwik'; - -export interface CarouselContext { +export type CarouselContext = { // core state localId: string; scrollerRef: Signal; @@ -26,5 +24,6 @@ export interface CarouselContext { alignSig: Signal<'start' | 'center' | 'end'>; isLoopSig: Signal; autoPlayIntervalMsSig: Signal; - initialIndex: number | undefined; -} + startIndex: number | undefined; + isStepInteractionSig: Signal; +}; diff --git a/packages/kit-headless/src/components/carousel/driver.ts b/packages/kit-headless/src/components/carousel/driver.ts index 182557f07..8d572a7a9 100644 --- a/packages/kit-headless/src/components/carousel/driver.ts +++ b/packages/kit-headless/src/components/carousel/driver.ts @@ -10,29 +10,70 @@ export function createTestDriver(rootLocator: T) { return getRoot().locator('[data-qui-carousel-next]'); }; + const getPaginationBullet = (index: number) => { + return getRoot().locator(`[tabindex]`).nth(index); + }; + + const getTotalSlides = () => { + return getRoot().locator(`[data-qui-carousel-slide]`).count(); + }; + + const getSlideTitleId = () => { + return getRoot().locator('[id]'); + }; + const getPrevButton = () => { return getRoot().locator('[data-qui-carousel-prev]'); }; - const getContainer = () => { + const getSlideTabsParent = () => { + // return getRoot().locator(`:nth-child(${0 + 1})`).nth(1);; + return getRoot().getByRole('tablist'); + }; + + const getScroller = () => { return getRoot().locator('[data-qui-carousel-scroller]'); }; + const getItems = () => { + return getRoot().locator(`[role]`); + }; + const getSlideAt = (index: number) => { - return getContainer().locator(`[data-qui-carousel-slide]`).nth(index); + return getScroller().locator(`[data-qui-carousel-slide]`).nth(index); + }; + + const getStepAt = (index: number) => { + return getRoot().locator(`[data-qui-carousel-step]`).nth(index); }; - /** - * Wait for all animations within the given element and subtrees to finish - * See: https://github.com/microsoft/playwright/issues/15660#issuecomment-1184911658 - */ - function waitForAnimationEnd(selector: string) { - return getRoot() - .locator(selector) - .evaluate((element) => - Promise.all(element.getAnimations().map((animation) => animation.finished)), - ); - } + const getStepperParent = () => { + return getRoot().getByRole('navigation'); + }; + + const getSlideBoundingBoxAt = async (index: number) => { + const boundingBox = await getSlideAt(index).boundingBox(); + + if (!boundingBox) { + throw new Error('Could not determine the bounding box of the slide'); + } + + return boundingBox; + }; + + const getScrollerBoundingBox = async () => { + const boundingBox = await getScroller().boundingBox(); + + if (!boundingBox) { + throw new Error('Could not determine the bounding box of the scroller'); + } + + return boundingBox; + }; + + const getPlayer = () => { + return getRoot().locator('[data-qui-carousel-player]'); + }; return { ...rootLocator, @@ -40,8 +81,17 @@ export function createTestDriver(rootLocator: T) { getRoot, getNextButton, getPrevButton, - getContainer, + getScroller, getSlideAt, - waitForAnimationEnd, + getSlideBoundingBoxAt, + getPaginationBullet, + getTotalSlides, + getSlideTitleId, + getSlideTabsParent, + getItems, + getScrollerBoundingBox, + getPlayer, + getStepAt, + getStepperParent, }; } diff --git a/packages/kit-headless/src/components/carousel/index.ts b/packages/kit-headless/src/components/carousel/index.ts index e2b6ea364..15866aae9 100644 --- a/packages/kit-headless/src/components/carousel/index.ts +++ b/packages/kit-headless/src/components/carousel/index.ts @@ -7,3 +7,5 @@ export { CarouselPagination as Pagination } from './pagination'; export { CarouselBullet as Bullet } from './bullet'; export { CarouselTitle as Title } from './title'; export { CarouselPlayer as Player } from './player'; +export { CarouselStepper as Stepper } from './stepper'; +export { CarouselStep as Step } from './step'; diff --git a/packages/kit-headless/src/components/carousel/inline.tsx b/packages/kit-headless/src/components/carousel/inline.tsx index 3e9dd9959..80a804380 100644 --- a/packages/kit-headless/src/components/carousel/inline.tsx +++ b/packages/kit-headless/src/components/carousel/inline.tsx @@ -16,6 +16,7 @@ type InternalProps = { slideComponent?: typeof Carousel.Slide; bulletComponent?: typeof Carousel.Bullet; + stepComponent?: typeof Carousel.Step; titleComponent?: typeof Carousel.Title; }; @@ -28,14 +29,17 @@ export const CarouselRoot: Component = ( carouselBulletComponent: GivenBulletOld, slideComponent: GivenSlide, bulletComponent: GivenBullet, + stepComponent: GivenStep, titleComponent: GivenTitle, ...rest } = props; const Slide = GivenSlide || GivenSlideOld || Carousel.Slide; const Bullet = GivenBullet || GivenBulletOld || Carousel.Bullet; + const Step = GivenStep || Carousel.Step; const Title = GivenTitle || Carousel.Title; let currSlideIndex = 0; let currBulletIndex = 0; + let currStepIndex = 0; let numSlides = 0; let isTitle = false; @@ -53,6 +57,12 @@ export const CarouselRoot: Component = ( currBulletIndex++; }); + findComponent(Step, (stepProps) => { + stepProps._index = currStepIndex; + + currStepIndex++; + }); + findComponent(Title, () => { isTitle = true; }); diff --git a/packages/kit-headless/src/components/carousel/next.tsx b/packages/kit-headless/src/components/carousel/next.tsx index 87b39d6e1..f75df2bc5 100644 --- a/packages/kit-headless/src/components/carousel/next.tsx +++ b/packages/kit-headless/src/components/carousel/next.tsx @@ -68,7 +68,7 @@ export const CarouselNext = component$((props: PropsOf<'button'>) => { + {isItemsRenderedSig.value && ( +
+ + {items.map((item, index) => ( + + {item} + + ))} + + You selected: {valueSelected.value} + +
+ )} + + ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-multiple.tsx new file mode 100644 index 000000000..3f0b18740 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-multiple.tsx @@ -0,0 +1,32 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; +import { ToggleGroup } from '@qwik-ui/headless'; +import { useSignal } from '@builder.io/qwik'; + +export default component$(() => { + useStyles$(styles); + const items = ['left', 'center', 'right']; + const isItemsRenderedSig = useSignal(false); + + return ( +
+ + {isItemsRenderedSig.value && ( + + {items.map((item, index) => ( + + {item} + + ))} + + )} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single-bind-center.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single-bind-center.tsx new file mode 100644 index 000000000..c70b59f3b --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single-bind-center.tsx @@ -0,0 +1,42 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; +import { ToggleGroup } from '@qwik-ui/headless'; +import { useSignal } from '@builder.io/qwik'; + +export default component$(() => { + useStyles$(styles); + const items = ['left', 'center', 'right']; + const isItemsRenderedSig = useSignal(false); + const valueSelected = useSignal('center'); + + return ( +
+ + {isItemsRenderedSig.value && ( +
+ + {items.map((item, index) => ( + + {item} + + ))} + + You selected: {valueSelected.value} + +
+ )} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single-bind.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single-bind.tsx new file mode 100644 index 000000000..8aa21aabf --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single-bind.tsx @@ -0,0 +1,42 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; +import { ToggleGroup } from '@qwik-ui/headless'; +import { useSignal } from '@builder.io/qwik'; + +export default component$(() => { + useStyles$(styles); + const items = ['left', 'center', 'right']; + const isItemsRenderedSig = useSignal(false); + const valueSelected = useSignal('left'); + + return ( +
+ + {isItemsRenderedSig.value && ( +
+ + {items.map((item, index) => ( + + {item} + + ))} + + You selected: {valueSelected.value} + +
+ )} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single.tsx new file mode 100644 index 000000000..9b54bcf95 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single.tsx @@ -0,0 +1,32 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; +import { ToggleGroup } from '@qwik-ui/headless'; +import { useSignal } from '@builder.io/qwik'; + +export default component$(() => { + useStyles$(styles); + const items = ['left', 'center', 'right']; + const isItemsRenderedSig = useSignal(false); + + return ( +
+ + {isItemsRenderedSig.value && ( + + {items.map((item, index) => ( + + {item} + + ))} + + )} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-multiple.tsx new file mode 100644 index 000000000..d4c77df79 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-multiple.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-value-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-value-multiple.tsx new file mode 100644 index 000000000..1dfad8a4c --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-value-multiple.tsx @@ -0,0 +1,31 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + const valueSelected = useSignal(['left', 'center']); + useStyles$(styles); + + return ( +
+ (valueSelected.value = v)} + disabled + > + + Left + + + Center + + + Right + + + You selected: {valueSelected.value.join(',')} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-value.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-value.tsx new file mode 100644 index 000000000..99dd91206 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-value.tsx @@ -0,0 +1,33 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + const valueSelected = useSignal('left'); + + useStyles$(styles); + + return ( +
+ { + valueSelected.value = v; + }} + disabled + > + + Left + + + Center + + + Right + + + You selected: {valueSelected.value} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-multiple-center-pressed.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-multiple-center-pressed.tsx new file mode 100644 index 000000000..0eae5dbac --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-multiple-center-pressed.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+
OutsideRoot Top
+
+ + + Left + + + Center + + + Right + + +
+ +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-multiple.tsx new file mode 100644 index 000000000..50d9602bc --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-multiple.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+
OutsideRoot Top
+
+ + + Left + + + Center + + + Right + + +
+ +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-single-center-pressed.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-single-center-pressed.tsx new file mode 100644 index 000000000..e7931b542 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-single-center-pressed.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+
OutsideRoot Top
+
+ + + Left + + + Center + + + Right + + +
+ +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-single.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-single.tsx new file mode 100644 index 000000000..2817070a7 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-focus-single.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+
OutsideRoot Top
+
+ + + Left + + + Center + + + Right + + +
+ +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-initialValue-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-initialValue-multiple.tsx new file mode 100644 index 000000000..bec622d8d --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-initialValue-multiple.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-item-disabled-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-item-disabled-multiple.tsx new file mode 100644 index 000000000..8ff0a990f --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-item-disabled-multiple.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-item-disabled.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-item-disabled.tsx new file mode 100644 index 000000000..4ecd8017f --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-item-disabled.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-horizontal-rtl.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-horizontal-rtl.tsx new file mode 100644 index 000000000..661db3c40 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-horizontal-rtl.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-vertical-rtl.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-vertical-rtl.tsx new file mode 100644 index 000000000..9dac46021 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-vertical-rtl.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-vertical.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-vertical.tsx new file mode 100644 index 000000000..a851747de --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-loop-vertical.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-bind-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-bind-multiple.tsx new file mode 100644 index 000000000..efb794c50 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-bind-multiple.tsx @@ -0,0 +1,27 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + const valueSelected = useSignal(['left', 'center']); + + useStyles$(styles); + + return ( +
+ + + Left + + + Center + + + Right + + + You selected: {valueSelected.value} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-bind.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-bind.tsx new file mode 100644 index 000000000..8c87fdb23 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-bind.tsx @@ -0,0 +1,27 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + const valueSelected = useSignal('left'); + + useStyles$(styles); + + return ( +
+ + + Left + + + Center + + + Right + + + You selected: {valueSelected.value} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-multiple.tsx new file mode 100644 index 000000000..303d8f66d --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-multiple.tsx @@ -0,0 +1,30 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + const valueSelected = useSignal(['left', 'center']); + useStyles$(styles); + + return ( +
+ (valueSelected.value = v)} + > + + Left + + + Center + + + Right + + + You selected: {valueSelected.value.join(',')} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-vertical-multiple-rtl.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-vertical-multiple-rtl.tsx new file mode 100644 index 000000000..a2ed5cb97 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-vertical-multiple-rtl.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/value-bind.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/value-bind.tsx new file mode 100644 index 000000000..1bf2ed8e1 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/value-bind.tsx @@ -0,0 +1,33 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + const valueSelected = useSignal('left'); + + useStyles$(styles); + + return ( +
+ + + Left + + + Center + + + Right + + + You selected: {valueSelected.value} + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/value.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/value.tsx new file mode 100644 index 000000000..2bfff00a3 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/value.tsx @@ -0,0 +1,32 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + const valueSelected = useSignal('left'); + + useStyles$(styles); + + return ( +
+ { + valueSelected.value = v; + }} + > + + Left + + + Center + + + Right + + + You selected: {valueSelected.value} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/vertical.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/vertical.tsx new file mode 100644 index 000000000..d3c9ec4f6 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/vertical.tsx @@ -0,0 +1,23 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import styles from '../snippets/toggle.css?inline'; + +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + + Left + + + Center + + + Right + + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/index.mdx b/apps/website/src/routes/docs/headless/toggle-group/index.mdx new file mode 100644 index 000000000..534249f46 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/index.mdx @@ -0,0 +1,213 @@ +--- +title: Qwik UI | Toggle Group +--- + +import { statusByComponent } from '~/_state/component-statuses'; + + + +# Toggle Group + +A set of two-state buttons that can be toggled on or off. + + + +## ✨ Features + + + +## Building blocks + + + +### 🎨 Anatomy + + + +## Usage / Component State + +### Multiple selection + +Pass a `multiple` prop to enable multi-selection. + + + +### Initial Value (Uncontrolled) + +An initial, uncontrolled value can be provided using the `value` prop. + + + +If you want to have some control when an item is selected, like making some side effect you can use +the `onChange$`. The event is fired when the user toggle the button, and receives the new value. + + + +### Reactive Value (Controlled) + +Pass a signal to `bind:value` prop to make the pressed state controlled (binding the value with a signal). + + + +### Disabled + +Pass the `disabled` prop. + + + +You can also disabled specific items, pass the `disabled` prop at the `ToggleGroup.Item` level: +When navigating with key arrows, the disabled item will be skipped. + + + +### Looping Enabled + +Pass the `loop` prop. When enabled, keyboard navigation will loop from last item to first, and vice versa. +If one item is disabled it will skip it. + + + +If one item is disabled it will skip it. + + + +### Vertical Orientation + +Pass the `orientation` prop. + + + +### Right-to-Left (rtl) Direction + +Pass the `direction` prop to `rtl`. + + + +## Accessibility + +### Keyboard interaction + + + +## API + +### ToggleGroup.Root + + void>', + description: 'Called when the state changes.', + }, + { + name: 'bind:value', + type: 'Signal', + description: 'Reactive value (signal) to make the pressed state controlled.', + }, + { + name: 'disabled', + type: 'boolean', + description: 'Disables all items.', + }, + { + name: 'loop', + type: 'boolean', + description: + 'Enable looping when navigating with the keyboard. Default to `false`.', + }, + { + name: 'orientation', + type: '"horizontal" | "vertical"', + description: 'Choose the orientation of the toggle items. Default to "horizontal".', + }, + { + name: 'direction', + type: '"ltr" | "rtl"', + description: 'Choose the direction of the toggle items. Default to "ltr".', + }, + ]} +/> + +### ToggleGroup.Item + + diff --git a/apps/website/src/routes/docs/headless/toggle-group/snippets/building-blocks.tsx b/apps/website/src/routes/docs/headless/toggle-group/snippets/building-blocks.tsx new file mode 100644 index 000000000..0f62459ab --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/snippets/building-blocks.tsx @@ -0,0 +1,18 @@ +import { component$ } from '@builder.io/qwik'; +import { ToggleGroup } from '@qwik-ui/headless'; + +export default component$(() => { + return ( + + + Left + + + Center + + + Right + + + ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle-group/snippets/toggle.css b/apps/website/src/routes/docs/headless/toggle-group/snippets/toggle.css new file mode 100644 index 000000000..9500c9dfb --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle-group/snippets/toggle.css @@ -0,0 +1,65 @@ +.toggle-container { + font-size: 15px; + font-weight: 500; + line-height: 35px; + color: hsl(var(--foreground)); + display: flex; + flex-direction: column; +} + +.toggle { + width: auto; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 10px; + height: 35px; + font-size: 15px; + line-height: 1; + background-color: hsl(var(--background)); + border: 2px dotted hsla(var(--primary) / 1); + border-radius: 0; +} + +/* Default background when aria-pressed is false */ +.toggle[aria-pressed='false'] { + background-color: hsl(var(--background)) !important; + color: hsl(var(--foreground)); +} +/* Ensure focus or active state does not override when aria-pressed is false */ +.toggle[aria-pressed='false']:focus, +.toggle[aria-pressed='false']:active { + background-color: hsl(var(--background)) !important; + color: hsl(var(--foreground)); +} + +.toggle:hover { + background-color: hsla(var(--primary) / 0.08); +} + +/* Focused and Pressed states */ +.toggle:focus-visible { + outline: 2px solid hsla(var(--primary)); + outline-offset: 2px; +} + +.toggle:focus, +.toggle:active { + background-color: hsla(var(--primary)); + color: white; +} + +/* When the toggle is pressed */ +.toggle[aria-pressed='true'] { + background-color: hsla(var(--primary)) !important; + color: white; +} + +.toggle[aria-pressed='true']:focus { + outline: 2px solid hsla(var(--secondary)); +} + +[data-disabled] { + opacity: 0.6; + background: hsl(var(--foreground) / 0.05); +} diff --git a/apps/website/src/routes/docs/headless/toggle/examples/bind-pressed.tsx b/apps/website/src/routes/docs/headless/toggle/examples/bind-pressed.tsx new file mode 100644 index 000000000..8d49106f3 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle/examples/bind-pressed.tsx @@ -0,0 +1,27 @@ +import { component$, useComputed$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Toggle } from '@qwik-ui/headless'; +import styles from '../snippets/toggle.css?inline'; + +export default component$(() => { + useStyles$(styles); + const pressedState = useSignal(true); + + const text = useComputed$(() => { + return pressedState.value ? 'You pressed me' : 'You unpressed me'; + }); + + return ( +
+ + Hello + + {text.value} + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle/examples/disabled.tsx b/apps/website/src/routes/docs/headless/toggle/examples/disabled.tsx new file mode 100644 index 000000000..a97560b91 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle/examples/disabled.tsx @@ -0,0 +1,14 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Toggle } from '@qwik-ui/headless'; +import styles from '../snippets/toggle.css?inline'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + Hello + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle/examples/hero.tsx b/apps/website/src/routes/docs/headless/toggle/examples/hero.tsx index ac3059fcc..c08d3df45 100644 --- a/apps/website/src/routes/docs/headless/toggle/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/toggle/examples/hero.tsx @@ -1,10 +1,12 @@ -import { $, component$ } from '@builder.io/qwik'; +import { component$, useStyles$ } from '@builder.io/qwik'; import { Toggle } from '@qwik-ui/headless'; +import styles from '../snippets/toggle.css?inline'; export default component$(() => { + useStyles$(styles); return ( - <> - console.log('Toggle'))} /> - +
+ Hello +
); }); diff --git a/apps/website/src/routes/docs/headless/toggle/examples/initialPressed.tsx b/apps/website/src/routes/docs/headless/toggle/examples/initialPressed.tsx new file mode 100644 index 000000000..062a747f2 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle/examples/initialPressed.tsx @@ -0,0 +1,14 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Toggle } from '@qwik-ui/headless'; +import styles from '../snippets/toggle.css?inline'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + Hello + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle/examples/pressed.tsx b/apps/website/src/routes/docs/headless/toggle/examples/pressed.tsx new file mode 100644 index 000000000..4a6976ea4 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle/examples/pressed.tsx @@ -0,0 +1,22 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Toggle } from '@qwik-ui/headless'; +import styles from '../snippets/toggle.css?inline'; + +export default component$(() => { + useStyles$(styles); + const text = useSignal('Unpress me'); + return ( +
+ + p ? (text.value = 'Unpress me') : (text.value = 'Press me') + } + class="toggle" + > + Hello + + {text.value} +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle/examples/test-bind-pressed.tsx b/apps/website/src/routes/docs/headless/toggle/examples/test-bind-pressed.tsx new file mode 100644 index 000000000..5045d581a --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle/examples/test-bind-pressed.tsx @@ -0,0 +1,28 @@ +import { component$, useComputed$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Toggle } from '@qwik-ui/headless'; +import styles from '../snippets/toggle.css?inline'; + +export default component$(() => { + useStyles$(styles); + const pressedState = useSignal(true); + + const text = useComputed$(() => { + return pressedState.value ? 'You pressed me' : 'You unpressed me'; + }); + + return ( +
+ + Hello + + {text.value} + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle/examples/test-disabled-pressed.tsx b/apps/website/src/routes/docs/headless/toggle/examples/test-disabled-pressed.tsx new file mode 100644 index 000000000..49d4c3b45 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle/examples/test-disabled-pressed.tsx @@ -0,0 +1,14 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Toggle } from '@qwik-ui/headless'; +import styles from '../snippets/toggle.css?inline'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + Hello + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle/examples/test-pressed-disabled.tsx b/apps/website/src/routes/docs/headless/toggle/examples/test-pressed-disabled.tsx new file mode 100644 index 000000000..819512528 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle/examples/test-pressed-disabled.tsx @@ -0,0 +1,14 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Toggle } from '@qwik-ui/headless'; +import styles from '../snippets/toggle.css?inline'; + +export default component$(() => { + useStyles$(styles); + return ( +
+ + Hello + +
+ ); +}); diff --git a/apps/website/src/routes/docs/headless/toggle/index.mdx b/apps/website/src/routes/docs/headless/toggle/index.mdx index ef32861ef..4c43d688f 100644 --- a/apps/website/src/routes/docs/headless/toggle/index.mdx +++ b/apps/website/src/routes/docs/headless/toggle/index.mdx @@ -8,17 +8,49 @@ import { statusByComponent } from '~/_state/component-statuses'; # Toggle -A toggle component is a primitive that us used to quickly switch between two possible states. +A two-state button that can be either on or off. +## ✨ Features + + + ## Building blocks -## Examples +## Usage / Component State + +### Initial Value (Uncontrolled) + +An initial, uncontrolled value can be provided using the `pressed` prop. + + + +If you want to have some control when the toggle is pressed, like making some side effect you can use +the `onPressedChange$`. The event is fired when the user toggle the button, and receives the new value. + + + +### Reactive Value (Controlled) + +Pass a signal to `bind:value` prop to make the pressed state controlled (binding the value with a signal). -### WIP + + +### Disabled + +Pass the `disabled` prop. + + ## Accessibility @@ -28,45 +60,40 @@ A toggle component is a primitive that us used to quickly switch between two pos keyDescriptors={[ { keyTitle: 'Space', - description: 'Toggle between states', + description: 'Toggles between states.', }, { - keyTitle: 'Tab', - description: 'Moves focus to the next focusable element.', - }, - { - keyTitle: 'Shift + Tab', - description: 'Moves focus to the previous focusable element.', + keyTitle: 'Enter', + description: 'Toggles between states.', }, ]} /> ## API -### Toggle - void>', + description: 'Called when the state changes.', }, { - name: 'onClick$', - info: 'PropFunction<() => void>', - type: 'function', - description: 'A custom click handler to wire to the toggle click event', + name: 'bind:pressed', + type: 'Signal', + description: 'Reactive value (signal) to make the pressed state controlled.', }, { name: 'disabled', type: 'boolean', - description: 'Sets whether the toggle is disabled or not', + description: 'Disables the toggle making the toggle unpressable.', }, ]} /> diff --git a/apps/website/src/routes/docs/headless/toggle/snippets/building-blocks.tsx b/apps/website/src/routes/docs/headless/toggle/snippets/building-blocks.tsx index be31c88c9..86aa2efc6 100644 --- a/apps/website/src/routes/docs/headless/toggle/snippets/building-blocks.tsx +++ b/apps/website/src/routes/docs/headless/toggle/snippets/building-blocks.tsx @@ -1,7 +1,6 @@ -import { component$, useSignal } from '@builder.io/qwik'; +import { component$ } from '@builder.io/qwik'; import { Toggle } from '@qwik-ui/headless'; export default component$(() => { - const toggleChecked = useSignal(false); - return ; + return Hello; }); diff --git a/apps/website/src/routes/docs/headless/toggle/snippets/toggle.css b/apps/website/src/routes/docs/headless/toggle/snippets/toggle.css new file mode 100644 index 000000000..90b375262 --- /dev/null +++ b/apps/website/src/routes/docs/headless/toggle/snippets/toggle.css @@ -0,0 +1,66 @@ +.toggle-container { + font-size: 15px; + font-weight: 500; + line-height: 35px; + color: hsl(var(--foreground)); + display: flex; + flex-direction: column; + align-items: center; +} + +.toggle { + width: auto; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 10px; + height: 35px; + font-size: 15px; + line-height: 1; + background-color: hsl(var(--background)); + border: 2px dotted hsla(var(--primary) / 1); + border-radius: 0; +} + +/* Default background when aria-pressed is false */ +.toggle[aria-pressed='false'] { + background-color: hsl(var(--background)) !important; + color: hsl(var(--foreground)); +} +/* Ensure focus or active state does not override when aria-pressed is false */ +.toggle[aria-pressed='false']:focus, +.toggle[aria-pressed='false']:active { + background-color: hsl(var(--background)) !important; + color: hsl(var(--foreground)); +} + +.toggle:hover { + background-color: hsla(var(--primary) / 0.08); +} + +/* Focused and Pressed states */ +.toggle:focus-visible { + outline: 2px solid hsla(var(--primary)); + outline-offset: 2px; +} + +.toggle:focus, +.toggle:active { + background-color: hsla(var(--primary)); + color: white; +} + +/* When the toggle is pressed */ +.toggle[aria-pressed='true'] { + background-color: hsla(var(--primary)) !important; + color: white; +} + +.toggle[aria-pressed='true']:focus { + outline: 2px solid hsla(var(--secondary)); +} + +[data-disabled] { + opacity: 0.6; + background: hsl(var(--foreground) / 0.05); +} diff --git a/apps/website/src/routes/docs/styled/menu.md b/apps/website/src/routes/docs/styled/menu.md index 260e7af50..c813c7584 100644 --- a/apps/website/src/routes/docs/styled/menu.md +++ b/apps/website/src/routes/docs/styled/menu.md @@ -35,3 +35,5 @@ - [Skeleton](/docs/styled/skeleton) - [Tabs](/docs/styled/tabs) - [Textarea](/docs/styled/textarea) +- [Toggle](/docs/styled/toggle) +- [ToggleGroup](/docs/styled/toggle-group) diff --git a/apps/website/src/routes/docs/styled/toggle-group/examples/disabled.tsx b/apps/website/src/routes/docs/styled/toggle-group/examples/disabled.tsx new file mode 100644 index 000000000..ae0a5b661 --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle-group/examples/disabled.tsx @@ -0,0 +1,18 @@ +import { component$ } from '@builder.io/qwik'; +import { ToggleGroup } from '~/components/ui'; + +export default component$(() => { + return ( + + + Left + + + Center + + + Right + + + ); +}); diff --git a/apps/website/src/routes/docs/styled/toggle-group/examples/hero.tsx b/apps/website/src/routes/docs/styled/toggle-group/examples/hero.tsx new file mode 100644 index 000000000..5f7a89437 --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle-group/examples/hero.tsx @@ -0,0 +1,18 @@ +import { component$ } from '@builder.io/qwik'; +import { ToggleGroup } from '~/components/ui'; + +export default component$(() => { + return ( + + + Left + + + Center + + + Right + + + ); +}); diff --git a/apps/website/src/routes/docs/styled/toggle-group/examples/multiple.tsx b/apps/website/src/routes/docs/styled/toggle-group/examples/multiple.tsx new file mode 100644 index 000000000..ba44dcaea --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle-group/examples/multiple.tsx @@ -0,0 +1,18 @@ +import { component$ } from '@builder.io/qwik'; +import { ToggleGroup } from '~/components/ui'; + +export default component$(() => { + return ( + + + Left + + + Center + + + Right + + + ); +}); diff --git a/apps/website/src/routes/docs/styled/toggle-group/index.mdx b/apps/website/src/routes/docs/styled/toggle-group/index.mdx new file mode 100644 index 000000000..7ee702d5c --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle-group/index.mdx @@ -0,0 +1,120 @@ +--- +title: Qwik UI | Styled Toggle Group Component +--- + +import { statusByComponent } from '~/_state/component-statuses'; + + + +# Toggle Group + +A set of two-state buttons that can be toggled on or off. + + + +You can choose a multiple selection variant: + + + +And here is the default look for a disabled `ToggleGroup.Root`: + + + + + To see all features and the API checkout our + + Headless component + + + +## Installation + +**Run the following cli command or copy/paste the component code into your project** + +```sh +qwik-ui add toggle-group +``` + +```tsx +import { + component$, + type PropsOf, + Slot, + useContext, + useContextProvider, +} from '@builder.io/qwik'; +import { cn } from '@qwik-ui/utils'; +import { ToggleGroup as HeadlessToggleGroup } from '@qwik-ui/headless'; + +import { toggleVariants } from '@qwik-ui/styled'; +import type { VariantProps } from 'class-variance-authority'; + +import { createContextId } from '@builder.io/qwik'; + +export const toggleGroupStyledContextId = createContextId( + 'qui-toggle-group-styled', +); + +export type ToggleGroupStyledContext = VariantProps; + +type ToggleGroupRootProps = PropsOf & + VariantProps; + +const Root = component$(({ size, look, ...props }) => { + const contextStyled: ToggleGroupStyledContext = { + size, + look, + }; + useContextProvider(toggleGroupStyledContextId, contextStyled); + + return ( + + + + ); +}); + +type ToggleGroupItemProps = PropsOf & + VariantProps; + +const Item = component$(({ ...props }) => { + const { size, look } = useContext(toggleGroupStyledContextId); + + return ( + + + + ); +}); + +export const ToggleGroup = { + Root, + Item, +}; +``` + +## Usage + +```tsx +import { ToggleGroup } from '~/components/ui'; +``` + +```tsx + + + Left + + + Center + + + Right + + +``` diff --git a/apps/website/src/routes/docs/styled/toggle/examples/bind-pressed.tsx b/apps/website/src/routes/docs/styled/toggle/examples/bind-pressed.tsx new file mode 100644 index 000000000..1f5aecfa7 --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle/examples/bind-pressed.tsx @@ -0,0 +1,26 @@ +import { component$, useComputed$, useSignal } from '@builder.io/qwik'; +import { Toggle } from '~/components/ui'; + +export default component$(() => { + const pressedState = useSignal(true); + + const text = useComputed$(() => { + return pressedState.value ? 'You pressed me' : 'You unpressed me'; + }); + + return ( +
+ + Hello + + + {text.value} + +
+ ); +}); diff --git a/apps/website/src/routes/docs/styled/toggle/examples/disabled.tsx b/apps/website/src/routes/docs/styled/toggle/examples/disabled.tsx new file mode 100644 index 000000000..025f0e29f --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle/examples/disabled.tsx @@ -0,0 +1,6 @@ +import { component$ } from '@builder.io/qwik'; +import { Toggle } from '~/components/ui'; + +export default component$(() => { + return Hello; +}); diff --git a/apps/website/src/routes/docs/styled/toggle/examples/hero.tsx b/apps/website/src/routes/docs/styled/toggle/examples/hero.tsx new file mode 100644 index 000000000..85ca8dfdf --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle/examples/hero.tsx @@ -0,0 +1,6 @@ +import { component$ } from '@builder.io/qwik'; +import { Toggle } from '~/components/ui'; + +export default component$(() => { + return Hello; +}); diff --git a/apps/website/src/routes/docs/styled/toggle/examples/initialPressed.tsx b/apps/website/src/routes/docs/styled/toggle/examples/initialPressed.tsx new file mode 100644 index 000000000..74d80ae04 --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle/examples/initialPressed.tsx @@ -0,0 +1,6 @@ +import { component$ } from '@builder.io/qwik'; +import { Toggle } from '~/components/ui'; + +export default component$(() => { + return Hello; +}); diff --git a/apps/website/src/routes/docs/styled/toggle/examples/pressed.tsx b/apps/website/src/routes/docs/styled/toggle/examples/pressed.tsx new file mode 100644 index 000000000..4ae94e401 --- /dev/null +++ b/apps/website/src/routes/docs/styled/toggle/examples/pressed.tsx @@ -0,0 +1,19 @@ +import { component$, useSignal } from '@builder.io/qwik'; +import { Toggle } from '~/components/ui'; + +export default component$(() => { + const text = useSignal('Unpress me'); + return ( +
+ + p ? (text.value = 'Unpress me') : (text.value = 'Press me') + } + > + Hello + + {text.value} +
+ ); +}); diff --git a/apps/website/src/routes/docs/styled/toggle/index.mdx b/apps/website/src/routes/docs/styled/toggle/index.mdx index 7e84a095b..1aeeeeb1f 100644 --- a/apps/website/src/routes/docs/styled/toggle/index.mdx +++ b/apps/website/src/routes/docs/styled/toggle/index.mdx @@ -4,8 +4,95 @@ title: Qwik UI | Styled Toggle Component import { statusByComponent } from '~/_state/component-statuses'; + + # Toggle +A two-state button that can be either on or off. + + + In a world of endless choices, sometimes you just need a simple yes or no. The Qwik UI Styled Toggle component is a welcomed rest for the mind. - +## Installation + +**Run the following cli command or copy/paste the component code into your project** + +```sh +qwik-ui add toggle +``` + +```tsx +import { component$, type PropsOf, Slot } from '@builder.io/qwik'; +import { cn } from '@qwik-ui/utils'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { Toggle as HeadlessToggle } from '@qwik-ui/headless'; + +export const toggleVariants = cva( + 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-[pressed=true]:bg-primary aria-[pressed=true]:text-accent-foreground', + { + variants: { + look: { + default: 'border border-input bg-transparent', + outline: + 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground', + }, + + size: { + default: 'h-10 px-3', + sm: 'h-9 px-2.5', + lg: 'h-11 px-5', + }, + }, + defaultVariants: { + look: 'default', + size: 'default', + }, + }, +); + +type ToggleProps = PropsOf & VariantProps; + +export const Toggle = component$(({ size, look, ...props }) => { + return ( + + + + ); +}); +``` + +## Usage + +```tsx +import { Toggle } from '~/components/ui'; +``` + +```tsx +Hello + +If you want to have some control when the toggle is pressed, like making some side effect you can use +the `onPressedChange$`. The event is fired when the user toggle the button, and receives the new value. + + + +### Reactive Value (Controlled) + +Pass a signal to `bind:value` prop to make the pressed state controlled (binding the value with a signal). + + + +### Disabled + +Pass the `disabled` prop. + + diff --git a/cla-signs/v1/cla.json b/cla-signs/v1/cla.json index 72d09f8e6..0b0d0abf4 100644 --- a/cla-signs/v1/cla.json +++ b/cla-signs/v1/cla.json @@ -569,4 +569,4 @@ "pullRequestNo": 957 } ] -} \ No newline at end of file +} diff --git a/packages/kit-headless/src/components/toggle-group/index.tsx b/packages/kit-headless/src/components/toggle-group/index.tsx new file mode 100644 index 000000000..fc5b18aa7 --- /dev/null +++ b/packages/kit-headless/src/components/toggle-group/index.tsx @@ -0,0 +1,6 @@ +import { HToggleGroupItem } from './toggle-group-item'; +import { HToggleGroupRoot } from './toggle-group-root'; +export const ToggleGroup = { + Root: HToggleGroupRoot, + Item: HToggleGroupItem, +}; diff --git a/packages/kit-headless/src/components/toggle-group/toggle-group-context.tsx b/packages/kit-headless/src/components/toggle-group/toggle-group-context.tsx new file mode 100644 index 000000000..776536bc0 --- /dev/null +++ b/packages/kit-headless/src/components/toggle-group/toggle-group-context.tsx @@ -0,0 +1,34 @@ +import type { QRL, Signal } from '@builder.io/qwik'; +import { createContextId } from '@builder.io/qwik'; + +export const toggleGroupRootApiContextId = createContextId( + 'qui-toggle-group-root-api', +); + +export type Orientation = 'horizontal' | 'vertical'; +export type Direction = 'ltr' | 'rtl'; + +export type ItemId = string; +export type Item = { + itemId: ItemId; + ref: Signal; + isPressed: Signal; + isDisabled: boolean; + tabIndex: Signal; +}; + +export type ToggleGroupRootApiContext = { + rootId: string; + rootOrientation: Orientation; + rootDirection: Direction; + rootIsDisabled: boolean; + rootIsLoopEnabled: boolean; + rootMultiple: boolean; + activateItem$: QRL<(itemValue: string) => Promise | void>; + deActivateItem$: QRL<(itemValue: string) => Promise | void>; + getAllItem$: QRL<() => Item[]>; + pressedValuesSig: Signal; + getAndSetTabIndexItem$: QRL<(itemId: ItemId, tabIndexValue: 0 | -1) => void>; + registerItem$: QRL<(itemId: ItemId, itemSig: Signal) => void>; + itemsCSR: Signal; +}; diff --git a/packages/kit-headless/src/components/toggle-group/toggle-group-item.tsx b/packages/kit-headless/src/components/toggle-group/toggle-group-item.tsx new file mode 100644 index 000000000..d690ef9fe --- /dev/null +++ b/packages/kit-headless/src/components/toggle-group/toggle-group-item.tsx @@ -0,0 +1,244 @@ +import type { PropsOf } from '@builder.io/qwik'; +import { + component$, + useContext, + Slot, + $, + useId, + useSignal, + useTask$, +} from '@builder.io/qwik'; +import { Toggle } from '@qwik-ui/headless'; +import { + Direction, + Item, + Orientation, + toggleGroupRootApiContextId, +} from './toggle-group-context'; +import { KeyCode } from '../../utils'; +import { isBrowser, isServer } from '@builder.io/qwik/build'; + +type NavigationKeys = + | KeyCode.ArrowRight + | KeyCode.ArrowLeft + | KeyCode.ArrowDown + | KeyCode.ArrowUp; + +type Step = -1 | 0 | 1; + +const keyNavigationMap: Record< + Orientation, + Record> +> = { + horizontal: { + ltr: { + ArrowRight: 1, + ArrowLeft: -1, + ArrowDown: 0, + ArrowUp: 0, + }, + rtl: { + ArrowRight: -1, + ArrowLeft: 1, + ArrowDown: 0, + ArrowUp: 0, + }, + }, + vertical: { + ltr: { + ArrowDown: 1, + ArrowUp: -1, + ArrowRight: 0, + ArrowLeft: 0, + }, + rtl: { + ArrowDown: -1, + ArrowUp: 1, + ArrowRight: 0, + ArrowLeft: 0, + }, + }, +}; + +type ToggleGroupItemProps = PropsOf & { + value: string; +}; + +export const HToggleGroupItem = component$((props) => { + const { value, disabled: itemDisabled = false, ...itemProps } = props; + + const rootApiContext = useContext(toggleGroupRootApiContextId); + + const disabled = rootApiContext.rootIsDisabled || itemDisabled; + + const itemId = useId(); + const isPressedSig = useSignal(false); + const itemRef = useSignal(); + const itemTabIndex = useSignal(isPressedSig.value ? 0 : -1); + + const itemSig = useSignal(() => ({ + itemId: itemId, + isPressed: isPressedSig, + isDisabled: disabled, + ref: itemRef, + tabIndex: itemTabIndex, + })); + + useTask$(async ({ track }) => { + const pressedValue = track(() => rootApiContext.pressedValuesSig.value); + + if (pressedValue == null) { + itemSig.value.isPressed.value = false; + return; + } + + if (typeof pressedValue === 'string') { + itemSig.value.isPressed.value = pressedValue === value; + } else { + itemSig.value.isPressed.value = pressedValue.includes(value); + } + }); + + //Item instantiation + useTask$(async () => { + /* + Instatiation of items with their itemIds + Attention: in CSR, items are registered "out of order" (itemId generation) + you can notice: + - the first itemId "generate" before the useTask is wrong + - the itemId read within this useTask is not the same as the one read locally. + + Still, the order how items render is correct. + + So we doing stuff on the client (CSR, onKeyDown, etc) + we can't use rootApiContext.getAllItem$() as we get Items "out of order"). + Perhaps this can be fix in v2? + + Solution: if we want to get the list of items in order, we need to use "refs" directly. + Meaning we need to use this api: rootApiContext.itemsCSR + */ + + //Note: this line execute X times in a row. (X = number of items) + await rootApiContext.registerItem$(itemId, itemSig); + + //setup the tabIndex for each item + const allItems = await rootApiContext.getAllItem$(); + + if (isBrowser) return; + + //ensure each pressedItems have tabIndex = 0 + const currentPressedItems = allItems.filter((item) => item.isPressed.value === true); + + if (currentPressedItems.length > 0) { + return currentPressedItems.forEach(async (item) => { + await rootApiContext.getAndSetTabIndexItem$(item.itemId, 0); + }); + } + + //ensure the first item that is not disabled have tabIndex = 0 + const firstNotDisabledItem = allItems.find((item) => item.isDisabled === false); + + if (firstNotDisabledItem !== undefined) { + await rootApiContext.getAndSetTabIndexItem$(firstNotDisabledItem.itemId, 0); + } + }); + + //instantiate setTabIndex for CSR + useTask$(async ({ track }) => { + if (isServer) return; + track(() => itemRef.value); + + //register refs to the Root + if (!itemRef.value) return; + rootApiContext.itemsCSR.value = [...rootApiContext.itemsCSR.value, itemRef.value]; + + if ( + rootApiContext.itemsCSR.value.length === (await rootApiContext.getAllItem$()).length + ) { + const allItems = rootApiContext.itemsCSR.value; + + //ensure each pressedItems have tabIndex = 0 + const currentPressedItems = allItems.filter((item) => item.ariaPressed === 'true'); + + if (currentPressedItems.length > 0) { + return currentPressedItems.forEach(async (item) => { + const itemRef = allItems.find((i) => i.id === item.id); + if (!itemRef) throw 'Item Not Found'; + itemRef.tabIndex = 0; + }); + } + + //ensure the first item that is not disabled have tabIndex = 0 + const firstNotDisabledItem = allItems.find((item) => item.ariaDisabled === 'false'); + + if (firstNotDisabledItem !== undefined) { + firstNotDisabledItem.tabIndex = 0; + } + } + }); + + const handlePressed$ = $((pressed: boolean) => { + if (pressed) { + rootApiContext.activateItem$(value); + } else { + rootApiContext.deActivateItem$(value); + } + }); + + const handleKeyDown$ = $(async (event: KeyboardEvent) => { + //Note: here we can't use use rootApiContext.items.value as when instantiante its [] + //we might need to make a QRL same as "rootApiContext.getAllItems$()" + const items = Array.from( + document.querySelectorAll(`.toggle-group-item-${rootApiContext.rootId}`), + ) as HTMLElement[]; + + if (items.length === 0) return; + + const enabledItems = items.filter((item) => item.ariaDisabled === 'false'); + //each item has an id (see below the Toggle JSX output) + const currentElement = event.target as HTMLElement; + const currentIndex = enabledItems.findIndex((e) => e.id === currentElement.id); + + if (currentIndex === -1) return; + + //read the direction for the key based on the orientation + const direction = + keyNavigationMap[rootApiContext.rootOrientation][rootApiContext.rootDirection][ + event.key as NavigationKeys + ]; + + //find and nextFocus + if (direction !== 0) { + let nextIndex = currentIndex + direction; + if (rootApiContext.rootIsLoopEnabled) { + // If looping is enabled, wrap around, skipping disabled items + nextIndex = + (currentIndex + direction + enabledItems.length) % enabledItems.length; + } else { + // If looping is disabled, clamp to valid indices + if (nextIndex >= enabledItems.length) nextIndex = enabledItems.length - 1; + if (nextIndex < 0) nextIndex = 0; + } + enabledItems[nextIndex]?.focus(); + } + }); + + return ( + + + + ); +}); diff --git a/packages/kit-headless/src/components/toggle-group/toggle-group-root.tsx b/packages/kit-headless/src/components/toggle-group/toggle-group-root.tsx new file mode 100644 index 000000000..37627c800 --- /dev/null +++ b/packages/kit-headless/src/components/toggle-group/toggle-group-root.tsx @@ -0,0 +1,284 @@ +import type { PropsOf, QRL, Signal } from '@builder.io/qwik'; +import { component$, useContextProvider, Slot, useTask$, $ } from '@builder.io/qwik'; +import { + toggleGroupRootApiContextId, + type Direction, + type Orientation, + type ToggleGroupRootApiContext, +} from './toggle-group-context'; +import { useToggleGroup } from './use-toggle'; +import { isBrowser, isServer } from '@builder.io/qwik/build'; + +export type ToggleGroupBaseProps = { + /** + * When true, prevents the user from interacting with the toggle group and all its items. + */ + disabled?: boolean; +}; + +type ToggleGroupNavigationProps = { + /** + * The orientation of the component, which determines how focus moves: + * horizontal for left/right arrows and vertical for up/down arrows. + * Default to (left-to-right) reading mode. + */ + orientation?: Orientation; + /** + * The reading direction of the toggle group. + * Default to (left-to-right) reading mode. + */ + direction?: Direction; + /** + * When true + * keyboard navigation will loop from last item to first, and vice versa. + */ + loop?: boolean; +}; + +export type ToggleGroupSingleProps = { + /** + * Determines if multi selection is enabled. + */ + multiple?: false; + /** + * The initial value of the pressed item (uncontrolled). + * Can be used in conjunction with onChange$. + */ + value?: string; + + /** + * The callback that fires when the value of the toggle group changes. + * Event handler called when the pressed state of an item changes. + */ + onChange$?: QRL<(value: string) => void>; + /** + * The reactive value (a signal) of the pressed item (the signal is the controlled value). + * Controlling the pressed state with a bounded value. + */ + 'bind:value'?: Signal; +}; + +export type ToggleGroupMultipleProps = { + /** + * Determines if multi selection is enabled. + */ + multiple?: true; + /** + * The initial value of the pressed item (uncontrolled). + * Can be used in conjunction with onChange$. + */ + value?: string[]; + /** + * The callback that fires when the value of the toggle group changes. + * Event handler called when the pressed state of an item changes. + */ + onChange$?: QRL<(value: string[]) => void>; + /** + * The reactive value (a signal) of the pressed item (the signal is the controlled value). + * Controlling the pressed state with a bounded value. + */ + 'bind:value'?: Signal; +}; + +export type ToggleGroupApiProps = (ToggleGroupSingleProps | ToggleGroupMultipleProps) & + ToggleGroupBaseProps & + ToggleGroupNavigationProps; + +export type ToggleGroupRootProps = PropsOf<'div'> & ToggleGroupApiProps; + +export const HToggleGroupRoot = component$((props) => { + const { + onChange$: _, + disabled = false, + orientation = 'horizontal', + direction = 'ltr', + loop = false, + ...divProps + } = props; + + const commonProps = { role: 'group', 'aria-orientation': orientation, dir: direction }; + const orientationClass = orientation === 'vertical' ? 'flex-col' : 'flex-row'; + + const api = useToggleGroup(props); + + const rootApiContext: ToggleGroupRootApiContext = { + rootId: api.rootId, + rootOrientation: orientation, + rootDirection: direction, + rootIsDisabled: disabled, + rootIsLoopEnabled: loop, + rootMultiple: api.multiple, + activateItem$: api.activateItem$, + deActivateItem$: api.deActivateItem$, + getAllItem$: api.getAllItems$, + pressedValuesSig: api.pressedValuesSig, + getAndSetTabIndexItem$: api.getAndSetTabIndexItem$, + registerItem$: api.registerItem$, + itemsCSR: api.itemsCSR, + }; + + const setTabIndexInSSR = $(async () => { + const allItems = await rootApiContext.getAllItem$(); + + //if pressedItems exist, we set them to tabIndex = 0 + const currentPressedItems = allItems.filter((item) => item.isPressed.value === true); + + if (currentPressedItems.length > 0) { + currentPressedItems.forEach(async (item) => { + await rootApiContext.getAndSetTabIndexItem$(item.itemId, 0); + }); + + //and we ensure that the rest of items has tabIndex = -1 + allItems + .filter((item) => item.isPressed.value === false) + .forEach(async (item) => { + await rootApiContext.getAndSetTabIndexItem$(item.itemId, -1); + }); + + return; + } + //However, if no pressedItems exit, we only set tabIndexx = 0 on the first item that is not disabled + const firstNotDisabledItem = allItems.find((item) => item.isDisabled === false); + + if (currentPressedItems.length === 0 && firstNotDisabledItem !== undefined) { + if (firstNotDisabledItem !== undefined) { + await rootApiContext.getAndSetTabIndexItem$(firstNotDisabledItem.itemId, 0); + } + + //and we ensure that the rest of items has tabIndex = -1 + allItems + .filter((item) => item.itemId !== firstNotDisabledItem.itemId) + .forEach(async (item) => { + await rootApiContext.getAndSetTabIndexItem$(item.itemId, -1); + }); + + return; + } + }); + + const setTabIndexInCSR = $(async () => { + /* + Note: given a "single" toggle group with one item already pressed. + - if we use: const allItems = rootApiContext.itemsCSR.value; + - and we lookup for the currentPressedItems, we will get 2 items (the previous and the current) + For that reason to get the currentPressedItems we use: rootApiContext.getAllItem$() + However to get the firstNotDisabledItem, we need to use rootApiContext.itemsCSR.value (refs directly) + as rootApiContext.getAllItem$() will be "out of order". + + Ideally, if rootApiContext.getAllItem$() would be in appropriate order, we could use the same logic + for SSR and CSR. + In should be the case in v2, so we will refactor so both SSR and CSR will use the same API. + + + The other solution that I consider was: + to have a similar logic "setTabIndexInCSR" but this time which only use the refs + meaning (rootApiContext.itemsCSR.value) within the "toggle-group-item": + useTask$(async ({ track }) => { + if (isServer) return; + track(() => rootApiContext.pressedValuesSig.value); + await setTabIndexInCSR(); + }); + + However, I decide to use that function in Root to avoid execute that same logic X times + (X being the number of items) and the fact that Items are consumers that should work in isolation. + They should not execute logic for other Items. This is what Root should do. + */ + const allItems = await rootApiContext.getAllItem$(); + //if pressedItems exist, we set them to tabIndex = 0 + const currentPressedItems = allItems.filter((item) => item.isPressed.value === true); + + if (currentPressedItems.length > 0) { + currentPressedItems.forEach(async (item) => { + const pressedItem = allItems.find((i) => i.itemId === item.itemId); + if (!pressedItem) throw 'Item Not Found'; + if (pressedItem.ref.value) { + pressedItem.ref.value.tabIndex = 0; + } + }); + + //and we ensure that the rest of items has tabIndex = -1 + allItems + .filter((item) => item.isPressed.value === false) + .forEach(async (item) => { + const notPressedItem = allItems.find((i) => i.itemId === item.itemId); + if (!notPressedItem) throw 'Item Not Found'; + if (notPressedItem.ref.value) { + notPressedItem.ref.value.tabIndex = -1; + } + }); + + return; + } + + //However, if no pressedItems exit, we only set tabIndexx = 0 on the first item that is not disabled + /* + Unfortunately, rootApiContext.itemsCSR.value is empty because in the toggle-group-item + the first useTask is tracking the pressedValue changes. + If we put that task at the bottom, we will get the register itemsRef in rootApiContext.itemsCSR.value. + However it will cause other missbehaviors. + + Instead the safe way is to populate manually using the "document". + In v2, we will not this all those workarounds as the items will be in order and we will use the same API for both SSR and CSR. + */ + rootApiContext.itemsCSR.value = Array.from( + document.querySelectorAll(`.toggle-group-item-${rootApiContext.rootId}`), + ) as HTMLElement[]; + + const firstNotDisabledItem = rootApiContext.itemsCSR.value.find( + (item) => item.ariaDisabled === 'false', + ); + + if (currentPressedItems.length === 0 && firstNotDisabledItem !== undefined) { + if (firstNotDisabledItem !== undefined) { + firstNotDisabledItem.tabIndex = 0; + } + + //and we ensure that the rest of items has tabIndex = -1 + allItems + .filter((item) => item.itemId !== firstNotDisabledItem.id) + .forEach(async (item) => { + const otherItem = allItems.find((i) => i.itemId === item.itemId); + if (!otherItem) throw 'Item Not Found'; + if (otherItem.ref.value) { + otherItem.ref.value.tabIndex = -1; + } + }); + + return; + } + }); + + /* + TODO: optimize this code to make it faster (its a library) + Optimization = use a for loop instead of iterating multiple times. + Status: As the ToggleGroup component is in "Draft" state, I decided to not optimize it for now. + As it will decrease readability even more. + Decision: wait for v2, to refactor the code and have the same API for both SSR and CSR. + And then make the optimization. + */ + //side-effect, to setTabIndex + useTask$(async ({ track }) => { + track(() => api.pressedValuesSig.value); + + if (isServer) { + await setTabIndexInSSR(); + } + + if (isBrowser) { + await setTabIndexInCSR(); + } + }); + + useContextProvider(toggleGroupRootApiContextId, rootApiContext); + + return ( +
+ +
+ ); +}); diff --git a/packages/kit-headless/src/components/toggle-group/toggle-group.driver.ts b/packages/kit-headless/src/components/toggle-group/toggle-group.driver.ts new file mode 100644 index 000000000..e0115a684 --- /dev/null +++ b/packages/kit-headless/src/components/toggle-group/toggle-group.driver.ts @@ -0,0 +1,34 @@ +import { type Locator, type Page } from '@playwright/test'; +export type DriverLocator = Locator | Page; + +export function createTestDriver(rootLocator: T) { + const getRoot = () => { + return rootLocator; + }; + + const getToggleGroupRoot = () => { + return getRoot().locator('[data-qui-togglegroup-root]'); + }; + + const getItems = () => { + return getRoot().locator('[data-qui-togglegroup-item]'); + }; + + const getItemsLength = () => { + return getItems().count(); + }; + + const getItemByIndex = (index: number) => { + return getItems().nth(index); + }; + + return { + ...rootLocator, + locator: rootLocator, + getRoot, + getToggleGroupRoot, + getItems, + getItemsLength, + getItemByIndex, + }; +} diff --git a/packages/kit-headless/src/components/toggle-group/toggle-group.test.ts b/packages/kit-headless/src/components/toggle-group/toggle-group.test.ts new file mode 100644 index 000000000..984372580 --- /dev/null +++ b/packages/kit-headless/src/components/toggle-group/toggle-group.test.ts @@ -0,0 +1,1496 @@ +import { expect, test, type Page } from '@playwright/test'; +import { createTestDriver } from './toggle-group.driver'; + +async function setup(page: Page, exampleName: string) { + await page.goto(`/headless/toggle-group/${exampleName}`); + + const driver = createTestDriver(page); + return { + driver, + }; +} + +test.describe('Mouse Behavior', () => { + //'single' (multiple = false) + test(`GIVEN a toggle-group with items: left, center, right + WHEN the 'center' item is clicked + THEN the 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.click(); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('tabIndex', '0'); + await expect(leftItem).toHaveAttribute('tabIndex', '-1'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + }); + + test(`GIVEN a toggle-group + WHEN the 'center' item is clicked + AND the 'right' item is clicked + THEN 'right' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //When, Then + await centerItem.click(); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + await rightItem.click(); + await expect(centerItem).toHaveAttribute('tabIndex', '-1'); + await expect(leftItem).toHaveAttribute('tabIndex', '-1'); + await expect(rightItem).toHaveAttribute('tabIndex', '0'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group with 'center' clicked + WHEN the 'right' item is clicked + AND the 'center' item is clicked + THEN 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getItems()).toHaveCount(3); + + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + await centerItem.click(); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + //When, Then + await rightItem.click(); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + + await centerItem.click(); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('tabIndex', '0'); + await expect(leftItem).toHaveAttribute('tabIndex', '-1'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //type is 'multiple' + test(`GIVEN a toggle-group with items: left, center, right + WHEN the 'center' item is clicked + THEN the 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.click(); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group with 'center' clicked + WHEN the 'right' item is clicked + THEN both 'center' AND right' items should have aria-pressed on true`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + await centerItem.click(); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + //when + await rightItem.click(); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group with 'center' clicked + WHEN the 'right' item is clicked + AND the 'center' item is clicked + THEN 'right' item should have aria-pressed should be true`, async ({ page }) => { + const { driver: d } = await setup(page, 'multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + await centerItem.click(); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + //when + await rightItem.click(); + await centerItem.click(); + + //Then + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //Uncontrolled / Initial (default props) + //single (multiple = false) + test(`GIVEN a toggle-group with 'value' = 'left' + WHEN the 'center' item is clicked + THEN 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'initialValue'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.click(); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //multiple + test(`GIVEN a toggle-group with 'value' = ['left', 'center'] + WHEN the 'center' item is clicked + THEN 'left' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-initialValue-multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.click(); + + //Then + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //Some control (value + onChange$) + //single + test(`GIVEN a toggle-group with 'value' = 'left' + WHEN the 'center' item is clicked + THEN 'center' item should have aria-pressed on true + AND valueSelected should be center`, async ({ page }) => { + const { driver: d } = await setup(page, 'value'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.click(); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //Reactive (controlled) + test(`GIVEN a toggle-group with 'bind:value' = Signal<'left'> + WHEN the 'center' item is clicked + THEN 'center' item should have aria-pressed on true + THEN the span element that store the value of the bounded Signal + should be updated`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-value-bind'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toHaveAttribute('tabIndex', '0'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('tabIndex', '-1'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + + //when + await centerItem.click(); + + //Then + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toHaveAttribute('tabIndex', '-1'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('tabIndex', '0'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + + const spanElement = await d.getRoot().locator('[test-data-bounded-span]'); + await expect(spanElement).toContainText('You selected: center'); + + //when + await centerItem.click(); + + //Then + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toHaveAttribute('tabIndex', '0'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('tabIndex', '-1'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + + await expect(spanElement).toContainText('You selected: '); + }); + + //multiple + test(`GIVEN a toggle-group with 'value' = ['left', 'center'] + WHEN the 'center' item is clicked + THEN 'left' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-value-multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.click(); + + //Then + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + + await expect(leftItem).toHaveAttribute('tabIndex', '0'); + await expect(centerItem).toHaveAttribute('tabIndex', '-1'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + }); + + test(`GIVEN a toggle-group with 'bind:value' = Signal<['left', 'center']> + WHEN the 'center' item is clicked + THEN 'center' item should have aria-pressed on false + THEN the span element that store the value of the bounded Signal + should be updated`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-value-bind-multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.click(); + + //Then + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + const spanElement = await d.getRoot().locator('[test-data-bounded-span]'); + await expect(spanElement).toContainText('You selected: left'); + }); + + //disabled + test(`GIVEN a 'disabled' toggle-group + WHEN the 'center' item is clicked (CAN'T BE CLICKED) + THEN data-disabled should remain on each item`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('data-disabled'); + await expect(leftItem).toHaveAttribute('tabIndex', '-1'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toBeDisabled(); + await expect(centerItem).toHaveAttribute('data-disabled'); + await expect(centerItem).toHaveAttribute('tabIndex', '-1'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toBeDisabled(); + await expect(rightItem).toHaveAttribute('data-disabled'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + }); + + test(`GIVEN a 'disabled' AND 'multiple' toggle-group + WHEN the 'center' item is clicked (CAN'T BE CLICKED) + THEN data-disabled should remain on each item`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-disabled-multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('data-disabled'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toBeDisabled(); + await expect(centerItem).toHaveAttribute('data-disabled'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toBeDisabled(); + await expect(rightItem).toHaveAttribute('data-disabled'); + }); + + test(`GIVEN a 'disabled' toggle-group with 'value' = 'left' + WHEN the 'center' item is clicked (CAN'T BE CLICKED) + THEN data-disabled should remain on each item`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-disabled-value'); + + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('data-disabled'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toBeDisabled(); + await expect(centerItem).toHaveAttribute('data-disabled'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toBeDisabled(); + await expect(rightItem).toHaveAttribute('data-disabled'); + }); + + test(`GIVEN a 'disabled' toggle-group with 'value' = ['left', 'center'] + WHEN the 'center' item is clicked + THEN data-disabled should remain on each item`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-disabled-value-multiple'); + + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('data-disabled'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toBeDisabled(); + await expect(centerItem).toHaveAttribute('data-disabled'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toBeDisabled(); + await expect(rightItem).toHaveAttribute('data-disabled'); + }); + + test(`GIVEN a toggle-group with a disabled 'left' item + WHEN the 'center' item is clicked + AND the 'right' item is clicked + THEN data-disabled should remain on the 'left' item + AND 'center' item should have aria-pressed on false + AND 'right' item should have aria-pressed on true + `, async ({ page }) => { + const { driver: d } = await setup(page, 'test-item-disabled'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('data-disabled'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await centerItem.click(); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + await rightItem.click(); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('data-disabled'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + }); + + test(`GIVEN a toggle-group with a disabled 'left' item + WHEN the 'center' item is clicked + AND the 'right' item is clicked + THEN data-disabled should remain on the 'left' item + AND both 'center' AND 'right' items should have aria-pressed on false`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'test-item-disabled-multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('data-disabled'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, then + await centerItem.click(); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + await rightItem.click(); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('data-disabled'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + }); +}); + +test.describe('Keyboard Navigation (Moving and Pressing)', () => { + //'single' (multiple = false) + test(`GIVEN a toggle-group with items: left, center, right + WHEN the 'center' item is 'Enter' pressed + THEN the 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group + WHEN the 'center' item is 'Enter' pressed + AND the 'right' item is 'Enter' pressed + THEN 'right' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //When, Then + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + await centerItem.press('ArrowRight'); + await expect(rightItem).toBeFocused(); + await rightItem.press('Enter'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + }); + + test(`GIVEN a single toggle-group wrapped into other element + WHEN the 'outsideRoot' element is 'Focused' + AND the 'outsideRoot' element is 'Tab' pressed + THEN 'leftItem' (firstItem) should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-focus-single'); + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toHaveAttribute('tabIndex', '0'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('tabIndex', '-1'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + + const outsideRootTopElement = await d + .getRoot() + .locator('[test-data-outside-root-top]'); + const outsideRootBottomButtonElement = await d + .getRoot() + .locator('[test-data-outside-root-bottom-button]'); + + //When, Then + await outsideRootTopElement.focus(); + await outsideRootTopElement.press('Tab'); + await expect(leftItem).toBeFocused(); + await leftItem.press('Tab'); + await expect(outsideRootBottomButtonElement).toBeFocused(); + }); + + test(`GIVEN a single toggle-group wrapped into other element and center item is pressed + WHEN the 'outsideRoot' element is 'Focused' + AND the 'outsideRoot' element is 'Tab' pressed + THEN 'center' (pressedItem) should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-focus-single-center-pressed'); + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toHaveAttribute('tabIndex', '-1'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('tabIndex', '0'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + + const outsideRootTopElement = await d + .getRoot() + .locator('[test-data-outside-root-top]'); + + //When, Then + await outsideRootTopElement.focus(); + await outsideRootTopElement.press('Tab'); + await expect(centerItem).toBeFocused(); + }); + + test(`GIVEN a multiple toggle-group wrapped into other element + WHEN the 'outsideRoot' element is 'Focused' + AND the 'outsideRoot' element is 'Tab' pressed + THEN 'leftItem' (firstItem) should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-focus-multiple'); + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toHaveAttribute('tabIndex', '0'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('tabIndex', '-1'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + + const outsideRootTopElement = await d + .getRoot() + .locator('[test-data-outside-root-top]'); + const outsideRootBottomButtonElement = await d + .getRoot() + .locator('[test-data-outside-root-bottom-button]'); + + //When, Then + await outsideRootTopElement.focus(); + await outsideRootTopElement.press('Tab'); + await expect(leftItem).toBeFocused(); + await leftItem.press('Tab'); + await expect(outsideRootBottomButtonElement).toBeFocused(); + }); + + test(`GIVEN a multiple toggle-group wrapped into other element and center item is pressed + WHEN the 'outsideRoot' element is 'Focused' + AND the 'outsideRoot' element is 'Tab' pressed + THEN 'center' (pressedItem) should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-focus-multiple-center-pressed'); + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toHaveAttribute('tabIndex', '-1'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('tabIndex', '0'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('tabIndex', '-1'); + + const outsideRootTopElement = await d + .getRoot() + .locator('[test-data-outside-root-top]'); + + //When, Then + await outsideRootTopElement.focus(); + await outsideRootTopElement.press('Tab'); + await expect(centerItem).toBeFocused(); + }); + + test(`GIVEN a toggle-group with 'center' is 'Enter' pressed + WHEN the 'right' item is 'Enter' pressed + AND the 'center' item is 'Enter' pressed + THEN 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + //When, Then + await centerItem.press('ArrowRight'); + await expect(rightItem).toBeFocused(); + await rightItem.press('Enter'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + + await rightItem.press('ArrowLeft'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //type is 'multiple' + test(`GIVEN a toggle-group with items: left, center, right + WHEN the 'center' item is 'Enter' pressed + THEN the 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group with 'center' is 'Enter' pressed + WHEN the 'right' item is 'Enter' pressed + THEN both 'center' AND right' items should have aria-pressed on true`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + //when + await centerItem.press('ArrowRight'); + await expect(rightItem).toBeFocused(); + await rightItem.press('Enter'); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group with 'center' is 'Enter' pressed + WHEN the 'right' is 'Enter' pressed + AND the 'center' is 'Enter' pressed + THEN 'right' item should have aria-pressed should be true`, async ({ page }) => { + const { driver: d } = await setup(page, 'multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + await centerItem.focus(); + await centerItem.press('Enter'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + //when + await centerItem.press('ArrowRight'); + await expect(rightItem).toBeFocused(); + await rightItem.press('Enter'); + await rightItem.press('ArrowLeft'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + + //Then + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //Uncontrolled / Initial value + //single (multiple = false) + test(`GIVEN a toggle-group with an initial 'value' = 'left' + WHEN the 'center' item is 'Enter' pressed + THEN 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'initialValue'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //multiple + test(`GIVEN a toggle-group with an initial 'value' = ['left', 'center'] + WHEN the 'center' item is 'Enter' pressed + THEN 'left' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-initialValue-multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + + //Then + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //Initial (value) + //single + test(`GIVEN a toggle-group with 'value' = 'left' + WHEN the 'center' item is 'Enter' pressed + THEN 'center' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'value'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + + //Then + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //multiple + test(`GIVEN a toggle-group with 'value' = ['left', 'center'] + WHEN the 'center' item is 'Enter' pressed + THEN 'left' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-value-multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await leftItem.focus(); + await leftItem.press('ArrowRight'); + await expect(centerItem).toBeFocused(); + await centerItem.press('Enter'); + + //Then + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + }); + + //disabled + test(`GIVEN a 'disabled' toggle-group + WHEN the 'center' item is is 'Enter' pressed (CAN'T BE PRESSED) + THEN aria-disabled should be true on each item`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toBeDisabled(); + await expect(centerItem).toHaveAttribute('aria-disabled', 'true'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toBeDisabled(); + await expect(rightItem).toHaveAttribute('aria-disabled', 'true'); + }); + + test(`GIVEN a 'disabled' toggle-group + WHEN the 'center' item is 'Enter' pressed (CAN'T BE PRESSED) + THEN aria-disabled should be true on each item`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-disabled-multiple'); + + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toBeDisabled(); + await expect(centerItem).toHaveAttribute('aria-disabled', 'true'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toBeDisabled(); + await expect(rightItem).toHaveAttribute('aria-disabled', 'true'); + }); + + test(`GIVEN a 'disabled' toggle-group with 'value' = 'left' + WHEN the 'center' item is 'Enter' pressed (CAN'T BE PRESSED) + THEN aria-disabled should be true on each item`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-disabled-value'); + + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toBeDisabled(); + await expect(centerItem).toHaveAttribute('aria-disabled', 'true'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toBeDisabled(); + await expect(rightItem).toHaveAttribute('aria-disabled', 'true'); + }); + + test(`GIVEN a 'disabled' toggle-group with 'value' = ['left', 'center'] + WHEN the 'center' item is 'Enter' pressed + THEN aria-disabled should be true on each item`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-disabled-value-multiple'); + + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + await expect(centerItem).toBeDisabled(); + await expect(centerItem).toHaveAttribute('aria-disabled', 'true'); + + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toBeDisabled(); + await expect(rightItem).toHaveAttribute('aria-disabled', 'true'); + }); + + test(`GIVEN a toggle-group with a disabled 'left' item + WHEN the 'center' item is 'Enter' pressed + AND the 'right' item is 'Enter' pressed + THEN aria-disabled should be true on the 'left' item + AND 'center' item should have aria-pressed on false + AND 'right' item should have aria-pressed on true + `, async ({ page }) => { + const { driver: d } = await setup(page, 'test-item-disabled'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.focus(); + await centerItem.press('Enter'); + + await centerItem.press('ArrowRight'); + await expect(rightItem).toBeFocused(); + await rightItem.press('Enter'); + + //Then + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group with a disabled 'left' item + WHEN the 'center' item is 'Enter' pressed + AND the 'right' item is 'Enter' pressed + THEN aria-disabled should be true on the 'left' item + AND both 'center' AND 'right' items should have aria-pressed on false`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'test-item-disabled-multiple'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //When, Then + await centerItem.focus(); + await centerItem.press('Enter'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'true'); + + await centerItem.press('ArrowRight'); + await expect(rightItem).toBeFocused(); + await rightItem.press('Enter'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + }); +}); + +test.describe('Keyboard Without Looping Behavior (Moving and Pressing)', () => { + //'single' (multiple = false) + test(`GIVEN a toggle-group with items: left, center, right + WHEN the 'left' item is focused + AND the 'ArrowLeft' key is pressed + THEN the 'left' item should remain focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowLeft'); + await expect(leftItem).toBeFocused(); + }); + + test(`GIVEN a toggle-group with items: left, center, right (NO LOOP) + WHEN the 'left' item is focused + AND the 'ArrowLeft' key is pressed + AND the 'Enter' key is pressed + THEN the 'left' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowLeft'); + await expect(leftItem).toBeFocused(); + await leftItem.press('Enter'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group with items: left, center, right (NO LOOP) + WHEN the 'right' item is focused + AND the 'ArrowRight' key is pressed + THEN the 'right' item should remain focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await rightItem.focus(); + await expect(rightItem).toBeFocused(); + + await rightItem.press('ArrowRight'); + await expect(rightItem).toBeFocused(); + }); + + test(`GIVEN a toggle-group with items: left, center, right (NO LOOP) + WHEN the 'right' item is focused + AND the 'ArrowRight' key is pressed + AND the 'Enter' key is pressed + THEN the 'right' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await rightItem.focus(); + await expect(rightItem).toBeFocused(); + + await rightItem.press('ArrowRight'); + await expect(rightItem).toBeFocused(); + + await rightItem.press('Enter'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + }); + + //disabled (item) + test(`GIVEN a toggle-group with a disabled 'left' item + WHEN the 'center' item is focused + AND the 'ArrowLeft' key is pressed + THEN the 'center' item should remain focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-item-disabled'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.focus(); + await expect(centerItem).toBeFocused(); + await centerItem.press('ArrowLeft'); + await expect(centerItem).toBeFocused(); + }); + + //vertical + test(`GIVEN a toggle-group with 'vertical' orientation + WHEN the 'left' item is focused + AND the 'ArrowUp' key is pressed + THEN the 'left' item should remain focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical'); + + //Given + const root = d.getToggleGroupRoot(); + await expect(root).toHaveAttribute('aria-orientation', 'vertical'); + await expect(root).toHaveAttribute('dir', 'ltr'); + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowUp'); + await expect(leftItem).toBeFocused(); + }); + + //vertical and direction rtl + test(`GIVEN a toggle-group with 'vertical' orientation and 'rtl' direction + WHEN the 'left' item is focused + AND the 'ArrowUp' key is pressed + THEN the 'center' item should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-vertical-multiple-rtl'); + + //Given + const root = d.getToggleGroupRoot(); + await expect(root).toHaveAttribute('aria-orientation', 'vertical'); + await expect(root).toHaveAttribute('dir', 'rtl'); + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowUp'); + await expect(centerItem).toBeFocused(); + }); + + //horizontal and direction rtl + test(`GIVEN a toggle-group with 'horizontal' orientation and 'rtl' direction + WHEN the 'left' item is focused + AND the 'ArrowLeft' key is pressed + THEN the 'center' item should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'horizontal-rtl'); + + //Given + const root = d.getToggleGroupRoot(); + await expect(root).toHaveAttribute('aria-orientation', 'horizontal'); + await expect(root).toHaveAttribute('dir', 'rtl'); + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowLeft'); + await expect(centerItem).toBeFocused(); + }); +}); + +test.describe('Keyboard With Looping Behavior (Moving and Pressing)', () => { + //'single' (multiple = false) + test(`GIVEN a toggle-group with items: left, center, right + WHEN the 'left' item is focused + AND the 'ArrowLeft' key is pressed + THEN the 'right' item should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'loop'); + + //Given + const root = d.getToggleGroupRoot(); + await expect(root).toHaveAttribute('aria-orientation', 'horizontal'); + await expect(root).toHaveAttribute('dir', 'ltr'); + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowLeft'); + await expect(rightItem).toBeFocused(); + }); + + test(`GIVEN a toggle-group with items: left, center, right (NO LOOP) + WHEN the 'left' item is focused + AND the 'ArrowLeft' key is pressed + AND the 'Enter' key is pressed + THEN the 'right' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'loop'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowLeft'); + await expect(rightItem).toBeFocused(); + await rightItem.press('Enter'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle-group with items: left, center, right (NO LOOP) + WHEN the 'right' item is focused + AND the 'ArrowRight' key is pressed + THEN the 'left' item should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'loop'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await rightItem.focus(); + await expect(rightItem).toBeFocused(); + + await rightItem.press('ArrowRight'); + await expect(leftItem).toBeFocused(); + }); + + test(`GIVEN a toggle-group with items: left, center, right (NO LOOP) + WHEN the 'right' item is focused + AND the 'ArrowRight' key is pressed + AND the 'Enter' key is pressed + THEN the 'left' item should have aria-pressed on true`, async ({ page }) => { + const { driver: d } = await setup(page, 'loop'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await rightItem.focus(); + await expect(rightItem).toBeFocused(); + + await rightItem.press('ArrowRight'); + await expect(leftItem).toBeFocused(); + + await leftItem.press('Enter'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'true'); + }); + + //disabled (item) + test(`GIVEN a toggle-group with a disabled 'left' item + WHEN the 'center' item is focused + AND the 'ArrowLeft' key is pressed + THEN the 'right' item should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'loop-item-disabled'); + + //Given + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + + await expect(leftItem).toBeDisabled(); + await expect(leftItem).toHaveAttribute('aria-disabled', 'true'); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when + await centerItem.focus(); + await expect(centerItem).toBeFocused(); + await centerItem.press('ArrowLeft'); + await expect(rightItem).toBeFocused(); + }); + + //vertical + test(`GIVEN a toggle-group with 'vertical' orientation + WHEN the 'left' item is focused + AND the 'ArrowUp' key is pressed + THEN the 'right' item should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-loop-vertical'); + + //Given + const root = d.getToggleGroupRoot(); + await expect(root).toHaveAttribute('aria-orientation', 'vertical'); + await expect(root).toHaveAttribute('dir', 'ltr'); + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowUp'); + await expect(rightItem).toBeFocused(); + }); + + //vertical and direction rtl + test(`GIVEN a toggle-group with 'vertical' orientation and 'rtl' direction + WHEN the 'left' item is focused + AND the 'ArrowUp' key is pressed + THEN the 'center' item should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-loop-vertical-rtl'); + + //Given + const root = d.getToggleGroupRoot(); + await expect(root).toHaveAttribute('aria-orientation', 'vertical'); + await expect(root).toHaveAttribute('dir', 'rtl'); + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowUp'); + await expect(centerItem).toBeFocused(); + }); + + //horizontal and direction rtl + test(`GIVEN a toggle-group with 'horizontal' orientation and 'rtl' direction + WHEN the 'left' item is focused + AND the 'ArrowLeft' key is pressed + THEN the 'center' item should be focused`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-loop-horizontal-rtl'); + + //Given + const root = d.getToggleGroupRoot(); + await expect(root).toHaveAttribute('aria-orientation', 'horizontal'); + await expect(root).toHaveAttribute('dir', 'rtl'); + await expect(d.getItems()).toHaveCount(3); + const leftItem = await d.getItemByIndex(0); + const centerItem = await d.getItemByIndex(1); + const rightItem = await d.getItemByIndex(2); + await expect(leftItem).toHaveAttribute('aria-pressed', 'false'); + await expect(centerItem).toHaveAttribute('aria-pressed', 'false'); + await expect(rightItem).toHaveAttribute('aria-pressed', 'false'); + + //when, Then + await leftItem.focus(); + await expect(leftItem).toBeFocused(); + + await leftItem.press('ArrowLeft'); + await expect(centerItem).toBeFocused(); + }); +}); diff --git a/packages/kit-headless/src/components/toggle-group/use-toggle.tsx b/packages/kit-headless/src/components/toggle-group/use-toggle.tsx new file mode 100644 index 000000000..3da84ed8f --- /dev/null +++ b/packages/kit-headless/src/components/toggle-group/use-toggle.tsx @@ -0,0 +1,120 @@ +import { $, Signal, useId, useSignal } from '@builder.io/qwik'; + +import { Item, ItemId } from './toggle-group-context'; +import { + ToggleGroupApiProps, + ToggleGroupMultipleProps, + ToggleGroupSingleProps, +} from './toggle-group-root'; +import { useBoundSignal } from '../../utils/bound-signal2'; + +function useRootItemsRepo() { + const items = useSignal>>(new Map()); + + const rootId = useId(); + + //only used to register itemRef in CSR land + const itemsCSR = useSignal([]); + + const registerItem$ = $((itemId: ItemId, itemSig: Signal) => { + items.value = items.value.set(itemId, itemSig); + }); + + const getAndSetTabIndexItem$ = $((itemId: ItemId, tabIndexValue: 0 | -1) => { + const itemSig = items.value.get(itemId); + if (!itemSig) throw 'Item Not Found'; + if (itemSig) { + itemSig.value.tabIndex.value = tabIndexValue; + } + }); + + const getAllItems$ = $(() => + Array.from(items.value.values()).map((signal) => signal.value), + ); + + return { + getAllItems$, + getAndSetTabIndexItem$, + registerItem$, + rootId, + itemsCSR, + } as const; +} + +function useCreateSingleToggleGroup(props: ToggleGroupSingleProps) { + const { multiple = false, value, onChange$, 'bind:value': givenValueSig } = props; + + const pressedValuesSig = useBoundSignal(givenValueSig, value); + const rootItemsRepo = useRootItemsRepo(); + + const handleValueChange$ = $((newValue: string) => { + pressedValuesSig.value = newValue; + + if (onChange$) onChange$(pressedValuesSig.value); + }); + + const activateItem$ = $((itemValue: string) => handleValueChange$(itemValue)); + const deActivateItem$ = $(() => handleValueChange$('')); + + return { + multiple, + pressedValuesSig, + activateItem$, + deActivateItem$, + getAllItems$: rootItemsRepo.getAllItems$, + getAndSetTabIndexItem$: rootItemsRepo.getAndSetTabIndexItem$, + registerItem$: rootItemsRepo.registerItem$, + rootId: rootItemsRepo.rootId, + itemsCSR: rootItemsRepo.itemsCSR, + } as const; +} + +function useCreateMultipleToggleGroup(props: ToggleGroupMultipleProps) { + const { multiple = true, 'bind:value': givenValueSig, value, onChange$ } = props; + + /* + Need to pass an empty array if not I got: TypeError when toggle + Uncaught (in promise) TypeError: pressedValuesSig.value is not iterable + */ + const pressedValuesSig = useBoundSignal(givenValueSig, value || []); + + const rootItemsRepo = useRootItemsRepo(); + + const handleValueChange$ = $((newValue: string[]) => { + pressedValuesSig.value = newValue; + + if (onChange$) onChange$(pressedValuesSig.value); + }); + + const activateItem$ = $((itemValue: string) => + handleValueChange$([...pressedValuesSig.value, itemValue]), + ); + const deActivateItem$ = $((itemValue: string) => + handleValueChange$(pressedValuesSig.value.filter((value) => value !== itemValue)), + ); + + return { + multiple, + pressedValuesSig, + activateItem$, + deActivateItem$, + getAllItems$: rootItemsRepo.getAllItems$, + getAndSetTabIndexItem$: rootItemsRepo.getAndSetTabIndexItem$, + registerItem$: rootItemsRepo.registerItem$, + rootId: rootItemsRepo.rootId, + itemsCSR: rootItemsRepo.itemsCSR, + } as const; +} + +function isSingleProps(props: ToggleGroupApiProps): props is ToggleGroupSingleProps { + return props.multiple === undefined || props.multiple === false; +} + +export function useToggleGroup(props: ToggleGroupApiProps) { + if (isSingleProps(props)) { + // this is fine as the ToggleGroup will always be either Single or Multiple during its lifecycle + // eslint-disable-next-line qwik/use-method-usage + return useCreateSingleToggleGroup(props); + } + return useCreateMultipleToggleGroup(props); +} diff --git a/packages/kit-headless/src/components/toggle/index.ts b/packages/kit-headless/src/components/toggle/index.tsx similarity index 100% rename from packages/kit-headless/src/components/toggle/index.ts rename to packages/kit-headless/src/components/toggle/index.tsx diff --git a/packages/kit-headless/src/components/toggle/toggle.driver.ts b/packages/kit-headless/src/components/toggle/toggle.driver.ts new file mode 100644 index 000000000..c19bb4c80 --- /dev/null +++ b/packages/kit-headless/src/components/toggle/toggle.driver.ts @@ -0,0 +1,31 @@ +import { type Locator, type Page } from '@playwright/test'; +export type DriverLocator = Locator | Page; + +export function createTestDriver(rootLocator: T) { + const getRoot = () => { + return rootLocator; + }; + + const getToggleButton = () => { + return getRoot().getByRole('button').nth(0); + }; + + const pressButtonWithEnter = () => { + getToggleButton().focus(); + return getToggleButton().press('Enter'); + }; + + const pressButtonWithSpace = () => { + getToggleButton().focus(); + return getToggleButton().press('Space'); + }; + + return { + ...rootLocator, + locator: rootLocator, + getRoot, + getToggleButton, + pressButtonWithEnter, + pressButtonWithSpace, + }; +} diff --git a/packages/kit-headless/src/components/toggle/toggle.test.ts b/packages/kit-headless/src/components/toggle/toggle.test.ts new file mode 100644 index 000000000..ced59373e --- /dev/null +++ b/packages/kit-headless/src/components/toggle/toggle.test.ts @@ -0,0 +1,299 @@ +import { expect, test, type Page } from '@playwright/test'; +import { createTestDriver } from './toggle.driver'; + +async function setup(page: Page, exampleName: string) { + await page.goto(`/headless/toggle/${exampleName}`); + + const driver = createTestDriver(page); + + return { + driver, + }; +} + +test.describe('Mouse Behavior', () => { + test(`GIVEN a toggle + WHEN the toggle is clicked + THEN aria-pressed should be true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + + //when + await d.getToggleButton().click(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + }); + + //Uncontrolled / Initial + test(`GIVEN a pressed toggle (with initial 'pressed') + WHEN the toggle is clicked + THEN aria-pressed should be false`, async ({ page }) => { + const { driver: d } = await setup(page, 'initialPressed'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + + //When + await d.getToggleButton().click(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + }); + + //pressed with onPressedChange to have some control + test(`GIVEN a pressed toggle (with 'pressed') + WHEN the toggle is clicked + THEN aria-pressed should be false`, async ({ page }) => { + const { driver: d } = await setup(page, 'pressed'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + + //When + await d.getToggleButton().click(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + }); + + //Controlled / Reactive + //bind:pressed: 1 way binding (reading) + test(`GIVEN a pressed toggle (with 'bind-pressed') + WHEN the toggle is clicked + THEN aria-pressed should be false + AND the span element that store the value of the bounded Signal + should be updated + `, async ({ page }) => { + const { driver: d } = await setup(page, 'test-bind-pressed'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + + //When + await d.getToggleButton().click(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + const spanElement = await d.getRoot().locator('[test-data-bounded-span]'); + await expect(spanElement).toContainText('You unpressed me'); + }); + + //bind:pressed: 2 way binding (writing) + test(`GIVEN a pressed toggle (with 'bind-pressed') + WHEN the toggle is clicked + AND the external button is clicked + THEN aria-pressed should be true + AND the span element that store the value of the bounded Signal + should be updated + `, async ({ page }) => { + const { driver: d } = await setup(page, 'test-bind-pressed'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + + //When + await d.getToggleButton().click(); + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + + const button = await d.getRoot().locator('[test-data-bounded-button]'); + await button.click(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + const spanElement = await d.getRoot().locator('[test-data-bounded-span]'); + await expect(spanElement).toContainText('You pressed me'); + }); + + //disabled + test(`GIVEN a disabled toggle + WHEN the toggle is clicked + THEN data-disabled should remain`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('data-disabled'); + }); + + test(`GIVEN a disabled and pressed toggle + WHEN the toggle is clicked + THEN aria-pressed should be true + AND data-disabled should remain`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-pressed-disabled'); + + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + await expect(d.getToggleButton()).toHaveAttribute('data-disabled'); + }); + + test(`GIVEN a pressed and disabled toggle + WHEN the toggle is clicked + THEN aria-pressed should remain false + AND data-disabled should remain`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-pressed-disabled'); + + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + await expect(d.getToggleButton()).toHaveAttribute('data-disabled'); + }); +}); + +test.describe('Keyboard Behavior a11y', () => { + test(`GIVEN a toggle + WHEN the toggle is 'Enter' pressed + THEN aria-pressed should be true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + + //when + await d.pressButtonWithEnter(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + }); + + test(`GIVEN a toggle + WHEN the toggle is 'Space' pressed + THEN aria-pressed should be true`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + + //when + await d.pressButtonWithSpace(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + }); + + //Uncontrolled / Initial + test(`GIVEN a pressed toggle (with initial 'pressed') + WHEN the toggle is 'Enter' pressed + THEN aria-pressed should be false`, async ({ page }) => { + const { driver: d } = await setup(page, 'initialPressed'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + + //When + await d.pressButtonWithEnter(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + }); + test(`GIVEN a pressed toggle (with initial 'pressed') + WHEN the toggle is 'Space' pressed + THEN aria-pressed should be false`, async ({ page }) => { + const { driver: d } = await setup(page, 'initialPressed'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + + //When + await d.pressButtonWithEnter(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + }); + + //Controlled / Reactive + //pressed + test(`GIVEN a pressed toggle (with 'pressed') + WHEN the toggle is 'Enter' pressed + THEN aria-pressed should be false`, async ({ page }) => { + const { driver: d } = await setup(page, 'pressed'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + + //When + await d.getToggleButton().click(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + }); + + test(`GIVEN a pressed toggle (with 'pressed') + WHEN the toggle is 'Space' pressed + THEN aria-pressed should be false`, async ({ page }) => { + const { driver: d } = await setup(page, 'pressed'); + + //Given + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + + //When + await d.getToggleButton().click(); + + //Then + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'false'); + }); + + //disabled + test(`GIVEN a disabled toggle + WHEN the toggle is 'Enter' pressed + THEN aria-disabled should remain true`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + //Then + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('aria-disabled', 'true'); + }); + + test(`GIVEN a disabled toggle + WHEN the toggle is 'Space' pressed + THEN aria-disabled should remain true`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + //Then + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('aria-disabled', 'true'); + }); + + test(`GIVEN a disabled and pressed toggle + WHEN the toggle is 'Enter' pressed + THEN aria-pressed should remain false + AND data-disabled should remain`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-disabled-pressed'); + + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + await expect(d.getToggleButton()).toHaveAttribute('aria-disabled', 'true'); + }); + + test(`GIVEN a disabled and pressed toggle + WHEN the toggle is 'Space' pressed + THEN aria-pressed should remain false + AND data-disabled should remain`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-disabled-pressed'); + + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + await expect(d.getToggleButton()).toHaveAttribute('aria-disabled', 'true'); + }); + + test(`GIVEN a pressed and disabled toggle + WHEN the toggle is 'Enter' pressed + THEN aria-pressed should remain false + AND data-disabled should remain`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-pressed-disabled'); + + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + await expect(d.getToggleButton()).toHaveAttribute('aria-disabled', 'true'); + }); + test(`GIVEN a pressed and disabled toggle + WHEN the toggle is 'Space' pressed + THEN aria-pressed should remain false + AND data-disabled should remain`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-pressed-disabled'); + + await expect(d.getToggleButton()).toBeDisabled(); + await expect(d.getToggleButton()).toHaveAttribute('aria-pressed', 'true'); + await expect(d.getToggleButton()).toHaveAttribute('aria-disabled', 'true'); + }); +}); diff --git a/packages/kit-headless/src/components/toggle/toggle.tsx b/packages/kit-headless/src/components/toggle/toggle.tsx index c997333c6..b023728c0 100644 --- a/packages/kit-headless/src/components/toggle/toggle.tsx +++ b/packages/kit-headless/src/components/toggle/toggle.tsx @@ -1,25 +1,71 @@ -import { PropsOf, component$, useSignal } from '@builder.io/qwik'; +import type { PropsOf, QRL, Signal } from '@builder.io/qwik'; +import { $, component$, Slot, sync$, useTask$ } from '@builder.io/qwik'; +import { useBoundSignal } from '../../utils/bound-signal2'; -export type ToggleProps = PropsOf<'input'> & { +export type ToggleProps = PropsOf<'button'> & { + /** + * When true, prevents the user from interacting with the toggle group and all its items. + */ disabled?: boolean; + /** + * The initial value of the toggle. + * Can be used in conjunction with `onPressedChange` to have more control. + */ pressed?: boolean; - defaultPressed?: boolean; + /** + * The callback that fires when the state of the toggle changes. + */ + onPressedChange$?: QRL<(pressed: boolean) => void>; + /** + * The reactive value (a signal) of the toggle (the signal is the controlled value). + * Controlling the pressed state with a bounded value. + */ + 'bind:pressed'?: Signal; }; -export const HToggle = component$( - ({ pressed, defaultPressed = false, disabled, ...props }) => { - const pressedState = useSignal(pressed || defaultPressed); - - return ( - - ); - }, -); +export const HToggle = component$((props) => { + const { + pressed: pressedProp, + onPressedChange$, + 'bind:pressed': givenValueSig, + ...buttonProps + } = props; + + const pressedSig = useBoundSignal(givenValueSig, pressedProp ? pressedProp : false); + + const handleKeyDownSync$ = sync$((event: KeyboardEvent) => { + if (!['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp'].includes(event.key)) return; + + event.preventDefault(); + }); + + useTask$(async ({ track }) => { + if (pressedProp === undefined) return; + track(() => pressedProp); + pressedSig.value = pressedProp; + }); + + const handleClick$ = $(async () => { + if (!props.disabled) { + pressedSig.value = !pressedSig.value; + if (onPressedChange$) { + onPressedChange$(pressedSig.value); + } + } + }); + + return ( + + ); +}); diff --git a/packages/kit-headless/src/index.ts b/packages/kit-headless/src/index.ts index ec123fc37..77c2e051a 100644 --- a/packages/kit-headless/src/index.ts +++ b/packages/kit-headless/src/index.ts @@ -13,6 +13,7 @@ export * as Progress from './components/progress'; export * from './components/separator'; export * as Tabs from './components/tabs'; export { Toggle } from './components/toggle'; +export { ToggleGroup } from './components/toggle-group'; export * from './utils/visually-hidden'; export * as Tooltip from './components/tooltip'; export * as Dropdown from './components/dropdown'; diff --git a/packages/kit-headless/src/utils/bound-signal2.tsx b/packages/kit-headless/src/utils/bound-signal2.tsx new file mode 100644 index 000000000..d5953de5e --- /dev/null +++ b/packages/kit-headless/src/utils/bound-signal2.tsx @@ -0,0 +1,20 @@ +/** + * Creates a bound signal that synchronizes with an external signal if provided. + * This hook is useful for two-way binding scenarios, especially when dealing with + * component props that may or may not be signals. + * + * @param givenSignal - An optional external signal to bind to. + * @param initialValue - The initial value to use if no external signal is provided. + * @returns A signal that is either bound to the external signal or a new internal signal. + * + * The returned signal will update the external signal (if provided) whenever its value changes, + * and will also update itself when the external signal changes. + */ + +import { createSignal, Signal, useConstant } from '@builder.io/qwik'; + +export const useBoundSignal = ( + givenSignal?: Signal, + initialValue?: T, +): Signal => + useConstant(() => givenSignal || (createSignal(initialValue) as Signal)); diff --git a/packages/kit-styled/src/components/toggle-group/toggle-group.tsx b/packages/kit-styled/src/components/toggle-group/toggle-group.tsx new file mode 100644 index 000000000..cb732f3c8 --- /dev/null +++ b/packages/kit-styled/src/components/toggle-group/toggle-group.tsx @@ -0,0 +1,61 @@ +import { + component$, + type PropsOf, + Slot, + useContext, + useContextProvider, +} from '@builder.io/qwik'; +import { cn } from '@qwik-ui/utils'; +import { ToggleGroup as HeadlessToggleGroup } from '@qwik-ui/headless'; + +import { toggleVariants } from '@qwik-ui/styled'; +import type { VariantProps } from 'class-variance-authority'; + +import { createContextId } from '@builder.io/qwik'; + +export const toggleGroupStyledContextId = createContextId( + 'qui-toggle-group-styled', +); + +export type ToggleGroupStyledContext = VariantProps; + +type ToggleGroupRootProps = PropsOf & + VariantProps; + +const Root = component$(({ size, look, ...props }) => { + const contextStyled: ToggleGroupStyledContext = { + size, + look, + }; + useContextProvider(toggleGroupStyledContextId, contextStyled); + + return ( + + + + ); +}); + +type ToggleGroupItemProps = PropsOf & + VariantProps; + +const Item = component$(({ ...props }) => { + const { size, look } = useContext(toggleGroupStyledContextId); + + return ( + + + + ); +}); + +export const ToggleGroup = { + Root, + Item, +}; diff --git a/packages/kit-styled/src/components/toggle/toggle.tsx b/packages/kit-styled/src/components/toggle/toggle.tsx index e7716f148..ed223bc26 100644 --- a/packages/kit-styled/src/components/toggle/toggle.tsx +++ b/packages/kit-styled/src/components/toggle/toggle.tsx @@ -1,34 +1,37 @@ -import { type PropsOf, component$ } from '@builder.io/qwik'; -import { Toggle as HeadlessToggle } from '@qwik-ui/headless'; +import { component$, type PropsOf, Slot } from '@builder.io/qwik'; import { cn } from '@qwik-ui/utils'; -import { VariantProps, cva } from 'class-variance-authority'; - -type ToggleProps = PropsOf & VariantProps; +import { cva, type VariantProps } from 'class-variance-authority'; +import { Toggle as HeadlessToggle } from '@qwik-ui/headless'; -const toggleVariants = cva( - 'inline-flex items-center justify-center rounded-base text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground', +export const toggleVariants = cva( + 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-[pressed=true]:bg-primary aria-[pressed=true]:text-accent-foreground', { variants: { - variant: { - default: 'bg-transparent', + look: { + default: 'border border-input bg-transparent', outline: - 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground', + 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground', }, + size: { - default: 'h-9 px-3', - sm: 'h-8 px-2', - lg: 'h-10 px-3', + default: 'h-10 px-3', + sm: 'h-9 px-2.5', + lg: 'h-11 px-5', }, }, defaultVariants: { - variant: 'default', + look: 'default', size: 'default', }, }, ); -const Toggle = component$(({ variant, size, ...props }) => ( - -)); +type ToggleProps = PropsOf & VariantProps; -export { Toggle, toggleVariants }; +export const Toggle = component$(({ size, look, ...props }) => { + return ( + + + + ); +}); diff --git a/packages/kit-styled/src/index.ts b/packages/kit-styled/src/index.ts index a81e53d3f..6c2b24bf7 100644 --- a/packages/kit-styled/src/index.ts +++ b/packages/kit-styled/src/index.ts @@ -19,4 +19,5 @@ export * from './components/skeleton/skeleton'; export * from './components/tabs/tabs'; export * from './components/textarea/textarea'; export * from './components/toggle/toggle'; +export * from './components/toggle-group/toggle-group'; export * from './components/dropdown/dropdown'; From f59e1831b783fdb96428c1eeefb69023a7cad980 Mon Sep 17 00:00:00 2001 From: Arkadi Koifman <76536506+ArkadiK94@users.noreply.github.com> Date: Sun, 15 Sep 2024 18:19:08 +0300 Subject: [PATCH 08/27] feat: vertical carousel option (#948) * feat: add direction and maxSlideHeight props for adjusting the carousel to be vertical why: 'direction' prop for changing the direction, 'maxSlideHeight' for limiting the container of the carousel how: add these two props and change styles accordingly * chore: add directionSig to context * docs: add the vertical-direction section to docs why: so users could see that it is possible to make it vertical * feat: add the scrollable option for the vertical carousel how: check for see if it is a vertical carousel and if so adjust the scrolling direction in the scroller component * refactor: make the scroller component checks cleaner * docs: add the needed props for vertical carousel under API in docs * test: add test for swiping up vertical carousel * chore: add changeset file * chore: remove changeset file why: no need here * fix: some minor fixes * docs: place the vertical direction section in right way * fix: change the slide offsetTop of slide in vertical carousel when touch event triggered why: the index was not updated as needed * test: add touch screen test for swiping vertical carousel * test: add touchEvent tests for vertical carousel what: one test for swiping and one for check that the slide index updates --- .../headless/carousel/examples/carousel.css | 3 +- .../carousel/examples/vertical-direction.tsx | 27 ++++ .../routes/docs/headless/carousel/index.mdx | 25 +++- .../src/components/carousel/carousel.css | 6 +- .../src/components/carousel/carousel.test.ts | 119 ++++++++++++++++++ .../src/components/carousel/context.ts | 1 + .../src/components/carousel/root.tsx | 18 +++ .../src/components/carousel/scroller.tsx | 55 +++++--- 8 files changed, 230 insertions(+), 24 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/vertical-direction.tsx diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index 05e3ad931..ce8bc10a9 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -9,7 +9,7 @@ .carousel-slide { border: 2px dotted hsl(var(--primary)); min-height: 10rem; - margin-top: 0.5rem; + -webkit-user-select: none; /* support for Safari */ user-select: none; } @@ -24,6 +24,7 @@ display: flex; justify-content: space-between; border: 2px dotted hsl(var(--accent)); + margin-bottom: 0.5rem; } .carousel-buttons button { diff --git a/apps/website/src/routes/docs/headless/carousel/examples/vertical-direction.tsx b/apps/website/src/routes/docs/headless/carousel/examples/vertical-direction.tsx new file mode 100644 index 000000000..03efc3907 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/vertical-direction.tsx @@ -0,0 +1,27 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + return ( + +
+ Prev + Next +
+ + {colors.map((color) => ( + + {color} + + ))} + + + ); +}); + +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index 632ff9d46..0f3e9ff17 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -50,9 +50,11 @@ On coarse devices and when getting initial slide positions, Qwik UI combines CSS [data-qui-carousel-scroller] { overflow: hidden; display: flex; + flex-direction: var(--direction); gap: var(--gap); + max-height: var(--max-slide-height); /* for mobile & scroll-snap-start */ - scroll-snap-type: x mandatory; + scroll-snap-type: both mandatory; } [data-qui-carousel-slide] { @@ -67,7 +69,7 @@ On coarse devices and when getting initial slide positions, Qwik UI combines CSS @media (pointer: coarse) { [data-qui-carousel-scroller][data-draggable] { - overflow-x: scroll; + overflow: scroll; } /* make sure snap align is added after initial index animation */ @@ -140,6 +142,13 @@ To change this, use the `flex-basis` CSS property on the `` co +### Vertical Direction + +Qwik UI supports vertical carousels. +Set the `direction` prop to `column ` and define `maxSlideHeight` prop in px, for making the vertical carousel. + + + ### No Scroll Qwik UI supports carousels without a scroller, which can be useful for conditional slide carousels. @@ -318,5 +327,17 @@ In the above example, we also use the headless progress component to show the pr type: 'number', description: 'Time in milliseconds before the next slide plays during autoplay.', }, + { + name: 'direction', + type: 'union', + description: + 'Change the direction of the carousel, for it to be veritical define the maxSlideHeight prop as well.', + info: '"row" | "column"', + }, + { + name: 'maxSlideHeight', + type: 'number', + description: 'Write the height of the longest slide.', + }, ]} /> diff --git a/packages/kit-headless/src/components/carousel/carousel.css b/packages/kit-headless/src/components/carousel/carousel.css index 91aa581ef..4017377e8 100644 --- a/packages/kit-headless/src/components/carousel/carousel.css +++ b/packages/kit-headless/src/components/carousel/carousel.css @@ -2,9 +2,11 @@ [data-qui-carousel-scroller] { overflow: hidden; display: flex; + flex-direction: var(--direction); gap: var(--gap); + max-height: var(--max-slide-height); /* for mobile & scroll-snap-start */ - scroll-snap-type: x mandatory; + scroll-snap-type: both mandatory; } [data-qui-carousel-slide] { @@ -19,7 +21,7 @@ @media (pointer: coarse) { [data-qui-carousel-scroller][data-draggable] { - overflow-x: scroll; + overflow: scroll; } /* make sure snap align is added after initial index animation */ diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index c43c83881..8a8e165fd 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -444,6 +444,97 @@ test.describe('Mobile / Touch Behavior', () => { expect(Math.abs(secondSlideBox.x - scrollerBox.x)).toBeLessThan(1); // Allow 1px tolerance }); + test(`GIVEN a mobile vertical carousel + WHEN swiping to the next slide + Then the next slide should snap to the top side of the scroller`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'vertical-direction'); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + const boundingBox = await d.getSlideBoundingBoxAt(0); + const cdpSession = await page.context().newCDPSession(page); + + const startY = boundingBox.y + boundingBox.height * 0.8; + const endY = boundingBox.y; + const x = boundingBox.x + boundingBox.width / 2; + + // touch events + await page.touchscreen.tap(x, startY); + + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchStart', + touchPoints: [{ x, y: startY }], + }); + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchMove', + touchPoints: [{ x, y: endY }], + }); + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchEnd', + touchPoints: [{ x, y: startY }], + }); + + await page.touchscreen.tap(x, endY); + await page.touchscreen.tap(x, startY); // tap the slide to make it visible + await expect(d.getSlideAt(1)).toBeVisible(); + + await cdpSession.detach(); + const scrollerBox = await d.getScrollerBoundingBox(); + const secondSlideBox = await d.getSlideBoundingBoxAt(1); + + expect(Math.abs(secondSlideBox.y - scrollerBox.y)).toBeLessThan(1); // Allow 1px tolerance + }); + + test(`GIVEN a mobile vertical carousel + WHEN swiping two times to the next slide and clicking next button + Then the third slide should be visible`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical-direction'); + + await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + const boundingBox = await d.getSlideBoundingBoxAt(0); + const cdpSession = await page.context().newCDPSession(page); + + const startY = boundingBox.y + boundingBox.height * 0.99; + const endY = boundingBox.y; + const x = boundingBox.x + boundingBox.width / 2; + + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchStart', + touchPoints: [{ x, y: startY }], + }); + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchMove', + touchPoints: [{ x, y: endY }], + }); + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchEnd', + touchPoints: [{ x, y: startY }], + }); + await expect(d.getSlideAt(1)).toBeVisible(); + + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchStart', + touchPoints: [{ x, y: startY }], + }); + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchMove', + touchPoints: [{ x, y: endY }], + }); + await cdpSession.send('Input.dispatchTouchEvent', { + type: 'touchEnd', + touchPoints: [{ x, y: startY }], + }); + + await cdpSession.detach(); + + await expect(d.getSlideAt(2)).toBeVisible(); + + await d.getNextButton().tap(); + + expect(d.getSlideAt(3)).toHaveAttribute('data-active'); + }); + test(`GIVEN a mobile carousel WHEN tapping the next button THEN the next slide should snap to the left side of the scroller`, async ({ @@ -865,6 +956,34 @@ test.describe('State', () => { await expect(progressBar).toHaveAttribute('aria-valuetext', '17%'); }); + + test(`GIVEN a carousel with direction column and max slide height declared + WHEN the swipe up or down + THEN the attribute should move to the right slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical-direction'); + d; + + const visibleSlide = d.getSlideAt(0); + + const slideBox = await visibleSlide.boundingBox(); + + if (slideBox) { + const startX = slideBox.x + slideBox.width / 2; + const startY = slideBox.y + slideBox.height / 2; + + // swipe up from the middle of the visible slide + await page.mouse.move(startX, startY); + await page.mouse.down(); + await page.mouse.move(startX, -startY, { steps: 10 }); + + // finish the swiping and move the mouse back + await page.mouse.up(); + await page.mouse.move(startX, startY, { steps: 10 }); + } + // checking that the slide changed + expect(d.getSlideAt(0)).not.toHaveAttribute('data-active'); + }); }); test.describe('Stepper', () => { diff --git a/packages/kit-headless/src/components/carousel/context.ts b/packages/kit-headless/src/components/carousel/context.ts index cb47ad33d..53cfb2d07 100644 --- a/packages/kit-headless/src/components/carousel/context.ts +++ b/packages/kit-headless/src/components/carousel/context.ts @@ -24,6 +24,7 @@ export type CarouselContext = { alignSig: Signal<'start' | 'center' | 'end'>; isLoopSig: Signal; autoPlayIntervalMsSig: Signal; + directionSig: Signal<'row' | 'column'>; startIndex: number | undefined; isStepInteractionSig: Signal; }; diff --git a/packages/kit-headless/src/components/carousel/root.tsx b/packages/kit-headless/src/components/carousel/root.tsx index 6e8229581..630099028 100644 --- a/packages/kit-headless/src/components/carousel/root.tsx +++ b/packages/kit-headless/src/components/carousel/root.tsx @@ -56,6 +56,11 @@ export type CarouselRootProps = PropsOf<'div'> & { /** @internal Whether this carousel has a title */ _isTitle?: boolean; + /** The carousel's orientation */ + direction?: 'row' | 'column'; + + /** The slider height */ + maxSlideHeight?: number | undefined; /** Allows the user to navigate steps when interacting with the stepper */ stepInteraction?: boolean; }; @@ -84,6 +89,7 @@ export const CarouselBase = component$( startIndex ?? 0, ); const isScrollerSig = useSignal(false); + const directionSig = useSignal(() => props.direction ?? 'row'); const isAutoplaySig = useBoundSignal(givenAutoplaySig, false); const getInitialProgress = () => { @@ -98,6 +104,7 @@ export const CarouselBase = component$( const alignSig = useComputed$(() => props.align ?? 'start'); const isLoopSig = useComputed$(() => props.loop ?? false); const autoPlayIntervalMsSig = useComputed$(() => props.autoPlayIntervalMs ?? 0); + const maxSlideHeight = useComputed$(() => props.maxSlideHeight ?? undefined); const progressSig = useBoundSignal(givenProgressSig, getInitialProgress()); const isStepInteractionSig = useComputed$(() => props.stepInteraction ?? false); @@ -122,6 +129,7 @@ export const CarouselBase = component$( alignSig, isLoopSig, autoPlayIntervalMsSig, + directionSig, startIndex, isStepInteractionSig, }; @@ -130,6 +138,14 @@ export const CarouselBase = component$( useContextProvider(carouselContextId, context); + // Max Height needed for making vertical carousel + useTask$(({ track }) => { + track(() => maxSlideHeight.value); + if (!maxSlideHeight.value) { + directionSig.value = 'row'; + } + }); + useTask$(({ track }) => { if (!givenProgressSig) return; track(() => currentIndexSig.value); @@ -155,6 +171,8 @@ export const CarouselBase = component$( '--slides-per-view': slidesPerViewSig.value, '--gap': `${gapSig.value}px`, '--scroll-snap-align': alignSig.value, + '--direction': directionSig.value, + '--max-slide-height': `${maxSlideHeight.value}px`, }} > diff --git a/packages/kit-headless/src/components/carousel/scroller.tsx b/packages/kit-headless/src/components/carousel/scroller.tsx index 8fff99e2b..9f7a9cc62 100644 --- a/packages/kit-headless/src/components/carousel/scroller.tsx +++ b/packages/kit-headless/src/components/carousel/scroller.tsx @@ -18,13 +18,14 @@ type CarouselContainerProps = PropsOf<'div'>; export const CarouselScroller = component$((props: CarouselContainerProps) => { const context = useContext(carouselContextId); useStyles$(styles); - const startXSig = useSignal(); - const scrollLeftSig = useSignal(0); + const startPositionSig = useSignal(); + const scrollInDirectionSig = useSignal(0); const isMouseDownSig = useSignal(false); const isMouseMovingSig = useSignal(false); const isTouchDeviceSig = useSignal(false); const isTouchMovingSig = useSignal(true); const isTouchStartSig = useSignal(false); + const isHorizontal = context.directionSig.value === 'row'; useTask$(() => { context.isScrollerSig.value = true; @@ -37,29 +38,36 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { let position = 0; for (let i = 0; i < index; i++) { if (slides[i].value) { - position += slides[i].value.getBoundingClientRect().width + context.gapSig.value; + position += + slides[i].value.getBoundingClientRect()[isHorizontal ? 'width' : 'height'] + + context.gapSig.value; } } - const alignment = context.alignSig.value; if (alignment === 'center') { - position -= - (container.clientWidth - slides[index].value.getBoundingClientRect().width) / 2; + position -= isHorizontal + ? (container.clientWidth - slides[index].value.getBoundingClientRect().width) / 2 + : (container.clientHeight - slides[index].value.getBoundingClientRect().height) / + 2; } else if (alignment === 'end') { - position -= - container.clientWidth - slides[index].value.getBoundingClientRect().width; + position -= isHorizontal + ? container.clientWidth - slides[index].value.getBoundingClientRect().width + : container.clientHeight - slides[index].value.getBoundingClientRect().height; } return Math.max(0, position); }); const handleMouseMove$ = $((e: MouseEvent) => { - if (!isMouseDownSig.value || startXSig.value === undefined) return; + if (!isMouseDownSig.value || startPositionSig.value === undefined) return; if (!context.scrollerRef.value) return; - const x = e.pageX - context.scrollerRef.value.offsetLeft; + const position = isHorizontal + ? e.pageX - context.scrollerRef.value.offsetLeft + : e.pageY - context.scrollerRef.value.offsetTop; const dragSpeed = 1.75; - const walk = (x - startXSig.value) * dragSpeed; - context.scrollerRef.value.scrollLeft = scrollLeftSig.value - walk; + const walk = (position - startPositionSig.value) * dragSpeed; + context.scrollerRef.value[isHorizontal ? 'scrollLeft' : 'scrollTop'] = + scrollInDirectionSig.value - walk; isMouseMovingSig.value = true; }); @@ -70,14 +78,15 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const container = context.scrollerRef.value; const slides = context.slideRefsArray.value; - const containerScrollLeft = container.scrollLeft; + const containerScrollInDirection = + container[isHorizontal ? 'scrollLeft' : 'scrollTop']; let closestIndex = 0; let minDistance = Infinity; for (let i = 0; i < slides.length; i++) { const slidePosition = await getSlidePosition$(i); - const distance = Math.abs(containerScrollLeft - slidePosition); + const distance = Math.abs(containerScrollInDirection - slidePosition); if (distance < minDistance) { closestIndex = i; minDistance = distance; @@ -88,6 +97,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { container.scrollTo({ left: dragSnapPosition, + top: dragSnapPosition, behavior: 'smooth', }); @@ -102,8 +112,11 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { } isMouseDownSig.value = true; - startXSig.value = e.pageX - context.scrollerRef.value.offsetLeft; - scrollLeftSig.value = context.scrollerRef.value.scrollLeft; + startPositionSig.value = isHorizontal + ? e.pageX - context.scrollerRef.value.offsetLeft + : e.pageY - context.scrollerRef.value.offsetTop; + scrollInDirectionSig.value = + context.scrollerRef.value[isHorizontal ? 'scrollLeft' : 'scrollTop']; window.addEventListener('mousemove', handleMouseMove$); window.addEventListener('mouseup', handleMouseSnap$); isMouseMovingSig.value = false; @@ -129,6 +142,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { context.scrollerRef.value.scrollTo({ left: nonDragSnapPosition, + top: nonDragSnapPosition, behavior: 'smooth', }); @@ -138,7 +152,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const updateTouchDeviceIndex$ = $(() => { if (!context.scrollerRef.value) return; const container = context.scrollerRef.value; - const containerScrollLeft = container.scrollLeft; + const containerScrollDirection = container[isHorizontal ? 'scrollLeft' : 'scrollTop']; const slides = context.slideRefsArray.value; let currentIndex = 0; @@ -146,8 +160,10 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { slides.forEach((slideRef, index) => { if (!slideRef.value) return; - const slideLeft = slideRef.value.offsetLeft; - const distance = Math.abs(containerScrollLeft - slideLeft); + const slideInDirection = isHorizontal + ? slideRef.value['offsetLeft'] + : slideRef.value['offsetTop'] - slideRef.value.parentElement['offsetTop']; // get the offsetTop from the top of the current carousel + const distance = Math.abs(containerScrollDirection - slideInDirection); if (distance < minDistance) { minDistance = distance; currentIndex = index; @@ -165,6 +181,7 @@ export const CarouselScroller = component$((props: CarouselContainerProps) => { const newPosition = await getSlidePosition$(context.currentIndexSig.value); context.scrollerRef.value.scrollTo({ left: newPosition, + top: newPosition, behavior: 'auto', }); }); From f1ea4f33956c068ceeb49da44b2d3924153dd716 Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:53:10 -0500 Subject: [PATCH 09/27] feat: migrate the carousel to transforms (#963) * feat: get custom scroll for mouse and update * refactor: remove drag speed * refactor: add back drag speed * feat: one scroll model * fix: clean up a bit * fix: dumb timeouts * without animateScroll$ * does transform walking * feat: correct drag direction * initial snapping * correct snapping * works with next and prev * add will change transform * custom animations except for initial load * user defined transitions work * fix: resize * mobile sorta works * smoother on mobile * fix: simplify scroller impl * narrowed down problem * mobile working * handle x, y, or z * working in an agnostic way * cleanup markup and props * get initial slide position * refactor: add comment on qvisible * feat: no flicker getting initial slide * teeny flicker but with animations * feat: no more flicker * feat: handle initial slide pos for any orientation * feat: respect transform boundaries * fix: carousel start index * fix: progress * fix: make sure there are no duplicate handler calls * fix: respect boundaries * refactor: make carousel scroller easier to understand * fix: remove the viewport from the equation * fix: smoother swiping experience * feat: sensitivity * feat: initial move impl * fix: only calculate pos when it's not the start * feat: renders correct bullets based on slides per view * feat: proper bullet navigation * feat: bullets are smart enough to know if something is in range * feat: prev and next buttons both work with move * fix: state tests * feat: initial vertical * fix: offset for vertical version * feat: vertical with transform * fix: touch start moves according to touchY in vertical * refactor: better naming * refactor: code more easy to understand * refactored names * refactor: use props map instead * fix: initial slide position vertically * fix: don't render marker points with non-scroller carousels * feat: start docs * fix: text align * docs: add example animation * feat: upgrade carousel to beta * fix: the merge issues --- apps/website/src/_state/component-statuses.ts | 2 +- .../components/feature-list/feature-list.tsx | 2 +- .../src/routes/docs/contributing/index.mdx | 10 +- .../headless/carousel/examples/animate.tsx | 26 ++ .../headless/carousel/examples/carousel.css | 13 +- .../docs/headless/carousel/examples/move.tsx | 52 +++ .../headless/carousel/examples/reactive.tsx | 2 +- .../examples/{loop.tsx => rewind.tsx} | 2 +- .../carousel/examples/sensitivity.tsx | 33 ++ .../docs/headless/carousel/examples/start.tsx | 30 ++ .../carousel/examples/vertical-direction.tsx | 7 +- .../routes/docs/headless/carousel/index.mdx | 160 ++++--- .../src/components/carousel/bullet.tsx | 56 ++- .../src/components/carousel/carousel.css | 75 +-- .../src/components/carousel/carousel.test.ts | 436 +++++++++--------- .../src/components/carousel/context.ts | 10 +- .../src/components/carousel/next.tsx | 30 +- .../src/components/carousel/previous.tsx | 45 +- .../src/components/carousel/root.tsx | 251 +++++----- .../src/components/carousel/scroller.tsx | 293 ++++++------ .../src/components/carousel/slide.tsx | 44 +- .../src/components/carousel/use-carousel.tsx | 24 +- .../src/components/carousel/use-scroller.tsx | 156 +++++++ .../kit-headless/src/utils/bound-signal.tsx | 22 +- 24 files changed, 1146 insertions(+), 635 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/animate.tsx create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/move.tsx rename apps/website/src/routes/docs/headless/carousel/examples/{loop.tsx => rewind.tsx} (94%) create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/sensitivity.tsx create mode 100644 apps/website/src/routes/docs/headless/carousel/examples/start.tsx create mode 100644 packages/kit-headless/src/components/carousel/use-scroller.tsx diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts index 93da6bd5c..d1fdf99d7 100644 --- a/apps/website/src/_state/component-statuses.ts +++ b/apps/website/src/_state/component-statuses.ts @@ -38,7 +38,7 @@ export const statusByComponent: ComponentKitsStatuses = { }, headless: { Accordion: ComponentStatus.Beta, - Carousel: ComponentStatus.Draft, + Carousel: ComponentStatus.Beta, Collapsible: ComponentStatus.Beta, Combobox: ComponentStatus.Beta, Checkbox: ComponentStatus.Draft, diff --git a/apps/website/src/components/feature-list/feature-list.tsx b/apps/website/src/components/feature-list/feature-list.tsx index 87bce4830..6e276138c 100644 --- a/apps/website/src/components/feature-list/feature-list.tsx +++ b/apps/website/src/components/feature-list/feature-list.tsx @@ -68,7 +68,7 @@ export const FeatureList = component$((props: FeatureListProps) => { {!props.issues && ( Missing a feature? Check out the{' '} - + contributing guide {' '} and we'd be happy to review any relevant issues or PR's. Feel free to work on diff --git a/apps/website/src/routes/docs/contributing/index.mdx b/apps/website/src/routes/docs/contributing/index.mdx index 05ee6f3c3..d90b6739a 100644 --- a/apps/website/src/routes/docs/contributing/index.mdx +++ b/apps/website/src/routes/docs/contributing/index.mdx @@ -379,11 +379,7 @@ Notice how `` returns a `children` prop. This is because inline c Context and hooks is still easy to use, create a new component called `` and return that instead of the div (with the children passed between) in the example above. From there, you can use context, hooks, and all the other Qwik goodies as a top level component. ```tsx -return ( - - {props.children} - -) +return {props.children}; // use hooks, context, and other stuff here! export const ExampleBase = component$(() => { @@ -391,8 +387,8 @@ export const ExampleBase = component$(() => {
- ) -}) + ); +}); ``` ## That's it! diff --git a/apps/website/src/routes/docs/headless/carousel/examples/animate.tsx b/apps/website/src/routes/docs/headless/carousel/examples/animate.tsx new file mode 100644 index 000000000..7c634a5d7 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/animate.tsx @@ -0,0 +1,26 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + return ( + +
+ Prev + Next +
+ + {colors.map((color) => ( + + {color} + + ))} + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css index ce8bc10a9..b39762a16 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/carousel.css +++ b/apps/website/src/routes/docs/headless/carousel/examples/carousel.css @@ -2,13 +2,10 @@ width: 100%; } -.carousel-scroller { - margin-bottom: 0.5rem; -} - .carousel-slide { border: 2px dotted hsl(var(--primary)); min-height: 10rem; + max-height: 10rem; -webkit-user-select: none; /* support for Safari */ user-select: none; } @@ -18,6 +15,7 @@ gap: 0.5rem; padding: 1rem; border: 2px dotted hsl(var(--foreground)); + margin-top: 0.5rem; } .carousel-buttons { @@ -25,6 +23,7 @@ justify-content: space-between; border: 2px dotted hsl(var(--accent)); margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } .carousel-buttons button { @@ -76,6 +75,8 @@ .carousel-stepper { display: flex; justify-content: space-between; + margin-bottom: 0.5rem; + flex-wrap: wrap; } .carousel-step { @@ -100,3 +101,7 @@ .carousel-step[data-current]::before { background-color: hsl(var(--primary)); } + +.carousel-animation { + transition: 0.35s transform cubic-bezier(0.57, 0.16, 0.95, 0.67); +} diff --git a/apps/website/src/routes/docs/headless/carousel/examples/move.tsx b/apps/website/src/routes/docs/headless/carousel/examples/move.tsx new file mode 100644 index 000000000..38accb7cb --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/move.tsx @@ -0,0 +1,52 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + useStyles$(` + .carousel-circle { + width: 20px; + height: 20px; + margin: 0 5px; + border-radius: 50%; + background-color: lightgray; + } + + .carousel-circle[data-active] { + background-color: lightblue; + } + `); + + return ( + <> + +
+ Prev + Next +
+ + {colors.map((color) => ( + + {color} + + ))} + + + + {colors.map((_, index) => { + return ( + + ); + })} + + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/reactive.tsx b/apps/website/src/routes/docs/headless/carousel/examples/reactive.tsx index b05735d6b..38ed1a7a0 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/reactive.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/reactive.tsx @@ -5,7 +5,7 @@ export default component$(() => { useStyles$(styles); const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; - const selectedIndex = useSignal(0); + const selectedIndex = useSignal(2); return ( <> diff --git a/apps/website/src/routes/docs/headless/carousel/examples/loop.tsx b/apps/website/src/routes/docs/headless/carousel/examples/rewind.tsx similarity index 94% rename from apps/website/src/routes/docs/headless/carousel/examples/loop.tsx rename to apps/website/src/routes/docs/headless/carousel/examples/rewind.tsx index 23b4588ca..10bed5d21 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/loop.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/rewind.tsx @@ -7,7 +7,7 @@ export default component$(() => { const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; return ( - +
Prev Next diff --git a/apps/website/src/routes/docs/headless/carousel/examples/sensitivity.tsx b/apps/website/src/routes/docs/headless/carousel/examples/sensitivity.tsx new file mode 100644 index 000000000..6fc8378a7 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/sensitivity.tsx @@ -0,0 +1,33 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + return ( + +
+ Prev + Next +
+ + {colors.map((color) => ( + + {color} + + ))} + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/start.tsx b/apps/website/src/routes/docs/headless/carousel/examples/start.tsx new file mode 100644 index 000000000..f6e8d1ec3 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/examples/start.tsx @@ -0,0 +1,30 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Carousel } from '@qwik-ui/headless'; + +export default component$(() => { + useStyles$(styles); + + const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; + + return ( + +
+ Prev + Next +
+ + {colors.map((color) => ( + + {color} + + ))} + + + ); +}); +// internal +import styles from './carousel.css?inline'; diff --git a/apps/website/src/routes/docs/headless/carousel/examples/vertical-direction.tsx b/apps/website/src/routes/docs/headless/carousel/examples/vertical-direction.tsx index 03efc3907..e209ffa52 100644 --- a/apps/website/src/routes/docs/headless/carousel/examples/vertical-direction.tsx +++ b/apps/website/src/routes/docs/headless/carousel/examples/vertical-direction.tsx @@ -7,7 +7,12 @@ export default component$(() => { const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink']; return ( - +
Prev Next diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index 0f3e9ff17..a0e32da50 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -8,7 +8,7 @@ import { Note } from '~/components/note/note'; # Carousel -Displays multiple content items in one space, rotating through them. +Display and navigate through multiple content items. @@ -23,7 +23,7 @@ Displays multiple content items in one space, rotating through them. 'Pagination with bullet navigation', 'Navigate via Previous/Next buttons', 'Autoplay functionality', - 'Looping option', + 'Rewind option', 'Support for multiple slides per view', 'Reactive slide updates', 'Initial slide selection', @@ -31,62 +31,38 @@ Displays multiple content items in one space, rotating through them. 'Customizable accessible names', 'Supports carousels with or without scrollers', 'Optionally exposed as an accessible stepper', + 'Supports custom animations', + 'Integrates with progress bars and other components', ]} /> -## Why use the Qwik UI Carousel? +## Why use the Qwik UI Carousel -### CSS Scroll snapping +### HTML until users care -On coarse devices and when getting initial slide positions, Qwik UI combines CSS scroll snapping and flexbox for an optimized swiping experience: +The Carousel is a common widget in landing pages and SSR-rendered environments (even above the fold). Unlike many carousel libraries that rely on heavy JavaScript hydration, our implementation is designed to be: -- Scroll snapping: Used on mobile for smooth touch interactions and initial snap position. -- Flexbox: Provides a simple layout system for variable widths, gaps, and columns. +- Environment agnostic (automatically SSR or CSR) +- HTML-first +- JavaScript-enhanced on interaction -> Styles are in an @layer for easy customization: +The Carousel remains lightweight HTML until users interact with it through swiping, dragging, clicking, etc. -```css -@layer qwik-ui { - [data-qui-carousel-scroller] { - overflow: hidden; - display: flex; - flex-direction: var(--direction); - gap: var(--gap); - max-height: var(--max-slide-height); - /* for mobile & scroll-snap-start */ - scroll-snap-type: both mandatory; - } +### Hardware acceleration - [data-qui-carousel-slide] { - /* default, feel free to override */ - --total-gap-width: calc(var(--gap) * (var(--slides-per-view) - 1)); - --available-slide-width: calc(100% - var(--total-gap-width)); - --slide-width: calc(var(--available-slide-width) / var(--slides-per-view)); +Initially, this component was built with normal scroll behavior (including CSS Scroll Snapping), but our testing found it to be janky on mobile the moment a custom animation was added. - flex-basis: var(--slide-width); - flex-shrink: 0; - } +> CSS Scroll snapping also currently does not support mouse drag. - @media (pointer: coarse) { - [data-qui-carousel-scroller][data-draggable] { - overflow: scroll; - } +The Qwik UI Carousel uses `CSS transforms` and `will-change` for smooth, hardware-accelerated animations, optimizing performance across devices, especially on mobile. - /* make sure snap align is added after initial index animation */ - [data-draggable][data-initial-touch] [data-qui-carousel-slide] { - scroll-snap-align: start; - } +### Design Decisions - [data-draggable][data-align='center'][data-initial-touch] [data-qui-carousel-slide] { - scroll-snap-align: center; - } +The Qwik UI Carousel is designed with the following intentions: - [data-draggable][data-align='end'][data-initial-touch] [data-qui-carousel-slide] { - scroll-snap-align: end; - } - } -} -``` +- Consistency with Qwik UI's API design for ease of use +- Modularity to support various use cases +- Extendable with custom components ## Alignment Options @@ -94,7 +70,7 @@ On coarse devices and when getting initial slide positions, Qwik UI combines CSS The default alignment is `start`. Slides will snap to the left edge of the carousel. - + ### Center Alignment @@ -128,6 +104,12 @@ Set the `slidesPerView` prop for multiple slides. +### Vertical + +Qwik UI supports vertical carousels. Add the `orientation` prop with the value of `vertical` to the `` component. + + + ### Non-draggable Opt-out of the draggable behavior by setting the `draggable` prop to `false`. @@ -142,12 +124,23 @@ To change this, use the `flex-basis` CSS property on the `` co -### Vertical Direction +### Sensitivity -Qwik UI supports vertical carousels. -Set the `direction` prop to `column ` and define `maxSlideHeight` prop in px, for making the vertical carousel. +You can customize the sensitivity of the carousel dragging by passing an object with `mouse` and `touch` properties. - + + +The default values are `1.5` for `mouse` and `1.25` for `touch`. + +> The example above uses `2.5` for `mouse` and `2.25` for `touch`. + +### Move + +You can customize the amount of slides to move when hitting the next or previous button by passing a number. + + + +The default value is `1`. ### No Scroll @@ -187,13 +180,13 @@ Both SSR and CSR are supported. In this example, we conditionally render the car -### Loop +### Rewind -Loop the carousel by setting the `loop` prop to `true`. +Rewind the carousel by setting the `rewind` prop to `true`. - + -> When looping, navigation buttons are never disabled. +> When rewinding, navigation buttons are never disabled. ### Autoplay @@ -227,6 +220,20 @@ Use a visible task to change the signal passed to `bind:autoplay` to `true` when ``` +### Custom scroll animations + +To create a custom animation, use a CSS transition on the scroller with the `transform` property. + + + +```css +.carousel-animation { + transition: 0.35s transform cubic-bezier(0.57, 0.16, 0.95, 0.67); +} +``` + +> Want to help make animations extend to keyframes and other goodies? Reach out to Jack in the [discord](https://discord.gg/3Vej3ehVVQ). + ## Configurations ### Pagination @@ -275,6 +282,49 @@ You can also control the progress of the carousel by using the `bind:progress` p In the above example, we also use the headless progress component to show the progress of the carousel. +### Initial Styles + +> Styles are in an @layer for easy customization: + +```css +@layer qwik-ui { + [data-qui-carousel-viewport] { + overflow: hidden; + } + + [data-qui-carousel-scroller] { + transform: var(--transform); + will-change: transform; + transition: 0.3s transform ease-out; + + display: flex; + gap: var(--gap); + flex-direction: var(--orientation); + + /* for initial slide position */ + scroll-snap-type: both mandatory; + max-height: calc(var(--max-slide-height)); + } + + [data-qui-carousel-slide] { + /* default, feel free to override */ + --total-gap-width: calc(var(--gap) * (var(--slides-per-view) - 1)); + --available-slide-width: calc(100% - var(--total-gap-width)); + --slide-width: calc(var(--available-slide-width) / var(--slides-per-view)); + + flex-basis: var(--slide-width); + flex-shrink: 0; + position: relative; + } + + @media (prefers-reduced-motion: reduce) { + [data-qui-carousel-player] { + display: none; + } + } +} +``` + ## API ### Carousel.Root @@ -303,9 +353,9 @@ In the above example, we also use the headless progress component to show the pr info: '"start" | "center" | "end"', }, { - name: 'loop', + name: 'rewind', type: 'boolean', - description: 'Whether the carousel should loop.', + description: 'Whether the carousel should rewind.', }, { name: 'bind:selectedIndex', diff --git a/packages/kit-headless/src/components/carousel/bullet.tsx b/packages/kit-headless/src/components/carousel/bullet.tsx index c638d0099..1e3296ba8 100644 --- a/packages/kit-headless/src/components/carousel/bullet.tsx +++ b/packages/kit-headless/src/components/carousel/bullet.tsx @@ -7,8 +7,10 @@ import { useTask$, useSignal, sync$, + useComputed$, } from '@builder.io/qwik'; import { carouselContextId } from './context'; +import { useCarousel } from './use-carousel'; type BulletProps = PropsOf<'button'> & { _index?: number; @@ -20,6 +22,8 @@ export const CarouselBullet = component$(({ _index, ...props }: BulletProps) => const slideId = `${context.localId}-${_index ?? -1}`; const isRenderedSig = useSignal(true); + const { validIndexesSig } = useCarousel(context); + useTask$(function getIndexOrder() { if (_index !== undefined) { context.bulletRefsArray.value[_index] = bulletRef; @@ -44,46 +48,56 @@ export const CarouselBullet = component$(({ _index, ...props }: BulletProps) => } }); - const handleKeyDown$ = $((e: KeyboardEvent) => { + const handleKeyDown$ = $(async (e: KeyboardEvent) => { const usedKeys = ['ArrowRight', 'ArrowLeft', 'Home', 'End']; - if (typeof _index !== 'number' || !usedKeys.includes(e.key)) return; + const validIndexes = validIndexesSig.value; + const lastScrollableIndex = validIndexes[validIndexes.length - 1]; + if (e.key === 'Home') { - context.currentIndexSig.value = 0; - context.bulletRefsArray.value[0].value.focus(); + context.currentIndexSig.value = validIndexes[0]; + context.bulletRefsArray.value[validIndexes[0]].value.focus(); return; } if (e.key === 'End') { - const lastIndex = context.numSlidesSig.value - 1; - context.currentIndexSig.value = lastIndex; - context.bulletRefsArray.value[lastIndex].value.focus(); + context.currentIndexSig.value = lastScrollableIndex; + context.bulletRefsArray.value[lastScrollableIndex].value.focus(); return; } - const totalBullets = context.bulletRefsArray.value.length; const direction = e.key === 'ArrowRight' ? 1 : -1; - let newIndex = _index + direction; + const currentPosition = validIndexes.indexOf(_index); + let newPosition = currentPosition + direction; - if (context.isLoopSig.value) { - newIndex = (newIndex + totalBullets) % totalBullets; + if (context.isRewindSig.value) { + newPosition = (newPosition + validIndexes.length) % validIndexes.length; } else { - newIndex = Math.max(0, Math.min(newIndex, totalBullets - 1)); + newPosition = Math.max(0, Math.min(newPosition, validIndexes.length - 1)); } + const newIndex = validIndexes[newPosition]; + context.currentIndexSig.value = newIndex; context.bulletRefsArray.value[newIndex].value.focus(); }); - useTask$(function renderAvailableBullets() { - const lastScrollableIndex = - context.numSlidesSig.value - context.slidesPerViewSig.value; - + useTask$(async function renderAvailableBullets() { if (typeof _index !== 'number') return; + const validIndexes = validIndexesSig.value; + isRenderedSig.value = validIndexes.includes(_index); + }); - if (_index > lastScrollableIndex) { - isRenderedSig.value = false; - } + const isActiveBulletSig = useComputed$(() => { + if (typeof _index !== 'number' || !validIndexesSig.value.includes(_index)) + return false; + const currentIndex = context.currentIndexSig.value; + const nextBulletIndex = + validIndexesSig.value[validIndexesSig.value.indexOf(_index) + 1]; + return ( + currentIndex >= _index && + (nextBulletIndex === undefined || currentIndex < nextBulletIndex) + ); }); return ( @@ -94,8 +108,8 @@ export const CarouselBullet = component$(({ _index, ...props }: BulletProps) => tabIndex={_index === context.currentIndexSig.value ? 0 : -1} aria-label={`${_index !== undefined && `Slide ${_index + 1}`}`} aria-controls={slideId} - data-active={context.currentIndexSig.value === _index ? '' : undefined} - aria-selected={context.currentIndexSig.value === _index ? true : false} + data-active={isActiveBulletSig.value ? '' : undefined} + aria-selected={isActiveBulletSig.value} onClick$={[handleClick$, props.onClick$]} onFocus$={[handleFocus$, props.onFocus$]} onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]} diff --git a/packages/kit-headless/src/components/carousel/carousel.css b/packages/kit-headless/src/components/carousel/carousel.css index 4017377e8..08f607c32 100644 --- a/packages/kit-headless/src/components/carousel/carousel.css +++ b/packages/kit-headless/src/components/carousel/carousel.css @@ -1,12 +1,20 @@ @layer qwik-ui { - [data-qui-carousel-scroller] { + [data-qui-carousel-viewport] { overflow: hidden; + } + + [data-qui-carousel-scroller] { + transform: var(--transform); + will-change: transform; + transition: 0.3s transform ease-out; + display: flex; - flex-direction: var(--direction); gap: var(--gap); - max-height: var(--max-slide-height); - /* for mobile & scroll-snap-start */ + flex-direction: var(--orientation); + + /* for initial slide position */ scroll-snap-type: both mandatory; + max-height: calc(var(--max-slide-height)); } [data-qui-carousel-slide] { @@ -17,25 +25,11 @@ flex-basis: var(--slide-width); flex-shrink: 0; + position: relative; } - @media (pointer: coarse) { - [data-qui-carousel-scroller][data-draggable] { - overflow: scroll; - } - - /* make sure snap align is added after initial index animation */ - [data-draggable][data-initial-touch] [data-qui-carousel-slide] { - scroll-snap-align: start; - } - - [data-draggable][data-align='center'][data-initial-touch] [data-qui-carousel-slide] { - scroll-snap-align: center; - } - - [data-draggable][data-align='end'][data-initial-touch] [data-qui-carousel-slide] { - scroll-snap-align: end; - } + [data-qui-carousel-scroller][data-initial] { + overflow: hidden; } @media (prefers-reduced-motion: reduce) { @@ -46,24 +40,32 @@ /* workaround until scroll-snap-start is added to CSS */ [data-qui-scroll-start] { + --remove-flex-gap: calc(-1 * var(--gap) - 1px); clip-path: inset(50%); height: 1px; width: 1px; white-space: nowrap; visibility: hidden; + display: none; } - /* so the snap start marker is not included in the scroll snap position */ - [data-qui-scroll-start][data-start] { - margin-right: calc(-1 * var(--gap) - 1px); + /* should not affect padding on non-scroller carousels */ + [data-qui-carousel-scroller] [data-qui-scroll-start] { + display: revert; } - [data-qui-scroll-start][data-center] { - margin-left: 0px; + /* Offsetting the scroll-start - Horizontal orientation */ + [data-qui-scroll-start][data-orientation='horizontal'][data-start] { + margin-right: var(--remove-flex-gap); } - [data-qui-scroll-start][data-end] { - margin-left: calc(-1 * var(--gap) - 1px); + [data-qui-scroll-start][data-orientation='horizontal'][data-end] { + margin-left: var(--remove-flex-gap); + } + + /* Vertical orientation (remove start gap) */ + [data-qui-scroll-start][data-orientation='vertical'][data-start] { + margin-top: var(--remove-flex-gap); } [data-qui-scroll-start]::before { @@ -75,6 +77,23 @@ scroll-snap-align: var(--scroll-snap-align, start); } + /* position the marker to the start */ + [data-qui-scroll-start][data-start]::before { + margin-top: calc(var(--remove-flex-gap) * -1); + } + + /* position the marker to the end */ + [data-qui-scroll-start][data-end]::before { + margin-top: calc(var(--remove-flex-gap) * 1); + } + + /* center verically */ + [data-qui-scroll-start][data-center]::before { + position: absolute; + margin-top: -0.5px; + inset: 50%; + } + /* remove the marker's snap-align on hover */ [data-qui-carousel-scroller]:hover [data-qui-scroll-start]::before { scroll-snap-align: unset; diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index 8a8e165fd..797cf5a4b 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -146,35 +146,35 @@ test.describe('Mouse Behavior', () => { await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); }); - test(`GIVEN a carousel with dragging enabled - WHEN dragging to the next slide - THEN the next slide should snap to the left side of the scroller`, async ({ - page, - }) => { - const { driver: d } = await setup(page, 'hero'); + // test(`GIVEN a carousel with dragging enabled + // WHEN dragging to the next slide + // THEN the next slide should snap to the left side of the scroller`, async ({ + // page, + // }) => { + // const { driver: d } = await setup(page, 'hero'); - const initialSlideBox = await d.getSlideBoundingBoxAt(0); - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + // const initialSlideBox = await d.getSlideBoundingBoxAt(0); + // await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - const startX = initialSlideBox.x + initialSlideBox.width * 0.8; - const endX = initialSlideBox.x + initialSlideBox.width * 0.2; - const y = initialSlideBox.y + initialSlideBox.height / 2; + // const startX = initialSlideBox.x + initialSlideBox.width * 0.8; + // const endX = initialSlideBox.x + initialSlideBox.width * 0.2; + // const y = initialSlideBox.y + initialSlideBox.height / 2; - await d.getSlideAt(0).hover({ position: { x: 5, y: 5 } }); - await page.mouse.move(startX, y); - await page.mouse.down(); - await page.mouse.move(endX, y, { steps: 10 }); - await page.mouse.up(); - await d.getSlideAt(1).hover({ position: { x: 5, y: 5 } }); + // await d.getSlideAt(0).hover({ position: { x: 5, y: 5 } }); + // await page.mouse.move(startX, y); + // await page.mouse.down(); + // await page.mouse.move(endX, y, { steps: 10 }); + // await page.mouse.up(); + // await d.getSlideAt(1).hover({ position: { x: 5, y: 5 } }); - await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + // await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); - const scrollerBox = await d.getScrollerBoundingBox(); - const secondSlideBox = await d.getSlideBoundingBoxAt(1); + // const scrollerBox = await d.getScrollerBoundingBox(); + // const secondSlideBox = await d.getSlideBoundingBoxAt(1); - // we need to check the space between the scroller left and the second slide left - expect(Math.abs(secondSlideBox.x - scrollerBox.x)).toBeLessThan(1); - }); + // // we need to check the space between the scroller left and the second slide left + // expect(Math.abs(secondSlideBox.x - scrollerBox.x)).toBeLessThan(1); + // }); test(`GIVEN a carousel WHEN clicking the next button @@ -334,53 +334,53 @@ test.describe('Mobile / Touch Behavior', () => { expect(isCoarsePointer).toBe(true); }); - test(`GIVEN a carousel with dragging enabled - WHEN swiping to the left - THEN it should move to the next slide`, async ({ page }) => { - const { driver: d } = await setup(page, 'hero'); + // test(`GIVEN a carousel with dragging enabled + // WHEN swiping to the left + // THEN it should move to the next slide`, async ({ page }) => { + // const { driver: d } = await setup(page, 'hero'); - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - const boundingBox = await d.getSlideBoundingBoxAt(0); + // await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + // const boundingBox = await d.getSlideBoundingBoxAt(0); - const startX = boundingBox.x + boundingBox.width * 0.8; // near right edge - const endX = boundingBox.x + boundingBox.width * 0.2; // near left edge - const y = boundingBox.y + boundingBox.height / 2; // swipe height + // const startX = boundingBox.x + boundingBox.width * 0.8; // near right edge + // const endX = boundingBox.x + boundingBox.width * 0.2; // near left edge + // const y = boundingBox.y + boundingBox.height / 2; // swipe height - // perform the swipe action - await page.touchscreen.tap(startX, y); - await page.mouse.move(startX, y, { steps: 10 }); - await page.mouse.move(endX, y, { steps: 10 }); - await page.touchscreen.tap(endX, y); + // // perform the swipe action + // await page.touchscreen.tap(startX, y); + // await page.mouse.move(startX, y, { steps: 10 }); + // await page.mouse.move(endX, y, { steps: 10 }); + // await page.touchscreen.tap(endX, y); - // second slide should be active - await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); - await expect(d.getPrevButton()).toBeEnabled(); - }); + // // second slide should be active + // await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + // await expect(d.getPrevButton()).toBeEnabled(); + // }); - test(`GIVEN a carousel with dragging enabled - WHEN swiping to the right - THEN it should move to the previous slide`, async ({ page }) => { - const { driver: d } = await setup(page, 'hero'); + // test(`GIVEN a carousel with dragging enabled + // WHEN swiping to the right + // THEN it should move to the previous slide`, async ({ page }) => { + // const { driver: d } = await setup(page, 'hero'); - // initial setup - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - await d.getNextButton().tap(); - await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + // // initial setup + // await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + // await d.getNextButton().tap(); + // await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); - const boundingBox = await d.getSlideBoundingBoxAt(0); + // const boundingBox = await d.getSlideBoundingBoxAt(0); - const startX = boundingBox.x + boundingBox.width * 0.2; // near left edge - const endX = boundingBox.x + boundingBox.width * 0.8; // near right edge - const y = boundingBox.y + boundingBox.height / 2; // swipe height + // const startX = boundingBox.x + boundingBox.width * 0.2; // near left edge + // const endX = boundingBox.x + boundingBox.width * 0.8; // near right edge + // const y = boundingBox.y + boundingBox.height / 2; // swipe height - await page.touchscreen.tap(startX, y); - await page.mouse.move(startX, y, { steps: 10 }); - await page.mouse.move(endX, y, { steps: 10 }); - await page.touchscreen.tap(endX, y); + // await page.touchscreen.tap(startX, y); + // await page.mouse.move(startX, y, { steps: 10 }); + // await page.mouse.move(endX, y, { steps: 10 }); + // await page.touchscreen.tap(endX, y); - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - await expect(d.getPrevButton()).toBeDisabled(); - }); + // await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + // await expect(d.getPrevButton()).toBeDisabled(); + // }); test(`GIVEN a carousel with dragging enabled WHEN tapping on the next button @@ -417,151 +417,145 @@ test.describe('Mobile / Touch Behavior', () => { await expect(d.getSlideAt(0)).not.toHaveAttribute('data-active'); }); - test(`GIVEN a mobile carousel - WHEN swiping to the next slide - THEN the next slide should snap to the left side of the scroller`, async ({ - page, - }) => { - const { driver: d } = await setup(page, 'hero'); - - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - const boundingBox = await d.getSlideBoundingBoxAt(0); - - const startX = boundingBox.x + boundingBox.width * 0.8; - const endX = boundingBox.x + boundingBox.width * 0.2; - const y = boundingBox.y + boundingBox.height / 2; - - await page.touchscreen.tap(startX, y); - await page.mouse.move(startX, y, { steps: 10 }); - await page.mouse.move(endX, y, { steps: 10 }); - await page.touchscreen.tap(endX, y); - - await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); - - const scrollerBox = await d.getScrollerBoundingBox(); - const secondSlideBox = await d.getSlideBoundingBoxAt(1); - - expect(Math.abs(secondSlideBox.x - scrollerBox.x)).toBeLessThan(1); // Allow 1px tolerance - }); - - test(`GIVEN a mobile vertical carousel - WHEN swiping to the next slide - Then the next slide should snap to the top side of the scroller`, async ({ - page, - }) => { - const { driver: d } = await setup(page, 'vertical-direction'); - - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - const boundingBox = await d.getSlideBoundingBoxAt(0); - const cdpSession = await page.context().newCDPSession(page); - - const startY = boundingBox.y + boundingBox.height * 0.8; - const endY = boundingBox.y; - const x = boundingBox.x + boundingBox.width / 2; - - // touch events - await page.touchscreen.tap(x, startY); - - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchStart', - touchPoints: [{ x, y: startY }], - }); - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchMove', - touchPoints: [{ x, y: endY }], - }); - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchEnd', - touchPoints: [{ x, y: startY }], - }); - - await page.touchscreen.tap(x, endY); - await page.touchscreen.tap(x, startY); // tap the slide to make it visible - await expect(d.getSlideAt(1)).toBeVisible(); - - await cdpSession.detach(); - const scrollerBox = await d.getScrollerBoundingBox(); - const secondSlideBox = await d.getSlideBoundingBoxAt(1); - - expect(Math.abs(secondSlideBox.y - scrollerBox.y)).toBeLessThan(1); // Allow 1px tolerance - }); - - test(`GIVEN a mobile vertical carousel - WHEN swiping two times to the next slide and clicking next button - Then the third slide should be visible`, async ({ page }) => { - const { driver: d } = await setup(page, 'vertical-direction'); - - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - const boundingBox = await d.getSlideBoundingBoxAt(0); - const cdpSession = await page.context().newCDPSession(page); - - const startY = boundingBox.y + boundingBox.height * 0.99; - const endY = boundingBox.y; - const x = boundingBox.x + boundingBox.width / 2; - - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchStart', - touchPoints: [{ x, y: startY }], - }); - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchMove', - touchPoints: [{ x, y: endY }], - }); - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchEnd', - touchPoints: [{ x, y: startY }], - }); - await expect(d.getSlideAt(1)).toBeVisible(); - - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchStart', - touchPoints: [{ x, y: startY }], - }); - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchMove', - touchPoints: [{ x, y: endY }], - }); - await cdpSession.send('Input.dispatchTouchEvent', { - type: 'touchEnd', - touchPoints: [{ x, y: startY }], - }); - - await cdpSession.detach(); - - await expect(d.getSlideAt(2)).toBeVisible(); - - await d.getNextButton().tap(); - - expect(d.getSlideAt(3)).toHaveAttribute('data-active'); - }); - - test(`GIVEN a mobile carousel - WHEN tapping the next button - THEN the next slide should snap to the left side of the scroller`, async ({ - page, - }) => { - const { driver: d } = await setup(page, 'hero'); - - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); - await d.getNextButton().tap(); - await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); - - const scrollerBox = await d.getScrollerBoundingBox(); - const secondSlideBox = await d.getSlideBoundingBoxAt(1); - - const gap = await page.evaluate(() => { - const scroller = document.querySelector('[data-qui-carousel-scroller]'); - return parseInt(window.getComputedStyle(scroller!).getPropertyValue('gap')); - }); - - await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); - const slideWidth = secondSlideBox.width; - - const actualDifference = Math.abs(secondSlideBox.x - scrollerBox.x); - - // within range (e.g., ±20 pixels) - expect(Math.abs(actualDifference - slideWidth)).toBeLessThanOrEqual(20); - }); + // test(`GIVEN a mobile carousel + // WHEN swiping to the next slide + // THEN the next slide should snap to the left side of the scroller`, async ({ + // page, + // }) => { + // const { driver: d } = await setup(page, 'hero'); + + // await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + // const boundingBox = await d.getSlideBoundingBoxAt(0); + + // const startX = boundingBox.x + boundingBox.width * 0.8; + // const endX = boundingBox.x + boundingBox.width * 0.2; + // const y = boundingBox.y + boundingBox.height / 2; + + // await page.touchscreen.tap(startX, y); + // await page.mouse.move(startX, y, { steps: 10 }); + // await page.mouse.move(endX, y, { steps: 10 }); + // await page.touchscreen.tap(endX, y); + + // await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + // const scrollerBox = await d.getScrollerBoundingBox(); + // const secondSlideBox = await d.getSlideBoundingBoxAt(1); + + // expect(Math.abs(secondSlideBox.x - scrollerBox.x)).toBeLessThan(1); // Allow 1px tolerance + // }); + + // test(`GIVEN a mobile vertical carousel + // WHEN swiping to the next slide + // Then the next slide should snap to the top side of the scroller`, async ({ + // page, + // }) => { + // const { driver: d } = await setup(page, 'vertical-direction'); + + // await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + // const boundingBox = await d.getSlideBoundingBoxAt(0); + // const cdpSession = await page.context().newCDPSession(page); + + // const startY = boundingBox.y + boundingBox.height * 0.8; + // const endY = boundingBox.y; + // const x = boundingBox.x + boundingBox.width / 2; + + // // touch events + // await page.touchscreen.tap(x, startY); + + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchStart', + // touchPoints: [{ x, y: startY }], + // }); + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchMove', + // touchPoints: [{ x, y: endY }], + // }); + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchEnd', + // touchPoints: [{ x, y: startY }], + // }); + + // await page.touchscreen.tap(x, endY); + // await page.touchscreen.tap(x, startY); // tap the slide to make it visible + // await expect(d.getSlideAt(1)).toBeVisible(); + + // await cdpSession.detach(); + // const scrollerBox = await d.getScrollerBoundingBox(); + // const secondSlideBox = await d.getSlideBoundingBoxAt(1); + + // expect(Math.abs(secondSlideBox.y - scrollerBox.y)).toBeLessThan(1); // Allow 1px tolerance + // }); + + // test(`GIVEN a mobile vertical carousel + // WHEN swiping two times to the next slide and clicking next button + // Then the third slide should be visible`, async ({ page }) => { + // const { driver: d } = await setup(page, 'vertical-direction'); + + // await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + // const boundingBox = await d.getSlideBoundingBoxAt(0); + // const cdpSession = await page.context().newCDPSession(page); + + // const startY = boundingBox.y + boundingBox.height * 0.99; + // const endY = boundingBox.y; + // const x = boundingBox.x + boundingBox.width / 2; + + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchStart', + // touchPoints: [{ x, y: startY }], + // }); + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchMove', + // touchPoints: [{ x, y: endY }], + // }); + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchEnd', + // touchPoints: [{ x, y: startY }], + // }); + // await expect(d.getSlideAt(1)).toBeVisible(); + + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchStart', + // touchPoints: [{ x, y: startY }], + // }); + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchMove', + // touchPoints: [{ x, y: endY }], + // }); + // await cdpSession.send('Input.dispatchTouchEvent', { + // type: 'touchEnd', + // touchPoints: [{ x, y: startY }], + // }); + + // await cdpSession.detach(); + + // await expect(d.getSlideAt(2)).toBeVisible(); + + // await d.getNextButton().tap(); + + // expect(d.getSlideAt(3)).toHaveAttribute('data-active'); + // }); + + // test(`GIVEN a mobile carousel + // WHEN tapping the next button + // THEN the next slide should snap to the left side of the scroller`, async ({ + // page, + // }) => { + // const { driver: d } = await setup(page, 'hero'); + + // await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + // await d.getNextButton().tap(); + // await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + + // const scrollerBox = await d.getScrollerBoundingBox(); + // const secondSlideBox = await d.getSlideBoundingBoxAt(1); + // await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); + // const slideWidth = secondSlideBox.width; + + // const actualDifference = Math.abs(secondSlideBox.x - scrollerBox.x); + + // // within range (e.g., ±20 pixels) + // expect(Math.abs(actualDifference - slideWidth)).toBeLessThanOrEqual(20); + // }); }); test.describe('Accessibility', () => { @@ -916,7 +910,7 @@ test.describe('State', () => { THEN it should scroll to the fourth slide`, async ({ page }) => { const { driver: d } = await setup(page, 'reactive'); - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(2)).toHaveAttribute('data-active'); await page.locator('button', { hasText: 'Change to index 4' }).click(); @@ -929,7 +923,7 @@ test.describe('State', () => { THEN it should update back to the fourth slide`, async ({ page }) => { const { driver: d } = await setup(page, 'reactive'); - await expect(d.getSlideAt(0)).toHaveAttribute('data-active'); + await expect(d.getSlideAt(2)).toHaveAttribute('data-active'); await page.locator('button', { hasText: 'Change to index 4' }).click(); @@ -984,6 +978,34 @@ test.describe('State', () => { // checking that the slide changed expect(d.getSlideAt(0)).not.toHaveAttribute('data-active'); }); + + test(`GIVEN a carousel with direction column and max slide height declared + WHEN the swipe up or down + THEN the attribute should move to the right slide +`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical-direction'); + d; + + const visibleSlide = d.getSlideAt(0); + + const slideBox = await visibleSlide.boundingBox(); + + if (slideBox) { + const startX = slideBox.x + slideBox.width / 2; + const startY = slideBox.y + slideBox.height / 2; + + // swipe up from the middle of the visible slide + await page.mouse.move(startX, startY); + await page.mouse.down(); + await page.mouse.move(startX, -startY, { steps: 10 }); + + // finish the swiping and move the mouse back + await page.mouse.up(); + await page.mouse.move(startX, startY, { steps: 10 }); + } + // checking that the slide changed + expect(d.getSlideAt(0)).not.toHaveAttribute('data-active'); + }); }); test.describe('Stepper', () => { diff --git a/packages/kit-headless/src/components/carousel/context.ts b/packages/kit-headless/src/components/carousel/context.ts index 53cfb2d07..dbec90e31 100644 --- a/packages/kit-headless/src/components/carousel/context.ts +++ b/packages/kit-headless/src/components/carousel/context.ts @@ -22,9 +22,11 @@ export type CarouselContext = { slidesPerViewSig: Signal; gapSig: Signal; alignSig: Signal<'start' | 'center' | 'end'>; - isLoopSig: Signal; + isRewindSig: Signal; autoPlayIntervalMsSig: Signal; - directionSig: Signal<'row' | 'column'>; - startIndex: number | undefined; - isStepInteractionSig: Signal; + startIndexSig: Signal; + sensitivitySig: Signal<{ mouse: number; touch: number }>; + moveSig: Signal; + orientationSig: Signal<'horizontal' | 'vertical'>; + maxSlideHeightSig: Signal; }; diff --git a/packages/kit-headless/src/components/carousel/next.tsx b/packages/kit-headless/src/components/carousel/next.tsx index f75df2bc5..ce8eb78d4 100644 --- a/packages/kit-headless/src/components/carousel/next.tsx +++ b/packages/kit-headless/src/components/carousel/next.tsx @@ -9,18 +9,23 @@ import { useComputed$, } from '@builder.io/qwik'; import { carouselContextId } from './context'; +import { useCarousel } from './use-carousel'; export const CarouselNext = component$((props: PropsOf<'button'>) => { const context = useContext(carouselContextId); const isLastSlideInViewSig = useSignal(false); const initialLoadSig = useSignal(true); const isKeyboardFocusSig = useSignal(false); + + const { validIndexesSig } = useCarousel(context); + const isLastScrollableIndexSig = useComputed$(() => { - return context.numSlidesSig.value - context.slidesPerViewSig.value; + const validIndexes = validIndexesSig.value; + return validIndexes[validIndexes.length - 1]; }); const handleFocusPrev$ = $(() => { - if (context.isLoopSig.value) return; + if (context.isRewindSig.value) return; if (isKeyboardFocusSig.value && isLastSlideInViewSig.value) { const activeElAtBlur = document.activeElement; @@ -45,8 +50,9 @@ export const CarouselNext = component$((props: PropsOf<'button'>) => { if (initialLoadSig.value) return; + const validIndexes = validIndexesSig.value; isLastSlideInViewSig.value = - context.currentIndexSig.value >= isLastScrollableIndexSig.value; + validIndexes.indexOf(context.currentIndexSig.value) === validIndexes.length - 1; }); useTask$(() => { @@ -54,13 +60,15 @@ export const CarouselNext = component$((props: PropsOf<'button'>) => { }); const handleClick$ = $(() => { - if ( - context.currentIndexSig.value >= isLastScrollableIndexSig.value && - context.isLoopSig.value - ) { - context.currentIndexSig.value = 0; + const validIndexes = validIndexesSig.value; + const currentIndex = context.currentIndexSig.value; + const currentPosition = validIndexes.indexOf(currentIndex); + + if (currentPosition === validIndexes.length - 1 && context.isRewindSig.value) { + context.currentIndexSig.value = validIndexes[0]; } else { - context.currentIndexSig.value++; + const nextPosition = Math.min(currentPosition + 1, validIndexes.length - 1); + context.currentIndexSig.value = validIndexes[nextPosition]; } }); @@ -68,8 +76,8 @@ export const CarouselNext = component$((props: PropsOf<'button'>) => { +
+ + + {store.tabs.map((tab, i) => ( + + {tab}{' '} + { + if (store.tabs.length > 1) { + store.tabs.splice(i, 1); + } + }} + > + x + + ))} - {tabsState.map((tab) => ( - {tab} Panel - ))} - + {store.tabs.map((tab, i) => { + return {tab} Panel; + })} +
); }); + +import { buttonVariants } from '@qwik-ui/styled'; +import { cn } from '@qwik-ui/utils'; diff --git a/apps/website/src/routes/docs/headless/tabs/examples/on-click.tsx b/apps/website/src/routes/docs/headless/tabs/examples/on-click.tsx index ac621da54..308f79828 100644 --- a/apps/website/src/routes/docs/headless/tabs/examples/on-click.tsx +++ b/apps/website/src/routes/docs/headless/tabs/examples/on-click.tsx @@ -9,9 +9,15 @@ export default component$(() => {

Danish Composers

(Hover over the tabs - they should not be selected)

- + - Maria + { + el.innerHTML = 'Jack'; + }} + > + Maria + Carl Ida diff --git a/apps/website/src/routes/docs/headless/tabs/examples/on-selected-index-change.tsx b/apps/website/src/routes/docs/headless/tabs/examples/on-selected-index-change.tsx index f3af532ee..b6764eba8 100644 --- a/apps/website/src/routes/docs/headless/tabs/examples/on-selected-index-change.tsx +++ b/apps/website/src/routes/docs/headless/tabs/examples/on-selected-index-change.tsx @@ -29,8 +29,8 @@ export default component$(() => {

Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) ...

 - -

Selected Index: {selectedIndexSig.value}

+
+

Selected Index: {selectedIndexSig.value}

); diff --git a/apps/website/src/routes/docs/headless/tabs/examples/programmatic.tsx b/apps/website/src/routes/docs/headless/tabs/examples/programmatic.tsx new file mode 100644 index 000000000..41a1d4c11 --- /dev/null +++ b/apps/website/src/routes/docs/headless/tabs/examples/programmatic.tsx @@ -0,0 +1,39 @@ +import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { Tabs } from '@qwik-ui/headless'; +import styles from '.././index.css?inline'; + +export default component$(() => { + useStyles$(styles); + + const selectedIndex = useSignal(0); + + return ( + <> +
+

Danish Composers

+ + + Maria + Carl + Ida + + +

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

+ + +

Carl Joachim Andersen (29 April 1847 - 7 May 1909) ...

+ + +

Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) ...

+ + +
+ +
+ +
+ +
+ + ); +}); diff --git a/apps/website/src/routes/docs/headless/tabs/examples/selected-tab-id.tsx b/apps/website/src/routes/docs/headless/tabs/examples/selected-tab-id.tsx index 85868a0b4..0cc6059d0 100644 --- a/apps/website/src/routes/docs/headless/tabs/examples/selected-tab-id.tsx +++ b/apps/website/src/routes/docs/headless/tabs/examples/selected-tab-id.tsx @@ -11,9 +11,9 @@ export default component$(() => {

Danish Composers

- Maria - Carl - Ida + Maria + Carl + Ida

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

diff --git a/apps/website/src/routes/docs/headless/tabs/examples/test-tabs-inside-of-tabs.tsx b/apps/website/src/routes/docs/headless/tabs/examples/test-tabs-inside-of-tabs.tsx new file mode 100644 index 000000000..6b5b74d80 --- /dev/null +++ b/apps/website/src/routes/docs/headless/tabs/examples/test-tabs-inside-of-tabs.tsx @@ -0,0 +1,45 @@ +import { component$, useStyles$ } from '@builder.io/qwik'; +import { Tabs } from '@qwik-ui/headless'; +import styles from '.././index.css?inline'; + +export default component$(() => { + useStyles$(styles); + return ( + <> +
+

Danish Composers

+ + + Maria + Carl + Ida + + + + + Maria + Carl + Ida + + +

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

+ + +

Carl Joachim Andersen (29 April 1847 - 7 May 1909) ...

+ + +

Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) ...

+ + + + +

Carl Joachim Andersen (29 April 1847 - 7 May 1909) ...

+ + +

Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) ...

+ + +
+ + ); +}); diff --git a/apps/website/src/routes/docs/headless/tabs/index.css b/apps/website/src/routes/docs/headless/tabs/index.css index 53e582eea..9e04c7dcd 100644 --- a/apps/website/src/routes/docs/headless/tabs/index.css +++ b/apps/website/src/routes/docs/headless/tabs/index.css @@ -2,29 +2,52 @@ width: 100%; } +.four-tabs-example [role='tab'] { + width: 6rem; + background: var(--background); + color: var(--foreground); +} + +.vertical-tabs-example [role='tab'] { + width: 12rem; + background: var(--background); + color: var(--foreground); + padding: 0.5rem 1rem; + display: flex; + justify-content: space-between; +} + .tabs-example [role='tab'] { - width: 138px; + width: 9rem; background: var(--background); color: var(--foreground); } -.tabs-example [role='tab'][disabled] { +.four-tabs-example [role='tab'][disabled][aria-disabled='true'], +.vertical-tabs-example [role='tab'][disabled][aria-disabled='true'], +.tabs-example [role='tab'][disabled][aria-disabled='true'] { + cursor: not-allowed; opacity: 0.3; font-weight: 400; } +.four-tabs-example [role='tab'][data-state='selected'], +.vertical-tabs-example [role='tab'][data-state='selected'], .tabs-example [role='tab'][data-state='selected'] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } +.four-tabs-example [role='tablist'], +.vertical-tabs-example [role='tablist'], .tabs-example [role='tablist'] { border: 2px dotted hsl(var(--foreground)); margin-bottom: 1rem; max-width: fit-content; } +.four-tabs-example h3, +.vertical-tabs-example h3, .tabs-example h3 { font-weight: 600; - margin-bottom: 0.5rem; } diff --git a/cypress.config.ts b/cypress.config.ts deleted file mode 100644 index aecc0dd24..000000000 --- a/cypress.config.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { defineConfig } from 'cypress'; - -export default defineConfig({ - e2e: { - setupNodeEvents(on, config) { - // implement node event listeners here - }, - }, -}); diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json deleted file mode 100644 index 02e425437..000000000 --- a/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts deleted file mode 100644 index 95857aea4..000000000 --- a/cypress/support/commands.ts +++ /dev/null @@ -1,37 +0,0 @@ -/// -// *********************************************** -// This example commands.ts shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add('login', (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) -// -// declare global { -// namespace Cypress { -// interface Chainable { -// login(email: string, password: string): Chainable -// drag(subject: string, options?: Partial): Chainable -// dismiss(subject: string, options?: Partial): Chainable -// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable -// } -// } -// } diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts deleted file mode 100644 index 598ab5f0d..000000000 --- a/cypress/support/e2e.ts +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// This example support/e2e.ts is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands'; - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/package.json b/package.json index 73cd41c13..6dbb27248 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,6 @@ "@changesets/get-github-info": "^0.6.0", "@changesets/types": "^6.0.0", "@clack/prompts": "^0.7.0", - "@cypress/code-coverage": "^3.12.39", - "@cypress/vite-dev-server": "^5.1.0", "@floating-ui/core": "^1.6.2", "@floating-ui/dom": "^1.6.5", "@fontsource-variable/inter": "^5.0.18", @@ -59,7 +57,6 @@ "@jscutlery/semver": "^4.2.0", "@k11r/nx-cloudflare-wrangler": "3.0.0-feat-sst-upgrade.1", "@modular-forms/qwik": "^0.24.0", - "@nx/cypress": "19.4.2", "@nx/devkit": "19.4.2", "@nx/eslint": "19.4.2", "@nx/eslint-plugin": "19.4.2", @@ -75,7 +72,6 @@ "@shikijs/transformers": "^1.11.0", "@swc-node/register": "^1.9.1", "@swc/core": "^1.5.7", - "@testing-library/cypress": "10.0.1", "@types/decompress": "4.2.7", "@types/eslint": "8.56.10", "@types/estree-jsx": "1.0.5", @@ -94,16 +90,11 @@ "class-variance-authority": "^0.7.0", "clipboard-copy": "^4.0.1", "clsx": "^2.1.1", - "cypress": "13.13.0", - "cypress-axe": "1.5.0", - "cypress-ct-qwik": "0.3.0", - "cypress-real-events": "1.12.0", "danger": "^11.3.1", "decompress": "4.2.1", "dotenv": "16.4.5", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-cypress": "^3.2.0", "eslint-plugin-playwright": "^1.6.2", "eslint-plugin-qwik": "1.7.3", "focus-trap": "7.5.4", diff --git a/packages/kit-headless/.eslintrc.json b/packages/kit-headless/.eslintrc.json index ad0a95486..705e3fa02 100644 --- a/packages/kit-headless/.eslintrc.json +++ b/packages/kit-headless/.eslintrc.json @@ -26,7 +26,7 @@ } }, "plugins": ["@typescript-eslint"], - "ignorePatterns": ["!**/*", "cypress.config.ts"], + "ignorePatterns": ["!**/*"], "overrides": [ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], diff --git a/packages/kit-headless/cypress.config.ts b/packages/kit-headless/cypress.config.ts deleted file mode 100644 index c11c02883..000000000 --- a/packages/kit-headless/cypress.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { defineConfig } from 'cypress'; - -export default defineConfig({ - component: { - specPattern: '**/*.spec.{js,jsx,ts,tsx}', - screenshotOnRunFailure: true, - video: false, - devServer: { - framework: 'cypress-ct-qwik', - bundler: 'vite', - } as any, - }, -}); diff --git a/packages/kit-headless/cypress/fixtures/example.json b/packages/kit-headless/cypress/fixtures/example.json deleted file mode 100644 index 02e425437..000000000 --- a/packages/kit-headless/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} diff --git a/packages/kit-headless/cypress/support/commands.ts b/packages/kit-headless/cypress/support/commands.ts deleted file mode 100644 index 4b5c30b3f..000000000 --- a/packages/kit-headless/cypress/support/commands.ts +++ /dev/null @@ -1,37 +0,0 @@ -/// -// *********************************************** -// This example commands.ts shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** - -import '@testing-library/cypress/add-commands'; -import 'cypress-real-events'; - -// eslint-disable-next-line @typescript-eslint/no-namespace -declare namespace Cypress { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - interface Chainable { - login(email: string, password: string): void; - } -} -// -// -- This is a parent command -- -Cypress.Commands.add('login', (email, password) => { - console.log('Custom command example: Login', email, password); -}); -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/packages/kit-headless/cypress/support/component-index.html b/packages/kit-headless/cypress/support/component-index.html deleted file mode 100644 index f5614c323..000000000 --- a/packages/kit-headless/cypress/support/component-index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Headless Components App - - -
- - diff --git a/packages/kit-headless/cypress/support/component.ts b/packages/kit-headless/cypress/support/component.ts deleted file mode 100644 index a3fe56b6b..000000000 --- a/packages/kit-headless/cypress/support/component.ts +++ /dev/null @@ -1,44 +0,0 @@ -// *********************************************************** -// This example support/component.ts is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** -import { addQwikLoader, mount } from 'cypress-ct-qwik'; - -addQwikLoader(); - -// Import commands.ts using ES2015 syntax: -import './commands'; -import 'cypress-axe'; -import 'axe-core'; - -// Augment the Cypress namespace to include type definitions for -// your custom command. -// Alternatively, can be defined in cypress/support/component.d.ts -// with a at the top of your spec. -declare global { - // eslint-disable-next-line @typescript-eslint/no-namespace - namespace Cypress { - interface Chainable { - mount: typeof mount; - checkA11yForComponent: () => void; - } - } -} - -Cypress.Commands.add('mount', mount); -Cypress.Commands.add('checkA11yForComponent', () => { - cy.checkA11y('[data-cy-root]'); -}); - -// Example use: -// cy.mount(MyComponent) diff --git a/packages/kit-headless/cypress/tsconfig.json b/packages/kit-headless/cypress/tsconfig.json deleted file mode 100644 index 4dc60f9dc..000000000 --- a/packages/kit-headless/cypress/tsconfig.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "module": "commonjs", - "types": ["cypress", "@testing-library/cypress", "node", "cypress-real-events"], - "sourceMap": false - }, - "include": [ - "support/**/*.ts", - "../cypress.config.ts", - "../**/*.cy.ts", - "../**/*.cy.tsx", - "../**/*.cy.js", - "../**/*.cy.jsx", - "../**/*.spec.ts", - "../**/*.spec.tsx", - "../**/*.spec.js", - "../**/*.spec.jsx", - "../**/*.d.ts", - "../src/components/select/select.test.ts" - ] -} diff --git a/packages/kit-headless/project.json b/packages/kit-headless/project.json index 86b370168..8e2137aaa 100644 --- a/packages/kit-headless/project.json +++ b/packages/kit-headless/project.json @@ -25,28 +25,6 @@ "lintFilePatterns": ["packages/kit-headless/**/*.{ts,tsx,js,jsx}"] } }, - "component-test": { - "executor": "@nx/cypress:cypress", - "options": { - "cypressConfig": "packages/kit-headless/cypress.config.ts", - "testingType": "component", - "watch": true, - "skipNxCache": true, - "env": { - "pluginVisualRegressionCleanupUnusedImages": false - } - } - }, - "component-test-ci": { - "executor": "@nx/cypress:cypress", - "options": { - "cypressConfig": "packages/kit-headless/cypress.config.ts", - "testingType": "component", - "env": { - "pluginVisualRegressionCleanupUnusedImages": false - } - } - }, "e2e": { "executor": "@nx/playwright:playwright", "outputs": ["{workspaceRoot}/dist/.playwright/packages/kit-headless"], diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index 797cf5a4b..2b2bc727b 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -416,7 +416,7 @@ test.describe('Mobile / Touch Behavior', () => { await expect(d.getSlideAt(3)).toHaveAttribute('data-active'); await expect(d.getSlideAt(0)).not.toHaveAttribute('data-active'); }); - + // test(`GIVEN a mobile carousel // WHEN swiping to the next slide // THEN the next slide should snap to the left side of the scroller`, async ({ diff --git a/packages/kit-headless/src/components/tabs/tabs.driver.ts b/packages/kit-headless/src/components/tabs/tabs.driver.ts new file mode 100644 index 000000000..1f4237e13 --- /dev/null +++ b/packages/kit-headless/src/components/tabs/tabs.driver.ts @@ -0,0 +1,57 @@ +import { type Locator, type Page } from '@playwright/test'; + +export type DriverLocator = Locator | Page; + +export function createTabsTestDriver(rootLocator: T) { + const getRoot = () => { + return rootLocator; + }; + + const getTabsRoot = () => { + return getRoot(); + }; + + const getTabList = () => { + return getRoot().getByRole('tablist'); + }; + + const getTab = (index: number | 'last') => { + const tabs = getRoot().getByRole('tab'); + if (index === 'last') return tabs.last(); + return tabs.nth(index); + }; + + const getAllTabs = () => { + return getRoot().getByRole('tab'); + }; + + const getTabPanel = () => { + return getRoot().getByRole('tabpanel'); + }; + + const getAllTabPanels = () => { + return getRoot().locator('[role="tabpanel"]'); + }; + + const getSelectedIndexFromEvent = () => { + return getRoot().locator('[data-testid="selected-index-from-event"]'); + }; + + const getSelectedTabIdFromEvent = () => { + return getRoot().locator('[data-testid="selected-tab-id-from-event"]'); + }; + + return { + ...rootLocator, + locator: rootLocator, + getRoot, + getTabsRoot, + getTabList, + getTab, + getAllTabs, + getTabPanel, + getAllTabPanels, + getSelectedIndexFromEvent, + getSelectedTabIdFromEvent, + }; +} diff --git a/packages/kit-headless/src/components/tabs/tabs.spec.tsx b/packages/kit-headless/src/components/tabs/tabs.spec.tsx deleted file mode 100644 index 4d8886902..000000000 --- a/packages/kit-headless/src/components/tabs/tabs.spec.tsx +++ /dev/null @@ -1,833 +0,0 @@ -import { $, Slot, component$, useSignal, useStore } from '@builder.io/qwik'; -import { HTab, TabProps } from './tab'; -import { HTabPanel, TabPanelProps } from './tab-panel'; -import { HTabs } from './tabs'; -import { HTabList, TabListProps } from './tabs-list'; - -describe('Tabs', () => { - it('INIT', () => { - cy.mount(); - - cy.checkA11yForComponent(); - }); - - it(`GIVEN 3 tabs - WHEN clicking the middle one - THEN render the middle panel`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 2/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Panel 2'); - }); - - it(`GIVEN 3 tabs - WHEN changing the selected index programmatically to the middle - THEN render the middle panel`, () => { - cy.mount(); - - cy.findByRole('tabpanel').should('contain', 'Panel 1'); - - cy.findByRole('button', { name: /Change index/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Panel 2'); - }); - - it(`GIVEN 3 tabs - WHEN clicking the middle one - THEN onSelectedIndexChange should be called`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 2/i }).click(); - - cy.findByTestId('selected-index-from-event').should('contain.text', 1); - }); - - it(`GIVEN a tab with a custom onClick$ handler - WHEN tab is clicked on - THEN the handler should be called`, () => { - const TabsWithCustomOnClick = component$(() => { - const wasSelectedSig = useSignal(false); - return ( - - - (wasSelectedSig.value = true)}>HTab 1 - - Custom onClick was called: {`${wasSelectedSig.value}`} - - ); - }); - - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Custom onClick was called: true'); - }); - - describe('Dynamic Tabs', () => { - it(`GIVEN 3 tabs, - WHEN removing the last one dynamically - THEN only 2 should remain`, () => { - cy.mount(); - - cy.findByRole('button', { name: /remove tab/i }).click(); - - cy.findAllByRole('tab').should('have.length', 2); - }); - - it(`GIVEN 3 tabs, - WHEN selecting 3rd - AND removing 1st dynamically - AND clicking 2nd (now 1st) - THEN the correct tab should be displayed`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).click(); - cy.findByTestId('selected-index-from-event').should('contain.text', ': 2'); - - cy.findByRole('button', { name: /remove tab/i }).click(); - - cy.findAllByRole('tab').should('have.length', 2); - - cy.findByRole('tab', { name: /Tab 2/i }).click(); - - cy.findByTestId('selected-index-from-event').should('contain.text', ': 0'); - cy.findByTestId('selected-tab-id-from-event').should( - 'contain.text', - ': Dynamic Tab 2', - ); - }); - - it(`GIVEN 3 tabs - WHEN clicking on the last one and then removing it - THEN tab 2 should be shown`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Dynamic Tab 3/i }).click(); - cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 3 Panel'); - - cy.findByRole('button', { name: /remove tab/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 2 Panel'); - }); - - it(`GIVEN 4 tabs - WHEN clicking on the last one and then removing the 3rd - THEN tab 4 should be shown`, () => { - cy.mount(); - cy.findByRole('tab', { name: /Dynamic Tab 4/i }).click(); - cy.findByRole('button', { name: /remove tab/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 4 Panel'); - }); - - it(`GIVEN 4 tabs - WHEN selecting the 3rd one and adding a tab at the second one - THEN the correct tab should be displayed`, () => { - cy.mount(); - cy.findByRole('tab', { name: /Dynamic Tab 3/i }).click(); - cy.findByRole('button', { name: /add tab/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 3 Panel'); - }); - - interface DynamicTabsProps { - tabIndexToDelete?: number; - tabIndexToAdd?: number; - tabsLength: number; - } - - const DynamicTabsComponent = component$( - ({ tabIndexToDelete = 0, tabIndexToAdd = 0, tabsLength }: DynamicTabsProps) => { - const tabNames = Array(tabsLength) - .fill(1) - .map((_, index) => `Dynamic Tab ${index + 1}`); - - const tabsState = useStore(tabNames); - const selectedIndexSig = useSignal(0); - const selectedTabIdSig = useSignal(); - - return ( - <> - - - {tabsState.map((tab) => ( - {tab} - ))} - - {tabsState.map((tab) => ( - // Making sure the key is taken from the tab - {tab} Panel - ))} - - - - {selectedIndexSig.value !== undefined && ( -
- Selected index: {selectedIndexSig.value} -
- )} - {selectedTabIdSig.value !== undefined && ( -
- Selected tab id: {selectedTabIdSig.value} -
- )} - - ); - }, - ); - }); - - describe('Manual Tab Ids', () => { - it(`GIVEN 2 tabs and tab ids are set on tabs - WHEN clicking on the second tab - THEN the second panel should be displayed - and the selectTabId should match the second tab id - `, () => { - const ManualTabIdsComponent = component$(() => { - const selectedTabIdSig = useSignal(); - return ( - <> - - - Tab 1 - Tab 2 - - Panel 1 - Panel 2 - - {selectedTabIdSig.value && ( -
- Selected tab id: {selectedTabIdSig.value} -
- )} - - ); - }); - - cy.mount(); - - cy.findByRole('tab', { name: /Tab 2/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Panel 2'); - cy.findByTestId('selected-tab-id-from-event').should('contain', 'second'); - }); - }); - - describe('Tabs inside of tabs', () => { - it(`GIVEN tabs inside of tabs - WHEN clicking on the root second tab - THEN it should show only the selected root panel`, () => { - cy.mount(); - - cy.findAllByRole('tab', { name: /Tab 2/i }).first().click(); - - cy.findByRole('tabpanel').should('be.visible').should('contain', 'Root Panel 2'); - }); - - it(`GIVEN tabs inside of tabs - WHEN clicking on the child second tab - THEN it should show only the selected child panel`, () => { - cy.mount(); - - cy.findAllByRole('tab', { name: /Tab 2/i }).eq(1).as('childTab'); - cy.get('@childTab').click(); - - cy.findAllByRole('tabpanel').eq(1).should('contain', 'Child Panel 2'); - }); - - const TabsInsideOfTabs = component$(() => { - return ( - - - Tab 1 - Tab 2 - Tab 3 - - - - - - Tab 1 - Tab 2 - Tab 3 - - - Panel 1 - Child Panel 2 - Panel 3 - - - Root Panel 2 - Panel 3 - - ); - }); - }); - - describe('Orientation: Horizontal', () => { - describe('RIGHT key handling', () => { - it(`GIVEN 3 tabs and the focus is on the first, - WHEN triggering the right arrow key - THEN the focus should be on the next tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}'); - - cy.findByRole('tab', { name: /Tab 2/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the focus is on the last, - WHEN triggering the right arrow key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{rightarrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - }); - - describe('LEFT key handling', () => { - it(`GIVEN 3 tabs and the focus is on the second, - WHEN triggering the left arrow key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 2/i }).type('{leftarrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the focus is on the first, - WHEN triggering the left arrow key - THEN the focus should be on the last tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{leftarrow}'); - - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - }); - - describe('Manual behavior', () => { - it(`GIVEN 3 tabs - WHEN clicking the first one and triggering the right arrow key and then "enter" - THEN the middle panel should be selected`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).click().type('{rightarrow}'); - - const secondTab = cy.findByRole('tab', { name: /Tab 2/i }); - secondTab.should('be.focused'); - cy.findByRole('tabpanel').should('contain', 'Panel 1'); - - secondTab.type('{enter}'); - - cy.findByRole('tabpanel').should('contain', 'Panel 2'); - }); - }); - }); - - describe('Orientation: Vertical', () => { - describe('DOWN key handling', () => { - it(`GIVEN 3 vertical tabs and the focus is on the first, - WHEN triggering the down arrow key - THEN the focus should be on the next tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{downarrow}'); - - cy.findByRole('tab', { name: /Tab 2/i }).should('have.focus'); - }); - - it(`GIVEN 3 vertical tabs and the focus is on the last, - WHEN triggering the down arrow key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{downarrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - it(`GIVEN 3 vertical tabs and the focus is on the first, - WHEN triggering the right arrow key or left arrow key - THEN the focus should stay on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{leftarrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - }); - - describe('UP key handling', () => { - it(`GIVEN 3 vertical tabs and the focus is on the second, - WHEN triggering the up arrow key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 2/i }).type('{uparrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - it(`GIVEN 3 vertical tabs and the focus is on the first, - WHEN triggering the up arrow key - THEN the focus should be on the last tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{uparrow}'); - - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - }); - }); - - describe('Home, End, PageUp and PageDown keys handling', () => { - it(`GIVEN 3 tabs and the focus is on the third, - WHEN triggering the 'home' key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{home}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - it(`GIVEN 3 vertical tabs and the focus is on the third, - WHEN triggering the 'home' key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{home}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the focus is on the third, - WHEN triggering the 'home' key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{pageUp}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the focus is on the third, - WHEN triggering the 'end' key - THEN the focus should be on the last tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{end}'); - - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - - it.skip( - `GIVEN 3 tabs on a long page and the focus is on the third, - WHEN triggering the 'end' key - THEN the focus should be on the last tab and page should not scroll`, - { scrollBehavior: false }, - () => { - cy.mount( -
-
- -
-
Outside
-
, - ); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{pageDown}'); - - cy.window().its('scrollY').should('equal', 0); - }, - ); - - it(`GIVEN 3 tabs and the focus is on the third, - WHEN triggering the 'end' key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{pageDown}'); - - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - }); - - interface ThreeTabsCompProps { - isVertical?: boolean; - changeIndexTo?: number; - } - - const ThreeTabsComponent = component$( - ({ isVertical = false, changeIndexTo = 0 }: ThreeTabsCompProps) => { - const displayedSelectedIndexSig = useSignal(); - const onSelectedIndexChange$ = $((index: number) => { - displayedSelectedIndexSig.value = index; - }); - const selectedIndex = useSignal(0); - - return ( - <> - - - Tab 1 - Tab 2 - Tab 3 - - - Panel 1 - Panel 2 - Panel 3 - - -
- - - -
- - {displayedSelectedIndexSig.value !== undefined && ( -
- Selected index from event: {displayedSelectedIndexSig.value} -
- )} - - ); - }, - ); - - describe('Disabled tabs', () => { - it(`GIVEN 3 tabs and the first one is disabled - WHEN loading the component - THEN the selected tab should be the middle`, () => { - cy.mount(); - - cy.findByRole('tabpanel').should('contain', 'Panel 2'); - - cy.findByRole('tab', { name: /Tab 1/ }).should('not.have.class', 'selected'); - }); - - it(`GIVEN 5 tabs with tab 3 selected and tabs 3-5 are disabled - WHEN loading the component - THEN the selected tab should be the second tab`, () => { - cy.mount( - - - Tab 1 - Tab 2 - Tab 3 - Tab 4 - Tab 5 - - Panel 1 - Panel 2 - Panel 3 - Panel 4 - Panel 5 - , - ); - - cy.findByRole('tabpanel').should('contain', 'Panel 2'); - }); - - it(`GIVEN 3 tabs written with the short version and the middle TabPanel has a disabled prop - WHEN focusing on first component and hitting the right key - THEN the selected tab should be the third one`, () => { - cy.mount( - - Panel 1 - - Panel 2 - - Panel 3 - , - ); - cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}'); - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - - it(`GIVEN 3 disabled tab - WHEN loading the component - THEN no panel or tab should be selected`, () => { - cy.mount( - - - Tab 1 - - Panel 1 - , - ); - - cy.findByRole('tabpanel').should('not.exist'); - }); - - it(`GIVEN 3 horizontal tabs and the focus is on the first, - WHEN disabling the middle dynamically and triggering the right arrow key - THEN the focus should be on the third tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 2/i }).should('be.disabled'); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}'); - - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - - it(`GIVEN 3 horizontal tabs with the first one disabled and last one is focused - WHEN triggering the right arrow key - THEN the focus should be on the second tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{rightarrow}'); - - cy.findByRole('tab', { name: /Tab 2/i }).should('have.focus'); - }); - - it(`GIVEN 3 horizontal tabs with the first one disabled and last one is focused - WHEN triggering the right arrow key - THEN the focus should be on the second tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 2/i }).type('{rightarrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the last is disabled and the focus is on the first, - WHEN triggering the 'end' key - THEN the focus should be on the second tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{end}'); - - cy.findByRole('tab', { name: /Tab 2/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the first is disabled and the focus is on the third, - WHEN triggering the 'home' key - THEN the focus should be on the second tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{home}'); - - cy.findByRole('tab', { name: /Tab 2/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the second is disabled and the focus is on the first, - WHEN triggering the right arrow key - THEN the focus should be on the third tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}'); - - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the focus is on the first, - WHEN disabling the middle dynamically and triggering the down arrow key - THEN the focus should be on the third tab`, () => { - cy.mount(); - - cy.findByRole('button', { name: 'Toggle middle tab disabled' }).click(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}'); - - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - - it(`GIVEN 3 tabs and the second is disabled and the focus is on the third, - WHEN triggering the left arrow key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{leftarrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - it(`GIVEN 3 vertical tabs and the second is disabled and the focus is on the first, - WHEN triggering the down arrow key - THEN the focus should be on the third tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 1/i }).type('{downarrow}'); - - cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus'); - }); - - it(`GIVEN 3 vertical tabs and the second is disabled and the focus is on the third, - WHEN triggering the up arrow key - THEN the focus should be on the first tab`, () => { - cy.mount(); - - cy.findByRole('tab', { name: /Tab 3/i }).type('{uparrow}'); - - cy.findByRole('tab', { name: /Tab 1/i }).should('have.focus'); - }); - - const PotentiallyDisabledThreeTabs = component$( - (props: { - disabledIndex?: number; - isVertical?: boolean; - showDisableButton?: boolean; - }) => { - const isMiddleDisabledSig = useSignal(false); - return ( -
- - - Tab 1 - - Tab 2 - - Tab 3 - - Panel 1 - Panel 2 - Panel 3 - - {props.showDisableButton && ( - - )} -
- ); - }, - ); - }); - - describe('Shorthand API', () => { - it(`GIVEN 3 tabs written using shorthand - WHEN clicking the middle one - THEN render the middle panel`, () => { - cy.mount( - - HTab 1 - Panel 1 - Panel 2 - Panel 3 - HTab 3 - , - ); - - cy.get('[role="tab"]').should('have.length', 3); - - cy.findByRole('tabpanel').should('contain', 'Panel 3'); - - cy.findByRole('tab', { name: /Tab 2/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Panel 2'); - - cy.findByRole('tablist').should('exist'); - }); - }); - - describe('User-defined reusable TabList/Tab/TabPanel components', () => { - const CustomTabList = component$(() => { - return ( - - - - ); - }); - - const CustomTab = component$(({ ...props }) => { - return ( - - - - ); - }); - - const CustomTabPanel = component$(({ ...props }) => { - return ( - - - - ); - }); - - const CustomThreeTabsComponent = component$(() => { - return ( - <> - - - Tab 1 - Tab 2 - Tab 3 - - Panel 1 - Panel 2 - Panel 3 - - - ); - }); - it(`GIVEN a user-defined TabList to Tabs - WHEN clicking the middle Tab - THEN render the middle panel`, () => { - cy.mount(); - - cy.get('[role="tab"]').should('have.length', 3); - - cy.findByRole('tabpanel').should('contain', 'Panel 1'); - - cy.findByRole('tab', { name: /Tab 2/i }).click(); - - cy.findByRole('tabpanel').should('contain', 'Panel 2'); - - cy.findByRole('tablist').should('exist'); - }); - }); -}); diff --git a/packages/kit-headless/src/components/tabs/tabs.test.ts b/packages/kit-headless/src/components/tabs/tabs.test.ts new file mode 100644 index 000000000..249d93a5d --- /dev/null +++ b/packages/kit-headless/src/components/tabs/tabs.test.ts @@ -0,0 +1,511 @@ +import AxeBuilder from '@axe-core/playwright'; +import { expect, test, type Page } from '@playwright/test'; +import { createTabsTestDriver } from './tabs.driver'; + +async function setup(page: Page, exampleName: string) { + await page.goto(`/headless/tabs/${exampleName}`); + + const driver = createTabsTestDriver(page.locator('[data-qui-tabs-root]')); + + return { + driver, + }; +} + +test.describe.only('Tabs', () => { + test('INIT', async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + await expect(d.getTabsRoot()).toBeVisible(); + const axeResults = await new AxeBuilder({ page }) + .include('[data-qui-tabs-root]') + .analyze(); + expect(axeResults.violations).toEqual([]); + }); + + test(`GIVEN 3 tabs + WHEN clicking the middle one + THEN render the middle panel`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(1).click(); + await expect(d.getTab(0)).toHaveAttribute('aria-selected', 'false'); + await expect(d.getTab(1)).toHaveAttribute('aria-selected', 'true'); + await expect(d.getTab(2)).toHaveAttribute('aria-selected', 'false'); + await expect(d.getTabPanel()).toBeVisible(); + await expect(d.getTabPanel()).toHaveId(/_1/); + }); + + test(`GIVEN 3 tabs + WHEN changing the selected index programmatically to the middle + THEN render the middle panel`, async ({ page }) => { + const { driver: d } = await setup(page, 'programmatic'); + + await expect(d.getTabPanel()).toHaveId(/_0/); + await page.getByRole('button', { name: /Select Tab 1/i }).click(); + await expect(d.getTabPanel()).toHaveId(/_1/); + }); + + test(`GIVEN 3 tabs + WHEN clicking the middle one + THEN onSelectedIndexChange should be called`, async ({ page }) => { + const { driver: d } = await setup(page, 'on-selected-index-change'); + + await expect(page.getByText(/Selected Index/i)).toContainText('0'); + await d.getTab(1).click(); + await expect(page.getByText(/Selected Index/i)).toContainText('1'); + }); + + test(`GIVEN a tab with a custom onClick$ handler + WHEN tab is clicked on + THEN the handler should be called`, async ({ page }) => { + const { driver: d } = await setup(page, 'on-click'); + + await expect(d.getTab(0)).toContainText('Maria'); + await d.getTab(0).click(); + await expect(d.getTab(0)).toContainText('Jack'); + }); + + test.describe('Dynamic Tabs', () => { + test(`GIVEN 3 tabs, + WHEN removing the last one dynamically + THEN only 2 should remain`, async ({ page }) => { + const { driver: d } = await setup(page, 'dynamic'); + + await d.getTab(2).getByText('x').click(); + await expect(d.getAllTabs()).toHaveCount(2); + }); + + test(`GIVEN 3 tabs, + WHEN selecting 3rd + AND removing 1st dynamically + AND clicking 2nd (now 1st) + THEN the correct tab should be displayed`, async ({ page }) => { + const { driver: d } = await setup(page, 'dynamic'); + + await d.getTab(2).click(); + await expect(d.getTabPanel()).toHaveId(/_2/); + + await d.getTab(0).getByText('x').click(); + await expect(d.getAllTabs()).toHaveCount(2); + + await d.getTab(0).click(); + await expect(d.getTabPanel()).toHaveId(/_0/); + }); + + test(`GIVEN 3 tabs + WHEN clicking on the last one and then removing it + THEN the second tab should be shown`, async ({ page }) => { + const { driver: d } = await setup(page, 'dynamic'); + + await d.getTab(2).click(); + await expect(d.getTabPanel()).toHaveId(/_2/); + + await d.getTab(2).getByText('x').click(); + await expect(d.getTabPanel()).toHaveId(/_1/); + await expect(d.getTabPanel()).toHaveText(/Tab 2/); + }); + + test(`GIVEN 3 tabs + WHEN clicking on the 3rd one and then removing the 2nd + THEN the third tab should be shown`, async ({ page }) => { + const { driver: d } = await setup(page, 'dynamic'); + + await d.getTab(2).click(); + await d.getTab(1).getByText('x').click(); + await expect(d.getTabPanel()).toHaveText(/Tab 3/); + await expect(d.getTabPanel()).toHaveId(/_1/); + }); + + // TODO: doesn't work atm, needs to be fixed + test.skip(`GIVEN 3 tabs + WHEN adding 1 tab before + the 2nd tab should remain selected + `, async () => { + // const { driver: d } = await setup(page, 'dynamic'); + // TODO: add logic + }); + }); + + test.describe('Manual Tab Ids', () => { + test(`GIVEN 2 tabs with custom tab ids + WHEN clicking on the second tab + THEN the second panel should be displayed + AND the selectedTabId should match the second tab id`, async ({ page }) => { + const { driver: d } = await setup(page, 'selected-tab-id'); + + await d.getTab(1).click(); + await expect(d.getTabPanel()).toHaveId(/id-1/i); + }); + }); + // TODO: Needs fix -> QWIK ERROR Code(3): Only primitive and object literals can be serialized [Function: HTabs] Error: Code(3): Only primitive and object literals can be serialized + test.describe.skip('Tabs inside of tabs', () => { + test(`GIVEN tabs inside of tabs + WHEN clicking on the root second tab + THEN it should show only the selected root panel`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-tabs-inside-of-tabs'); + + await d.getAllTabs().nth(1).click(); + await expect(d.getTabPanel()).toBeVisible(); + await expect(d.getTabPanel()).toContainText(/Carl Joachim Andersen/i); + }); + + test(`GIVEN tabs inside of tabs + WHEN clicking on the child second tab + THEN it should show only the selected child panel`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-tabs-inside-of-tabs'); + + await d.getAllTabs().nth(4).click(); // Click the child tab + await expect(d.getAllTabPanels().nth(1)).toContainText('Child Panel 2'); + }); + }); +}); + +test.describe('Orientation: Horizontal', () => { + test.describe('RIGHT key handling', () => { + test(`GIVEN 3 tabs and the focus is on the first, + WHEN triggering the right arrow key + THEN the focus should be on the next tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(0).focus(); + await d.getTab(0).press('ArrowRight'); + await expect(d.getTab(1)).toBeFocused(); + }); + + test(`GIVEN 3 tabs and the focus is on the last, + WHEN triggering the right arrow key + THEN the focus should be on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(2).focus(); + await d.getTab(2).press('ArrowRight'); + await expect(d.getTab(0)).toBeFocused(); + }); + }); + + test.describe('LEFT key handling', () => { + test(`GIVEN 3 tabs and the focus is on the second, + WHEN triggering the left arrow key + THEN the focus should be on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(1).focus(); + await d.getTab(1).press('ArrowLeft'); + await expect(d.getTab(0)).toBeFocused(); + }); + + test(`GIVEN 3 tabs and the focus is on the first, + WHEN triggering the left arrow key + THEN the focus should be on the last tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(0).focus(); + await d.getTab(0).press('ArrowLeft'); + await expect(d.getTab(2)).toBeFocused(); + }); + }); + + test.describe('Manual behavior', () => { + test(`GIVEN 3 tabs + WHEN clicking the first one and triggering the right arrow key and then "enter" + THEN the middle panel should be selected`, async ({ page }) => { + const { driver: d } = await setup(page, 'manual'); + + await d.getTab(0).click(); + await d.getTab(0).press('ArrowRight'); + await expect(d.getTabPanel()).toHaveId(/_0/); + await d.getTab(1).press('Enter'); + await expect(d.getTabPanel()).toHaveId(/_1/); + }); + }); +}); + +test.describe('Orientation: Vertical', () => { + test.describe('DOWN key handling', () => { + test(`GIVEN 3 vertical tabs and the focus is on the first, + WHEN triggering the down arrow key + THEN the focus should be on the next tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical'); + + await d.getTab(0).focus(); + await d.getTab(0).press('ArrowDown'); + await expect(d.getTab(1)).toBeFocused(); + }); + + test(`GIVEN 3 vertical tabs and the focus is on the last, + WHEN triggering the down arrow key + THEN the focus should be on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical'); + + await d.getTab(2).focus(); + await d.getTab(2).press('ArrowDown'); + await expect(d.getTab(0)).toBeFocused(); + }); + + test(`GIVEN 3 vertical tabs and the focus is on the first, + WHEN triggering the right arrow key or left arrow key + THEN the focus should stay on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical'); + + await d.getTab(0).focus(); + await d.getTab(0).press('ArrowRight'); + await expect(d.getTab(0)).toBeFocused(); + + await d.getTab(0).press('ArrowLeft'); + await expect(d.getTab(0)).toBeFocused(); + }); + }); + + test.describe('UP key handling', () => { + test(`GIVEN 3 vertical tabs and the focus is on the second, + WHEN triggering the up arrow key + THEN the focus should be on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical'); + + await d.getTab(1).focus(); + await d.getTab(1).press('ArrowUp'); + await expect(d.getTab(0)).toBeFocused(); + }); + + test(`GIVEN 3 vertical tabs and the focus is on the first, + WHEN triggering the up arrow key + THEN the focus should be on the last tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical'); + + await d.getTab(0).focus(); + await d.getTab(0).press('ArrowUp'); + await expect(d.getTab(2)).toBeFocused(); + }); + }); +}); + +test.describe('Home, End, PageUp and PageDown keys handling', () => { + test(`GIVEN 3 tabs and the focus is on the third, + WHEN triggering the 'home' key + THEN the focus should be on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(2).focus(); + await d.getTab(2).press('Home'); + await expect(d.getTab(0)).toBeFocused(); + }); + + test(`GIVEN 3 vertical tabs and the focus is on the third, + WHEN triggering the 'home' key + THEN the focus should be on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'vertical'); + + await d.getTab(2).focus(); + await d.getTab(2).press('Home'); + await expect(d.getTab(0)).toBeFocused(); + }); + + test(`GIVEN 3 tabs and the focus is on the third, + WHEN triggering the 'pageUp' key + THEN the focus should be on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(2).focus(); + await d.getTab(2).press('PageUp'); + await expect(d.getTab(0)).toBeFocused(); + }); + + test(`GIVEN 3 tabs and the focus is on the first, + WHEN triggering the 'end' key + THEN the focus should be on the last tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(0).focus(); + await d.getTab(0).press('End'); + await expect(d.getTab(2)).toBeFocused(); + }); + + test(`GIVEN 3 tabs on a long page and the focus is on the third, + WHEN triggering the 'pageDown' key + THEN the focus should be on the last tab and the page should not scroll`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(0).focus(); + await d.getTab(0).press('PageDown'); + const scrollY = await page.evaluate(() => window.scrollY); + expect(scrollY).toBe(0); + }); + + test(`GIVEN 3 tabs and the focus is on the first, + WHEN triggering the 'pageDown' key + THEN the focus should be on the last tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'first'); + + await d.getTab(0).focus(); + await d.getTab(0).press('PageDown'); + await expect(d.getTab(2)).toBeFocused(); + }); +}); + +test.describe('Disabled tabs', () => { + test(`GIVEN 4 tabs and the first one is disabled + WHEN loading the component + THEN the selected tab be the second`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await expect(d.getTab(0)).toBeDisabled(); + await expect(d.getTabPanel()).toHaveId(/_1/); + }); + + // TODO: ask jack -> what is the purpose of this test? how can we have 4 tabs and 3-5 disabled 😅? + test.skip(`GIVEN 4 tabs with tab 3 selected and tabs 3-5 are disabled + WHEN loading the component + THEN the selected tab should be the second tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await expect(d.getTabPanel()).toContainText('Panel 2'); + await expect(d.getTab(2)).toBeDisabled(); + await expect(d.getTab(3)).toBeDisabled(); + await expect(d.getTab(4)).toBeDisabled(); + }); + + // skipping short version for now + test.skip(`GIVEN 4 tabs written with the short version and the middle TabPanel has a disabled prop + WHEN focusing on first component and hitting the right key + THEN the selected tab should be the third one`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(0).focus(); + await d.getTab(0).press('ArrowRight'); + await expect(d.getTab(2)).toBeFocused(); + }); + + // TODO: requires playwright component testing or a separete test-example file + test.skip(`GIVEN 4 disabled tabs + WHEN loading the component + THEN no panel or tab should be selected`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await expect(d.getTabPanel()).not.toBeVisible(); + }); + + test(`GIVEN 4 horizontal tabs and the first and third tabs are disabled and focus is on the second, + WHEN triggering the right arrow key + THEN the focus should be on the fourth tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(1).focus(); + await d.getTab(1).press('ArrowRight'); + await expect(d.getTab(3)).toBeFocused(); + }); + + test(`GIVEN 4 horizontal tabs with the first one disabled and last one is focused + WHEN triggering the right arrow key + THEN the focus should be on the second tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(3).focus(); + await d.getTab(3).press('ArrowRight'); + await expect(d.getTab(1)).toBeFocused(); + }); + + test(`GIVEN 4 tabs and the first and third are disabled and the focus is on the second, + WHEN triggering the 'end' key + THEN the focus should be on the fourth tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(1).focus(); + await d.getTab(1).press('End'); + await expect(d.getTab(3)).toBeFocused(); + }); + + test(`GIVEN 4 tabs and the first is disabled and the focus is on the fourth, + WHEN triggering the 'home' key + THEN the focus should be on the second tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(3).focus(); + await d.getTab(3).press('Home'); + await expect(d.getTab(1)).toBeFocused(); + }); + + test(`GIVEN 4 tabs and the first and thrid are disabled and the focus is on the second, + WHEN triggering the right arrow key + THEN the focus should be on the fourth tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(1).focus(); + await d.getTab(1).press('ArrowRight'); + await expect(d.getTab(3)).toBeFocused(); + }); + + // TODO: should this be the case? If so, it doesn't work. + test.skip(`GIVEN 4 tabs and the first and third are disabled and the focus is on the second, + WHEN triggering the down arrow key + THEN the focus should be on the fourth tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(1).focus(); + await d.getTab(1).press('ArrowDown'); + await expect(d.getTab(3)).toBeFocused(); + }); + + test(`GIVEN 4 tabs and the first and third are disabled and the focus is on the fourth, + WHEN triggering the left arrow key + THEN the focus should be on the second tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(3).focus(); + await d.getTab(3).press('ArrowLeft'); + await expect(d.getTab(1)).toBeFocused(); + }); + + // TODO: requires playwright component testing or a separete test-example file + test.skip(`GIVEN 3 vertical tabs and the second is disabled and the focus is on the first, + WHEN triggering the down arrow key + THEN the focus should be on the third tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(0).focus(); + await d.getTab(0).press('ArrowDown'); + await expect(d.getTab(2)).toBeFocused(); + }); + + // TODO: requires playwright component testing or a separete test-example file + test.skip(`GIVEN 3 vertical tabs and the second is disabled and the focus is on the third, + WHEN triggering the up arrow key + THEN the focus should be on the first tab`, async ({ page }) => { + const { driver: d } = await setup(page, 'disabled'); + + await d.getTab(2).focus(); + await d.getTab(2).press('ArrowUp'); + await expect(d.getTab(0)).toBeFocused(); + }); +}); + +test.skip('Shorthand API', () => { + test(`GIVEN 3 tabs written using shorthand + WHEN clicking the middle one + THEN render the middle panel`, async ({ page }) => { + const { driver: d } = await setup(page, 'shorthand-api-tabs'); + + await expect(d.getAllTabs()).toHaveCount(3); + + await expect(d.getTabPanel()).toContainText('Panel 3'); + await d.getTab(1).click(); + await expect(d.getTabPanel()).toContainText('Panel 2'); + await expect(d.getTabList()).toBeVisible(); + }); +}); + +test.describe.skip('User-defined reusable TabList/Tab/TabPanel components', () => { + test(`GIVEN a user-defined TabList to Tabs + WHEN clicking the middle Tab + THEN render the middle panel`, async ({ page }) => { + const { driver: d } = await setup(page, 'reusable'); + + await expect(d.getAllTabs()).toHaveCount(3); + + await expect(d.getTabPanel()).toContainText('Panel 1'); + await d.getTab(1).click(); + await expect(d.getTabPanel()).toContainText('Panel 2'); + await expect(d.getTabList()).toBeVisible(); + }); +}); diff --git a/packages/kit-headless/src/components/tabs/tabs.tsx b/packages/kit-headless/src/components/tabs/tabs.tsx index 708fbf3ac..57e6a0bc3 100644 --- a/packages/kit-headless/src/components/tabs/tabs.tsx +++ b/packages/kit-headless/src/components/tabs/tabs.tsx @@ -348,7 +348,7 @@ export const TabsImpl = component$((props: TabsProps & { tabInfoList: TabInfo[] useContextProvider(tabsContextId, contextService); return ( -
+
); diff --git a/packages/kit-headless/tsconfig.editor.json b/packages/kit-headless/tsconfig.editor.json index 0a701cad9..51c845a06 100644 --- a/packages/kit-headless/tsconfig.editor.json +++ b/packages/kit-headless/tsconfig.editor.json @@ -7,6 +7,6 @@ "src/components/carousel/carousel.test.ts" ], "compilerOptions": { - "types": ["node", "jest", "@testing-library/jest-dom", "@testing-library/cypress"] + "types": ["node", "jest", "@testing-library/jest-dom"] } } diff --git a/packages/kit-headless/tsconfig.json b/packages/kit-headless/tsconfig.json index 8e93230d4..f73b68be9 100644 --- a/packages/kit-headless/tsconfig.json +++ b/packages/kit-headless/tsconfig.json @@ -31,9 +31,6 @@ }, { "path": "./tsconfig.editor.json" - }, - { - "path": "./cypress/tsconfig.json" } ] } diff --git a/packages/kit-headless/tsconfig.lib.json b/packages/kit-headless/tsconfig.lib.json index 60d26e8a7..fba33888d 100644 --- a/packages/kit-headless/tsconfig.lib.json +++ b/packages/kit-headless/tsconfig.lib.json @@ -6,8 +6,6 @@ }, "files": [], "exclude": [ - "cypress/**/*", - "cypress.config.ts", "**/*.cy.ts", "**/*.cy.js", "**/*.cy.tsx", diff --git a/packages/kit-headless/tsconfig.spec.json b/packages/kit-headless/tsconfig.spec.json index e7af2b2a7..0a8516abd 100644 --- a/packages/kit-headless/tsconfig.spec.json +++ b/packages/kit-headless/tsconfig.spec.json @@ -4,9 +4,6 @@ "outDir": "../../dist/out-tsc", "types": [ "vitest/globals", - "cypress", - "cypress-axe", - "@testing-library/cypress", "node" ] }, diff --git a/packages/kit-styled/tsconfig.generators.json b/packages/kit-styled/tsconfig.generators.json index c60998c89..3d9ddbab5 100644 --- a/packages/kit-styled/tsconfig.generators.json +++ b/packages/kit-styled/tsconfig.generators.json @@ -8,8 +8,6 @@ }, "files": [], "exclude": [ - "cypress/**/*", - "cypress.config.ts", "**/*.cy.ts", "**/*.cy.js", "**/*.cy.tsx", diff --git a/packages/kit-styled/tsconfig.lib.json b/packages/kit-styled/tsconfig.lib.json index f9825f668..1f255190b 100644 --- a/packages/kit-styled/tsconfig.lib.json +++ b/packages/kit-styled/tsconfig.lib.json @@ -7,8 +7,6 @@ "files": [], "exclude": [ "jest.config.ts", - "cypress/**/*", - "cypress.config.ts", "**/*.cy.ts", "**/*.cy.js", "**/*.cy.tsx", diff --git a/packages/themes/tsconfig.lib.json b/packages/themes/tsconfig.lib.json index f9825f668..1f255190b 100644 --- a/packages/themes/tsconfig.lib.json +++ b/packages/themes/tsconfig.lib.json @@ -7,8 +7,6 @@ "files": [], "exclude": [ "jest.config.ts", - "cypress/**/*", - "cypress.config.ts", "**/*.cy.ts", "**/*.cy.js", "**/*.cy.tsx", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0454327d2..0464388de 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,12 +29,6 @@ importers: '@clack/prompts': specifier: ^0.7.0 version: 0.7.0 - '@cypress/code-coverage': - specifier: ^3.12.39 - version: 3.12.39(@babel/core@7.24.6)(@babel/preset-env@7.24.6(@babel/core@7.24.6))(babel-loader@9.1.3(@babel/core@7.24.6)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)))(cypress@13.13.0)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)) - '@cypress/vite-dev-server': - specifier: ^5.1.0 - version: 5.1.0 '@floating-ui/core': specifier: ^1.6.2 version: 1.6.2 @@ -56,9 +50,6 @@ importers: '@modular-forms/qwik': specifier: ^0.24.0 version: 0.24.0(@builder.io/qwik-city@1.7.3(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1))(@builder.io/qwik@1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)) - '@nx/cypress': - specifier: 19.4.2 - version: 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(cypress@13.13.0)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0)) '@nx/devkit': specifier: 19.4.2 version: 19.4.2(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) @@ -104,9 +95,6 @@ importers: '@swc/core': specifier: ^1.5.7 version: 1.5.29(@swc/helpers@0.5.11) - '@testing-library/cypress': - specifier: 10.0.1 - version: 10.0.1(cypress@13.13.0) '@types/decompress': specifier: 4.2.7 version: 4.2.7 @@ -161,18 +149,6 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 - cypress: - specifier: 13.13.0 - version: 13.13.0 - cypress-axe: - specifier: 1.5.0 - version: 1.5.0(axe-core@4.9.1)(cypress@13.13.0) - cypress-ct-qwik: - specifier: 0.3.0 - version: 0.3.0(@builder.io/qwik@1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1))(cypress@13.13.0) - cypress-real-events: - specifier: 1.12.0 - version: 1.12.0(cypress@13.13.0) danger: specifier: ^11.3.1 version: 11.3.1 @@ -188,9 +164,6 @@ importers: eslint-config-prettier: specifier: ^9.1.0 version: 9.1.0(eslint@8.57.0) - eslint-plugin-cypress: - specifier: ^3.2.0 - version: 3.3.0(eslint@8.57.0) eslint-plugin-playwright: specifier: ^1.6.2 version: 1.6.2(eslint@8.57.0) @@ -1153,44 +1126,14 @@ packages: cpu: [x64] os: [win32] - '@colors/colors@1.5.0': - resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} - engines: {node: '>=0.1.90'} - '@cspotcode/source-map-support@0.8.1': resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==} engines: {node: '>=12'} - '@cypress/code-coverage@3.12.39': - resolution: {integrity: sha512-ja7I/GRmkSAW9e3O7pideWcNUEHao0WT6sRyXQEURoxkJUASJssJ7Kb/bd3eMYmkUCiD5CRFqWR5BGF4mWVaUw==} - peerDependencies: - '@babel/core': ^7.0.1 - '@babel/preset-env': ^7.0.0 - babel-loader: ^8.3 || ^9 - cypress: '*' - webpack: ^4 || ^5 - - '@cypress/mount-utils@4.1.0': - resolution: {integrity: sha512-RDap/nVsIJIoJSBcceGdB2RFOgB1qPwJqdFrpwu7WIuMbaBhUASvZ1uYseE5NvpPsIx+sUjysGXeBG1BXNjUHA==} - '@cypress/request@3.0.1': resolution: {integrity: sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==} engines: {node: '>= 6'} - '@cypress/vite-dev-server@5.1.0': - resolution: {integrity: sha512-PrpL3S1m67JeHy6AXKxNgO8E/3Kg+P809oh4uPuGj8cZaWJ2mjfVTlTkzwJDPnaBV1KCxsOsY3bQUZlvPF/E7w==} - - '@cypress/webpack-preprocessor@6.0.2': - resolution: {integrity: sha512-0+1+4iy4W9PE6R5ywBNKAZoFp8Sf//w3UJ+CKTqkcAjA29b+dtsD0iFT70DsYE0BMqUM1PO7HXFGbXllQ+bRAA==} - peerDependencies: - '@babel/core': ^7.0.1 - '@babel/preset-env': ^7.0.0 - babel-loader: ^8.3 || ^9 - webpack: ^4 || ^5 - - '@cypress/xvfb@1.2.4': - resolution: {integrity: sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==} - '@emnapi/runtime@1.2.0': resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==} @@ -1813,9 +1756,6 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} - '@nrwl/cypress@19.4.2': - resolution: {integrity: sha512-Xse5MM7VMm6+CXeuPwz70sOkOTLBxK6rJBt9sfWN5xVXLy0kfvcYD6nk32eB5YUoNb589lORKGPpp78D1zT+fQ==} - '@nrwl/devkit@19.2.3': resolution: {integrity: sha512-OL6sc70gR/USasvbYzyYY44Hd5ZCde2UfiA5h8VeAYAJbq+JmtscpvjcnZ7OIsXyYEOxe1rypULElqu/8qpKzQ==} @@ -1863,14 +1803,6 @@ packages: '@nrwl/workspace@19.4.2': resolution: {integrity: sha512-+u8Ok6WF0rfaR5wL/WDIZtQhclLBREHvUdnjoLYtL8RspTyqSoQuOXQXP07Ln++rwLWmTIoE2NaSNKF7K0hLRQ==} - '@nx/cypress@19.4.2': - resolution: {integrity: sha512-b732py3ssBZJN2EJuQM3Ufo7IcqBk6XXNmMdqaXpi9MdpBHomRgZsMKG2IE87CI6nGWvZF7Bq/OhbZ8CJBtZLw==} - peerDependencies: - cypress: '>= 3 < 14' - peerDependenciesMeta: - cypress: - optional: true - '@nx/devkit@19.2.3': resolution: {integrity: sha512-if1WwRVexrQBBADObEcxVIivq4QRZWY/nYRhCQy/qfFI6Cu2jBSI6ZQ1uy7to2L2sQPLgn8v2beQZiAeZdIktg==} peerDependencies: @@ -2419,16 +2351,6 @@ packages: resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==} engines: {node: '>=14.16'} - '@testing-library/cypress@10.0.1': - resolution: {integrity: sha512-e8uswjTZIBhaIXjzEcrQQ8nHRWHgZH7XBxKuIWxZ/T7FxfWhCR48nFhUX5nfPizjVOKSThEfOSv67jquc1ASkw==} - engines: {node: '>=12', npm: '>=6'} - peerDependencies: - cypress: ^12.0.0 || ^13.0.0 - - '@testing-library/dom@9.3.4': - resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==} - engines: {node: '>=14'} - '@tootallnate/once@2.0.0': resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==} engines: {node: '>= 10'} @@ -2455,9 +2377,6 @@ packages: '@types/argparse@1.0.38': resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==} - '@types/aria-query@5.0.4': - resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} - '@types/babel__core@7.20.5': resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} @@ -2479,9 +2398,6 @@ packages: '@types/decompress@4.2.7': resolution: {integrity: sha512-9z+8yjKr5Wn73Pt17/ldnmQToaFHZxK0N1GHysuk/JIPT8RIdQeoInM01wWPgypRcvb6VH1drjuFpQ4zmY437g==} - '@types/eslint-scope@3.7.7': - resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} - '@types/eslint@8.56.10': resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==} @@ -2557,12 +2473,6 @@ packages: '@types/semver@7.5.8': resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} - '@types/sinonjs__fake-timers@8.1.1': - resolution: {integrity: sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==} - - '@types/sizzle@2.3.8': - resolution: {integrity: sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==} - '@types/stack-utils@2.0.3': resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==} @@ -2581,9 +2491,6 @@ packages: '@types/yargs@17.0.32': resolution: {integrity: sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==} - '@types/yauzl@2.10.3': - resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==} - '@typescript-eslint/eslint-plugin@7.9.0': resolution: {integrity: sha512-6e+X0X3sFe/G/54aC3jt0txuMTURqLyekmEHViqyA2VnxhLMpvA6nqmcjIy+Cr9tLDHPssA74BP5Mx9HQIxBEA==} engines: {node: ^18.18.0 || >=20.0.0} @@ -2812,57 +2719,6 @@ packages: '@vue/shared@3.4.27': resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==} - '@webassemblyjs/ast@1.12.1': - resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} - - '@webassemblyjs/floating-point-hex-parser@1.11.6': - resolution: {integrity: sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==} - - '@webassemblyjs/helper-api-error@1.11.6': - resolution: {integrity: sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==} - - '@webassemblyjs/helper-buffer@1.12.1': - resolution: {integrity: sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==} - - '@webassemblyjs/helper-numbers@1.11.6': - resolution: {integrity: sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==} - - '@webassemblyjs/helper-wasm-bytecode@1.11.6': - resolution: {integrity: sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==} - - '@webassemblyjs/helper-wasm-section@1.12.1': - resolution: {integrity: sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==} - - '@webassemblyjs/ieee754@1.11.6': - resolution: {integrity: sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==} - - '@webassemblyjs/leb128@1.11.6': - resolution: {integrity: sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==} - - '@webassemblyjs/utf8@1.11.6': - resolution: {integrity: sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==} - - '@webassemblyjs/wasm-edit@1.12.1': - resolution: {integrity: sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==} - - '@webassemblyjs/wasm-gen@1.12.1': - resolution: {integrity: sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==} - - '@webassemblyjs/wasm-opt@1.12.1': - resolution: {integrity: sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==} - - '@webassemblyjs/wasm-parser@1.12.1': - resolution: {integrity: sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==} - - '@webassemblyjs/wast-printer@1.12.1': - resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==} - - '@xtuc/ieee754@1.2.0': - resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} - - '@xtuc/long@4.2.2': - resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==} - '@yarnpkg/lockfile@1.1.0': resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==} @@ -2893,11 +2749,6 @@ packages: acorn-globals@7.0.1: resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==} - acorn-import-attributes@1.9.5: - resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==} - peerDependencies: - acorn: ^8 - acorn-jsx@5.3.2: resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -2927,41 +2778,16 @@ packages: resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==} engines: {node: '>= 14'} - aggregate-error@3.1.0: - resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==} - engines: {node: '>=8'} - aggregate-error@4.0.1: resolution: {integrity: sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==} engines: {node: '>=12'} - ajv-formats@2.1.1: - resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} - peerDependencies: - ajv: ^8.0.0 - peerDependenciesMeta: - ajv: - optional: true - - ajv-keywords@3.5.2: - resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==} - peerDependencies: - ajv: ^6.9.1 - - ajv-keywords@5.1.0: - resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==} - peerDependencies: - ajv: ^8.8.2 - ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} ajv@8.12.0: resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==} - ajv@8.14.0: - resolution: {integrity: sha512-oYs1UUtO97ZO2lJ4bwnWeQW8/zvOIQLGKcvPTsWmvc2SYgBb+upuNS5NxoLaMU4h8Ju3Nbj6Cq8mD2LQoqVKFA==} - all-contributors-cli@6.26.1: resolution: {integrity: sha512-Ymgo3FJACRBEd1eE653FD1J/+uD0kqpUNYfr9zNC1Qby0LgbhDBzB3EF6uvkAbYpycStkk41J+0oo37Lc02yEw==} engines: {node: '>=4'} @@ -3057,16 +2883,6 @@ packages: resolution: {integrity: sha512-FCAJojipPn0bXjuEpjOOOMN8FZDkxfWWp4JGN9mifU2IhxvKyXZYqpzPHdnTSUpmPDy+tsslB6Z1g+Vg6nVbYA==} engines: {node: '>=8'} - append-transform@2.0.0: - resolution: {integrity: sha512-7yeyCEurROLQJFv5Xj4lEGTy0borxepjFv1g22oAdqFu//SrAlDl1O1Nxx15SH1RoliUml6p8dwJW9jvZughhg==} - engines: {node: '>=8'} - - arch@2.2.0: - resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==} - - archy@1.0.0: - resolution: {integrity: sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==} - arg@4.1.3: resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==} @@ -3079,9 +2895,6 @@ packages: argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} - aria-query@5.1.3: - resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==} - array-buffer-byte-length@1.0.1: resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==} engines: {node: '>= 0.4'} @@ -3125,10 +2938,6 @@ packages: assertion-error@1.1.0: resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==} - astral-regex@2.0.0: - resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==} - engines: {node: '>=8'} - astring@1.8.6: resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==} hasBin: true @@ -3145,10 +2954,6 @@ packages: asynckit@0.4.0: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} - at-least-node@1.0.0: - resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==} - engines: {node: '>= 4.0.0'} - atomic-sleep@1.0.0: resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==} engines: {node: '>=8.0.0'} @@ -3183,13 +2988,6 @@ packages: peerDependencies: '@babel/core': ^7.8.0 - babel-loader@9.1.3: - resolution: {integrity: sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==} - engines: {node: '>= 14.15.0'} - peerDependencies: - '@babel/core': ^7.12.0 - webpack: '>=5' - babel-plugin-const-enum@1.2.0: resolution: {integrity: sha512-o1m/6iyyFnp9MRsK1dHF3bneqyf3AlM2q3A/YbgQr2pCat6B6XJVDv2TXqzfY2RYUi4mak6WAksSBPlyYGx9dg==} peerDependencies: @@ -3276,15 +3074,6 @@ packages: blake3-wasm@2.1.5: resolution: {integrity: sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g==} - blob-util@2.0.2: - resolution: {integrity: sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==} - - bluebird@3.7.1: - resolution: {integrity: sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==} - - bluebird@3.7.2: - resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==} - body-parser@1.20.2: resolution: {integrity: sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==} engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} @@ -3380,14 +3169,6 @@ packages: resolution: {integrity: sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==} engines: {node: '>=8'} - cachedir@2.4.0: - resolution: {integrity: sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==} - engines: {node: '>=6'} - - caching-transform@4.0.0: - resolution: {integrity: sha512-kpqOvwXnjjN44D89K5ccQC+RUrsy7jB/XLlRrx0D7/2HNcTPqzsb6XgYoErwko6QsV184CA2YgS1fxDiiDZMWA==} - engines: {node: '>=8'} - call-bind@1.0.7: resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==} engines: {node: '>= 0.4'} @@ -3477,18 +3258,10 @@ packages: check-error@1.0.3: resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==} - check-more-types@2.24.0: - resolution: {integrity: sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==} - engines: {node: '>= 0.8.0'} - chokidar@3.6.0: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} - chrome-trace-event@1.0.4: - resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} - engines: {node: '>=6.0'} - ci-info@3.9.0: resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==} engines: {node: '>=8'} @@ -3499,10 +3272,6 @@ packages: class-variance-authority@0.7.0: resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==} - clean-stack@2.2.0: - resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} - engines: {node: '>=6'} - clean-stack@4.2.0: resolution: {integrity: sha512-LYv6XPxoyODi36Dp976riBtSY27VmFo+MKqEU9QCCWyTrdEPDog+RWA7xQWHi6Vbp61j5c4cdzzX1NidnwtUWg==} engines: {node: '>=12'} @@ -3527,18 +3296,10 @@ packages: resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==} engines: {node: '>=6'} - cli-table3@0.6.5: - resolution: {integrity: sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==} - engines: {node: 10.* || >= 12.*} - cli-truncate@0.2.1: resolution: {integrity: sha512-f4r4yJnbT++qUPI9NR4XLDLq41gQ+uqnPItWG0F5ZkehuNiTTa3EY0S4AqTSUOeJ7/zU41oWPQSNkW5BqPL9bg==} engines: {node: '>=0.10.0'} - cli-truncate@2.1.0: - resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==} - engines: {node: '>=8'} - cli-width@2.2.1: resolution: {integrity: sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==} @@ -3639,10 +3400,6 @@ packages: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} - commander@6.2.1: - resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==} - engines: {node: '>= 6'} - commander@7.2.0: resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} engines: {node: '>= 10'} @@ -3651,16 +3408,6 @@ packages: resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==} engines: {node: ^12.20.0 || >=14} - common-path-prefix@3.0.0: - resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==} - - common-tags@1.8.2: - resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==} - engines: {node: '>=4.0.0'} - - commondir@1.0.1: - resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} - compare-func@2.0.0: resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==} @@ -3766,9 +3513,6 @@ packages: engines: {node: '>=16'} hasBin: true - convert-source-map@1.9.0: - resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} - convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} @@ -3834,9 +3578,6 @@ packages: resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==} engines: {node: '>=12'} - css-select@4.3.0: - resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} - css-select@5.1.0: resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} @@ -3891,29 +3632,6 @@ packages: resolution: {integrity: sha512-QTaY0XjjhTQOdguARF0lGKm5/mEq9PD9/VhZZegHDIBq2tQwgNpHc3dneD4mGo2iJs+fTKv5Bp0fZ+BRuY3Z0g==} engines: {node: '>= 0.1.90'} - cypress-axe@1.5.0: - resolution: {integrity: sha512-Hy/owCjfj+25KMsecvDgo4fC/781ccL+e8p+UUYoadGVM2ogZF9XIKbiM6KI8Y3cEaSreymdD6ZzccbI2bY0lQ==} - engines: {node: '>=10'} - peerDependencies: - axe-core: ^3 || ^4 - cypress: ^10 || ^11 || ^12 || ^13 - - cypress-ct-qwik@0.3.0: - resolution: {integrity: sha512-S1PcR6BbZMHprTYmYvYcZODNFy+WOQewUIWCGRA2ruq4H6I2zJSVLy0VxynKuxgSx3OKp5GYUIXSTmdxkTdk4Q==} - peerDependencies: - '@builder.io/qwik': '>0.23.0' - cypress: '>=12.8.1' - - cypress-real-events@1.12.0: - resolution: {integrity: sha512-oiy+4kGKkzc2PT36k3GGQqkGxNiVypheWjMtfyi89iIk6bYmTzeqxapaLHS3pnhZOX1IEbTDUVxh8T4Nhs1tyQ==} - peerDependencies: - cypress: ^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x - - cypress@13.13.0: - resolution: {integrity: sha512-ou/MQUDq4tcDJI2FsPaod2FZpex4kpIK43JJlcBgWrX8WX7R/05ZxGTuxedOuZBfxjZxja+fbijZGyxiLP6CFA==} - engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0} - hasBin: true - danger@11.3.1: resolution: {integrity: sha512-+slkGnbf0czY7g4LSuYpYkKJgFrb9YIXFJvV5JAuLLF39CXLlUw0iebgeL3ASK1t6RDb8xe+Rk2F5ilh2Hdv2w==} engines: {node: '>=14.13.1'} @@ -3963,9 +3681,6 @@ packages: dayjs@1.11.10: resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==} - dayjs@1.11.11: - resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==} - de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} @@ -3977,14 +3692,6 @@ packages: supports-color: optional: true - debug@3.2.7: - resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - debug@4.3.4: resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -4060,10 +3767,6 @@ packages: resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==} engines: {node: '>=6'} - deep-equal@2.2.3: - resolution: {integrity: sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==} - engines: {node: '>= 0.4'} - deep-extend@0.6.0: resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==} engines: {node: '>=4.0.0'} @@ -4083,10 +3786,6 @@ packages: resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==} engines: {node: '>=18'} - default-require-extensions@3.0.1: - resolution: {integrity: sha512-eXTJmRbm2TIt9MgWTsOH1wEuhew6XGZcMeGKCtLedIg/NCsg1iBePXkceTdK4Fii7pzmN9tGsZhKzZ4h7O/fxw==} - engines: {node: '>=8'} - defaults@1.0.4: resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==} @@ -4179,12 +3878,6 @@ packages: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} - dom-accessibility-api@0.5.16: - resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==} - - dom-serializer@1.4.1: - resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==} - dom-serializer@2.0.0: resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} @@ -4196,17 +3889,10 @@ packages: engines: {node: '>=12'} deprecated: Use your platform's native DOMException instead - domhandler@4.3.1: - resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==} - engines: {node: '>= 4'} - domhandler@5.0.3: resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} engines: {node: '>= 4'} - domutils@2.8.0: - resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==} - domutils@3.1.0: resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} @@ -4281,10 +3967,6 @@ packages: end-of-stream@1.4.4: resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==} - enhanced-resolve@5.17.0: - resolution: {integrity: sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==} - engines: {node: '>=10.13.0'} - enquirer@2.3.6: resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==} engines: {node: '>=8.6'} @@ -4293,9 +3975,6 @@ packages: resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==} engines: {node: '>=8.6'} - entities@2.2.0: - resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==} - entities@4.5.0: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} @@ -4323,12 +4002,6 @@ packages: resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} engines: {node: '>= 0.4'} - es-get-iterator@1.1.3: - resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==} - - es-module-lexer@1.5.3: - resolution: {integrity: sha512-i1gCgmR9dCl6Vil6UKPI/trA69s08g/syhiDK9TG0Nf1RJjjFI+AzoWW7sPufzkgYAn861skuCwJa0pIIHYxvg==} - es-object-atoms@1.0.0: resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==} engines: {node: '>= 0.4'} @@ -4344,9 +4017,6 @@ packages: resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==} engines: {node: '>= 0.4'} - es6-error@4.1.1: - resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==} - esbuild@0.17.19: resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==} engines: {node: '>=12'} @@ -4395,11 +4065,6 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-cypress@3.3.0: - resolution: {integrity: sha512-HPHMPzYBIshzJM8wqgKSKHG2p/8R0Gbg4Pb3tcdC9WrmkuqxiKxSKbjunUrajhV5l7gCIFrh1P7C7GuBqH6YuQ==} - peerDependencies: - eslint: '>=7' - eslint-plugin-playwright@1.6.2: resolution: {integrity: sha512-mraN4Em3b5jLt01q7qWPyLg0Q5v3KAWfJSlEWwldyUXoa7DSPrBR4k6B6LROLqipsG8ndkwWMdjl1Ffdh15tag==} engines: {node: '>=16.6.0'} @@ -4416,10 +4081,6 @@ packages: peerDependencies: eslint: ^8.57.0 - eslint-scope@5.1.1: - resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==} - engines: {node: '>=8.0.0'} - eslint-scope@7.2.2: resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -4450,10 +4111,6 @@ packages: resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} engines: {node: '>=4.0'} - estraverse@4.3.0: - resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==} - engines: {node: '>=4.0'} - estraverse@5.3.0: resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} engines: {node: '>=4.0'} @@ -4494,17 +4151,10 @@ packages: resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==} engines: {node: '>=6'} - eventemitter2@6.4.7: - resolution: {integrity: sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==} - events@3.3.0: resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==} engines: {node: '>=0.8.x'} - execa@4.1.0: - resolution: {integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==} - engines: {node: '>=10'} - execa@5.1.1: resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==} engines: {node: '>=10'} @@ -4513,10 +4163,6 @@ packages: resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==} engines: {node: '>=16.17'} - executable@4.1.1: - resolution: {integrity: sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==} - engines: {node: '>=4'} - exit-hook@2.2.1: resolution: {integrity: sha512-eNTPlAD67BmP31LDINZ3U7HSF8l57TxOY2PmBJ1shpCvpnxBF93mWCE8YHBnXs8qiUZJc9WDcWIeC3a2HIAMfw==} engines: {node: '>=6'} @@ -4562,11 +4208,6 @@ packages: resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==} engines: {node: '>=4'} - extract-zip@2.0.1: - resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==} - engines: {node: '>= 10.17.0'} - hasBin: true - extsprintf@1.3.0: resolution: {integrity: sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==} engines: {'0': node >=0.6.0} @@ -4657,14 +4298,6 @@ packages: resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==} engines: {node: '>= 0.8'} - find-cache-dir@3.3.2: - resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==} - engines: {node: '>=8'} - - find-cache-dir@4.0.0: - resolution: {integrity: sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==} - engines: {node: '>=14.16'} - find-up-simple@1.0.0: resolution: {integrity: sha512-q7Us7kcjj2VMePAa02hDAF6d+MzsdsAWEwYyOpwUtlerRBkOEPBCRZrAV4XfcSN8fHAgaD0hP7miwoay6DCprw==} engines: {node: '>=18'} @@ -4710,10 +4343,6 @@ packages: for-each@0.3.3: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} - foreground-child@2.0.0: - resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==} - engines: {node: '>=8.0.0'} - foreground-child@3.1.1: resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==} engines: {node: '>=14'} @@ -4748,9 +4377,6 @@ packages: resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==} engines: {node: '>= 0.6'} - fromentries@1.3.2: - resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==} - front-matter@4.0.2: resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==} @@ -4773,10 +4399,6 @@ packages: resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==} engines: {node: '>=6 <7 || >=8'} - fs-extra@9.1.0: - resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==} - engines: {node: '>=10'} - fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} @@ -4846,9 +4468,6 @@ packages: resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==} engines: {node: '>= 0.4'} - getos@3.2.1: - resolution: {integrity: sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==} - getpass@0.1.7: resolution: {integrity: sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==} @@ -4993,10 +4612,6 @@ packages: resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} engines: {node: '>= 0.4'} - hasha@5.2.2: - resolution: {integrity: sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==} - engines: {node: '>=8'} - hasown@2.0.2: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} @@ -5095,10 +4710,6 @@ packages: human-id@1.0.2: resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==} - human-signals@1.1.1: - resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==} - engines: {node: '>=8.12.0'} - human-signals@2.1.0: resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==} engines: {node: '>=10.17.0'} @@ -5231,10 +4842,6 @@ packages: is-alphanumerical@2.0.1: resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==} - is-arguments@1.1.1: - resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==} - engines: {node: '>= 0.4'} - is-array-buffer@3.0.4: resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==} engines: {node: '>= 0.4'} @@ -5260,10 +4867,6 @@ packages: resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==} engines: {node: '>= 0.4'} - is-ci@3.0.1: - resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==} - hasBin: true - is-core-module@2.13.1: resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==} @@ -5345,10 +4948,6 @@ packages: resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==} engines: {node: '>=12'} - is-map@2.0.3: - resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==} - engines: {node: '>= 0.4'} - is-natural-number@4.0.1: resolution: {integrity: sha512-Y4LTamMe0DDQIIAlaer9eKebAlDSV6huy+TWhJVPlzZh2o4tRP5SQWFlLn5N0To4mDD22/qdOq+veo1cSISLgQ==} @@ -5417,10 +5016,6 @@ packages: resolution: {integrity: sha512-ezxLUq30kiTvP0w/5n9tj4qTOKlrA07Oty1hwTQ+lcqw11x6uc8sp7VRb2OVGRzKfCHZ2A22T5Zsau/Q2Akb0g==} engines: {node: '>=12'} - is-set@2.0.3: - resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==} - engines: {node: '>= 0.4'} - is-shared-array-buffer@1.0.3: resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==} engines: {node: '>= 0.4'} @@ -5472,17 +5067,9 @@ packages: resolution: {integrity: sha512-LXdhGlYqUPdvEyIhWPEEwYYK3yrUiPcBjmFGlZNv1u5GtIL5qQRf7ddDyPNAvsMFqdzS923FROpTQU97tLe3JQ==} engines: {node: '>=12'} - is-weakmap@2.0.2: - resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==} - engines: {node: '>= 0.4'} - is-weakref@1.0.2: resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==} - is-weakset@2.0.3: - resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==} - engines: {node: '>= 0.4'} - is-windows@1.0.2: resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==} engines: {node: '>=0.10.0'} @@ -5515,14 +5102,6 @@ packages: resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==} engines: {node: '>=8'} - istanbul-lib-hook@3.0.0: - resolution: {integrity: sha512-Pt/uge1Q9s+5VAZ+pCo16TYMWPBIl+oaNIjgLQxcX0itS6ueeaA+pEfThZpH8WxhFgCiEb8sAJY6MdUKgiIWaQ==} - engines: {node: '>=8'} - - istanbul-lib-instrument@4.0.3: - resolution: {integrity: sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==} - engines: {node: '>=8'} - istanbul-lib-instrument@5.2.1: resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==} engines: {node: '>=8'} @@ -5531,10 +5110,6 @@ packages: resolution: {integrity: sha512-1WUsZ9R1lA0HtBSohTkm39WTPlNKSJ5iFk7UwqXkBLoHQT+hfqPsfsTDVuZdKGaBwn7din9bS7SsnoAr943hvw==} engines: {node: '>=10'} - istanbul-lib-processinfo@2.0.3: - resolution: {integrity: sha512-NkwHbo3E00oybX6NGJi6ar0B29vxyvNwoC7eJ4G4Yq28UfY758Hgn/heV8VRFhevPED4LXfFz0DQ8z/0kw9zMg==} - engines: {node: '>=8'} - istanbul-lib-report@3.0.1: resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==} engines: {node: '>=10'} @@ -5684,10 +5259,6 @@ packages: resolution: {integrity: sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - jest-worker@27.5.1: - resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} - engines: {node: '>= 10.13.0'} - jest-worker@29.7.0: resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -5852,10 +5423,6 @@ packages: resolution: {integrity: sha512-KvNT4XqAMzdcL6ka6Tl3i2lYeFDgXNCuIX+xNx6ZMVR1dFq+idXd9FLKNMOIx0t9mJ9/HudyX4oZWXZQ0UJHeg==} engines: {node: '>=14.16'} - lazy-ass@1.6.0: - resolution: {integrity: sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==} - engines: {node: '> 0.8'} - leven@3.1.0: resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==} engines: {node: '>=6'} @@ -5900,15 +5467,6 @@ packages: resolution: {integrity: sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==} engines: {node: '>=4'} - listr2@3.14.0: - resolution: {integrity: sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==} - engines: {node: '>=10.0.0'} - peerDependencies: - enquirer: '>= 2.3.0 < 3' - peerDependenciesMeta: - enquirer: - optional: true - listr@0.14.3: resolution: {integrity: sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==} engines: {node: '>=6'} @@ -5917,10 +5475,6 @@ packages: resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==} engines: {node: '>=6'} - loader-runner@4.3.0: - resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==} - engines: {node: '>=6.11.5'} - local-pkg@0.5.0: resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==} engines: {node: '>=14'} @@ -5949,9 +5503,6 @@ packages: lodash.find@4.6.0: resolution: {integrity: sha512-yaRZoAV3Xq28F1iafWN1+a0rflOej93l1DQUejs3SZ41h2O9UJBoS9aueGjPDgAl4B6tPC0NuuchLKaDQQ3Isg==} - lodash.flattendeep@4.4.0: - resolution: {integrity: sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==} - lodash.get@4.4.2: resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} @@ -6019,10 +5570,6 @@ packages: resolution: {integrity: sha512-vlP11XfFGyeNQlmEn9tJ66rEW1coA/79m5z6BCkudjbAGE83uhAcGYrBFwfs3AdLiLzGRusRPAbSPK9xZteCmg==} engines: {node: '>=4'} - log-update@4.0.0: - resolution: {integrity: sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==} - engines: {node: '>=10'} - longest-streak@3.1.0: resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==} @@ -6059,10 +5606,6 @@ packages: resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==} engines: {node: '>=12'} - lz-string@1.5.0: - resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} - hasBin: true - magic-string@0.25.9: resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} @@ -6076,10 +5619,6 @@ packages: resolution: {integrity: sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==} engines: {node: '>=4'} - make-dir@3.1.0: - resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} - engines: {node: '>=8'} - make-dir@4.0.0: resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==} engines: {node: '>=10'} @@ -6468,19 +6007,12 @@ packages: resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==} engines: {node: '>= 6.13.0'} - node-html-parser@5.3.3: - resolution: {integrity: sha512-ncg1033CaX9UexbyA7e1N0aAoAYRDiV8jkTvzEnfd1GDvzFdrsXLzR4p4ik8mwLgnaKP/jyUFWDy9q3jvRT2Jw==} - node-int64@0.4.0: resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==} node-machine-id@1.1.12: resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==} - node-preload@0.2.1: - resolution: {integrity: sha512-RM5oyBy45cLEoHqCeh+MNuFAxO0vTFBLskvQbOKnEE7YTTSN4tbN8QWDIPQ6L+WvKsB/qLEGpYe2ZZ9d4W9OIQ==} - engines: {node: '>=8'} - node-releases@2.0.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} @@ -6562,11 +6094,6 @@ packages: '@swc/core': optional: true - nyc@15.1.0: - resolution: {integrity: sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==} - engines: {node: '>=8.9'} - hasBin: true - object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -6578,10 +6105,6 @@ packages: object-inspect@1.13.1: resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==} - object-is@1.1.6: - resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==} - engines: {node: '>= 0.4'} - object-keys@1.1.1: resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==} engines: {node: '>= 0.4'} @@ -6656,9 +6179,6 @@ packages: resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==} engines: {node: '>=0.10.0'} - ospath@1.2.2: - resolution: {integrity: sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==} - outdent@0.5.0: resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==} @@ -6709,14 +6229,6 @@ packages: resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==} engines: {node: '>=6'} - p-map@3.0.0: - resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==} - engines: {node: '>=8'} - - p-map@4.0.0: - resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==} - engines: {node: '>=10'} - p-map@5.5.0: resolution: {integrity: sha512-VFqfGDHlx87K66yZrNdI4YGtD70IRyd+zSvgks6mzHPRNkoKy+9EKP4SFC77/vTTQYmRmti7dvqC+m5jBrBAcg==} engines: {node: '>=12'} @@ -6737,10 +6249,6 @@ packages: resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==} engines: {node: '>=6'} - package-hash@4.0.0: - resolution: {integrity: sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==} - engines: {node: '>=8'} - package-json@8.1.1: resolution: {integrity: sha512-cbH9IAIJHNj9uXi196JVsRlt7cHKak6u/e6AkL/bkRelZ7rlL3X1YKxsZwa36xipOEKAsdtmaG6aAJoM1fx2zA==} engines: {node: '>=14.16'} @@ -6922,10 +6430,6 @@ packages: resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==} engines: {node: '>=8'} - pkg-dir@7.0.0: - resolution: {integrity: sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==} - engines: {node: '>=14.16'} - pkg-dir@8.0.0: resolution: {integrity: sha512-4peoBq4Wks0riS0z8741NVv+/8IiTvqnZAr8QGgtdifrtpdXbNw/FxRS1l6NFqm4EMzuS0EDqNNx4XGaz8cuyQ==} engines: {node: '>=18'} @@ -7062,14 +6566,6 @@ packages: engines: {node: '>=14'} hasBin: true - pretty-bytes@5.6.0: - resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==} - engines: {node: '>=6'} - - pretty-format@27.5.1: - resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} - engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} - pretty-format@29.7.0: resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -7095,10 +6591,6 @@ packages: process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} - process-on-spawn@1.0.0: - resolution: {integrity: sha512-1WsPDsUSMmZH5LeMLegqkPDrsGgsWwk1Exipy2hvB0o/F0ASzbpIctSCcZIK1ykJvtTJULEH+20WOFjMvGnCTg==} - engines: {node: '>=8'} - process-warning@1.0.0: resolution: {integrity: sha512-du4wfLyj4yCZq1VupnVSZmRsPJsNuxoDQFdCFHLaYiEbFBD7QE0a+I4D7hOxrVnh78QE/YipFAj9lXHiXocV+Q==} @@ -7126,9 +6618,6 @@ packages: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} engines: {node: '>= 0.10'} - proxy-from-env@1.0.0: - resolution: {integrity: sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==} - proxy-from-env@1.1.0: resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} @@ -7197,9 +6686,6 @@ packages: resolution: {integrity: sha512-lwqDGD6Z+IpX/vOJh2SuzWBmafYM4+6cbASGJNkdfR6jfaCJm6iKvHRGrom0xDvdTO3G9w+rnaSkN0hrkSL69w==} engines: {node: '>=18.0.0'} - randombytes@2.1.0: - resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} - range-parser@1.2.1: resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} engines: {node: '>= 0.6'} @@ -7212,9 +6698,6 @@ packages: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true - react-is@17.0.2: - resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} - react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} @@ -7325,10 +6808,6 @@ packages: peerDependencies: shiki: ^1.3.0 - release-zalgo@1.0.0: - resolution: {integrity: sha512-gUAyHVHPPC5wdqX/LG4LWtRYtgjxyX78oanFNTMMyFEfOqdC54s3eE82imuWKbOeqYht2CrNf64Qb8vgmmtZGA==} - engines: {node: '>=4'} - remark-mdx@3.0.1: resolution: {integrity: sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==} @@ -7341,9 +6820,6 @@ packages: remove-accents@0.5.0: resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==} - request-progress@3.0.0: - resolution: {integrity: sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==} - require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -7411,9 +6887,6 @@ packages: resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} engines: {iojs: '>=1.0.0', node: '>=0.10.0'} - rfdc@1.3.1: - resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==} - rimraf@2.4.5: resolution: {integrity: sha512-J5xnxTyqaiw06JjMftq7L9ouA448dw/E7dKghkP9WpKNuwmARNNg+Gk8/u5ryb9N/Yo2+z3MCwuqFK/+qPOPfQ==} deprecated: Rimraf versions prior to v4 are no longer supported @@ -7499,14 +6972,6 @@ packages: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} - schema-utils@3.3.0: - resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==} - engines: {node: '>= 10.13.0'} - - schema-utils@4.2.0: - resolution: {integrity: sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==} - engines: {node: '>= 12.13.0'} - scoped-regex@3.0.0: resolution: {integrity: sha512-yEsN6TuxZhZ1Tl9iB81frTNS292m0I/IG7+w8lTvfcJQP2x3vnpOoevjBoE3Np5A6KnZM2+RtVenihj9t6NiYg==} engines: {node: '>=12'} @@ -7550,9 +7015,6 @@ packages: resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==} engines: {node: '>= 0.8.0'} - serialize-javascript@6.0.2: - resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==} - serve-static@1.15.0: resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==} engines: {node: '>= 0.8.0'} @@ -7634,14 +7096,6 @@ packages: resolution: {integrity: sha512-up04hB2hR92PgjpyU3y/eg91yIBILyjVY26NvvciY3EVVPjybkMszMpXQ9QAkcS3I5rtJBDLoTxxg+qvW8c7rw==} engines: {node: '>=0.10.0'} - slice-ansi@3.0.0: - resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==} - engines: {node: '>=8'} - - slice-ansi@4.0.0: - resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==} - engines: {node: '>=10'} - smartwrap@2.0.2: resolution: {integrity: sha512-vCsKNQxb7PnCNd2wY1WClWifAc2lwqsG8OaswpJkVJsvMGcnEntdTCDajZCkk93Ay1U3t/9puJmb525Rg5MZBA==} engines: {node: '>=6'} @@ -7684,10 +7138,6 @@ packages: space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} - spawn-wrap@2.0.0: - resolution: {integrity: sha512-EeajNjfN9zMnULLwhZZQU3GWBoFNkbngTUPfaawT4RkMiviTxcX0qfhVbGey39mfctfDHkWtuecgQ8NJcyQWHg==} - engines: {node: '>=8'} - spawndamnit@2.0.0: resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==} @@ -7742,10 +7192,6 @@ packages: steno@0.4.4: resolution: {integrity: sha512-EEHMVYHNXFHfGtgjNITnka0aHhiAlo93F7z2/Pwd+g0teG9CnM3JIINM7hVVB5/rhw9voufD7Wukwgtw2uqh6w==} - stop-iteration-iterator@1.0.0: - resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==} - engines: {node: '>= 0.4'} - stoppable@1.1.0: resolution: {integrity: sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==} engines: {node: '>=4', npm: '>=6'} @@ -7937,10 +7383,6 @@ packages: engines: {node: '>=14.0.0'} hasBin: true - tapable@2.2.1: - resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} - engines: {node: '>=6'} - tar-stream@1.6.2: resolution: {integrity: sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==} engines: {node: '>= 0.8.0'} @@ -7957,22 +7399,6 @@ packages: resolution: {integrity: sha512-flFL3m4wuixmf6IfhFJd1YPiLiMuxEc8uHRM1buzIeZPm22Au2pDqBJQgdo7n1WfPU1ONFGv7YDwpFBmHGF6lg==} engines: {node: '>=12'} - terser-webpack-plugin@5.3.10: - resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==} - engines: {node: '>= 10.13.0'} - peerDependencies: - '@swc/core': '*' - esbuild: '*' - uglify-js: '*' - webpack: ^5.1.0 - peerDependenciesMeta: - '@swc/core': - optional: true - esbuild: - optional: true - uglify-js: - optional: true - terser@5.31.1: resolution: {integrity: sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==} engines: {node: '>=10'} @@ -8002,9 +7428,6 @@ packages: thread-stream@2.7.0: resolution: {integrity: sha512-qQiRWsU/wvNolI6tbbCKd9iKaTnCXsTwVxhhKM6nctPdujTyztjlbUkUTUymidWcMnZ5pWR0ej4a0tjsW021vw==} - throttleit@1.0.1: - resolution: {integrity: sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==} - through@2.3.8: resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} @@ -8326,10 +7749,6 @@ packages: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} - untildify@4.0.0: - resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==} - engines: {node: '>=8'} - update-browserslist-db@1.0.16: resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==} hasBin: true @@ -8531,10 +7950,6 @@ packages: walker@1.0.8: resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==} - watchpack@2.4.1: - resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==} - engines: {node: '>=10.13.0'} - wcwidth@1.0.1: resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==} @@ -8552,20 +7967,6 @@ packages: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} engines: {node: '>=12'} - webpack-sources@3.2.3: - resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} - engines: {node: '>=10.13.0'} - - webpack@5.92.0: - resolution: {integrity: sha512-Bsw2X39MYIgxouNATyVpCNVWBCuUwDgWtN78g6lSdPJRLaQ/PUVm/oXcaRAyY/sMFoKFQrsPeqvTizWtq7QPCA==} - engines: {node: '>=10.13.0'} - hasBin: true - peerDependencies: - webpack-cli: '*' - peerDependenciesMeta: - webpack-cli: - optional: true - whatwg-encoding@2.0.0: resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==} engines: {node: '>=12'} @@ -8596,10 +7997,6 @@ packages: which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} - which-collection@1.0.2: - resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==} - engines: {node: '>= 0.4'} - which-module@2.0.1: resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==} @@ -8824,7 +8221,7 @@ snapshots: '@babel/traverse': 7.24.6 '@babel/types': 7.24.6 convert-source-map: 2.0.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -8879,7 +8276,7 @@ snapshots: '@babel/core': 7.24.6 '@babel/helper-compilation-targets': 7.24.6 '@babel/helper-plugin-utils': 7.24.6 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 lodash.debounce: 4.0.8 resolve: 1.22.8 transitivePeerDependencies: @@ -9555,7 +8952,7 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.6 '@babel/parser': 7.24.6 '@babel/types': 7.24.6 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -9810,35 +9207,11 @@ snapshots: '@cloudflare/workerd-windows-64@1.20240524.0': optional: true - '@colors/colors@1.5.0': - optional: true - '@cspotcode/source-map-support@0.8.1': dependencies: '@jridgewell/trace-mapping': 0.3.9 - '@cypress/code-coverage@3.12.39(@babel/core@7.24.6)(@babel/preset-env@7.24.6(@babel/core@7.24.6))(babel-loader@9.1.3(@babel/core@7.24.6)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)))(cypress@13.13.0)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19))': - dependencies: - '@babel/core': 7.24.6 - '@babel/preset-env': 7.24.6(@babel/core@7.24.6) - '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.24.6)(@babel/preset-env@7.24.6(@babel/core@7.24.6))(babel-loader@9.1.3(@babel/core@7.24.6)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)))(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)) - babel-loader: 9.1.3(@babel/core@7.24.6)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)) - chalk: 4.1.2 - cypress: 13.13.0 - dayjs: 1.11.10 - debug: 4.3.4 - execa: 4.1.0 - globby: 11.1.0 - istanbul-lib-coverage: 3.2.2 - js-yaml: 4.1.0 - nyc: 15.1.0 - webpack: 5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19) - transitivePeerDependencies: - - supports-color - - '@cypress/mount-utils@4.1.0': {} - - '@cypress/request@3.0.1': + '@cypress/request@3.0.1': dependencies: aws-sign2: 0.7.0 aws4: 1.13.0 @@ -9859,34 +9232,6 @@ snapshots: tunnel-agent: 0.6.0 uuid: 8.3.2 - '@cypress/vite-dev-server@5.1.0': - dependencies: - debug: 4.3.5(supports-color@8.1.1) - find-up: 6.3.0 - node-html-parser: 5.3.3 - semver: 7.6.2 - transitivePeerDependencies: - - supports-color - - '@cypress/webpack-preprocessor@6.0.2(@babel/core@7.24.6)(@babel/preset-env@7.24.6(@babel/core@7.24.6))(babel-loader@9.1.3(@babel/core@7.24.6)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)))(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19))': - dependencies: - '@babel/core': 7.24.6 - '@babel/preset-env': 7.24.6(@babel/core@7.24.6) - babel-loader: 9.1.3(@babel/core@7.24.6)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)) - bluebird: 3.7.1 - debug: 4.3.4 - lodash: 4.17.21 - webpack: 5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19) - transitivePeerDependencies: - - supports-color - - '@cypress/xvfb@1.2.4(supports-color@8.1.1)': - dependencies: - debug: 3.2.7(supports-color@8.1.1) - lodash.once: 4.1.1 - transitivePeerDependencies: - - supports-color - '@emnapi/runtime@1.2.0': dependencies: tslib: 2.6.2 @@ -10047,7 +9392,7 @@ snapshots: '@eslint/eslintrc@2.1.4': dependencies: ajv: 6.12.6 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 espree: 9.6.1 globals: 13.24.0 ignore: 5.3.1 @@ -10101,7 +9446,7 @@ snapshots: '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -10383,6 +9728,7 @@ snapshots: dependencies: '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 + optional: true '@jridgewell/sourcemap-codec@1.4.15': {} @@ -10525,36 +9871,12 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 - '@nrwl/cypress@19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(cypress@13.13.0)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))': - dependencies: - '@nx/cypress': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(cypress@13.13.0)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0)) - transitivePeerDependencies: - - '@babel/traverse' - - '@swc-node/register' - - '@swc/core' - - '@swc/wasm' - - '@types/node' - - '@zkochan/js-yaml' - - cypress - - debug - - eslint - - nx - - supports-color - - typescript - - verdaccio - '@nrwl/devkit@19.2.3(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))': dependencies: '@nx/devkit': 19.2.3(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) transitivePeerDependencies: - nx - '@nrwl/devkit@19.3.0(nx@19.3.0(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))': - dependencies: - '@nx/devkit': 19.3.0(nx@19.3.0(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) - transitivePeerDependencies: - - nx - '@nrwl/devkit@19.3.0(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))': dependencies: '@nx/devkit': 19.3.0(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) @@ -10742,31 +10064,6 @@ snapshots: - '@swc/core' - debug - '@nx/cypress@19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(cypress@13.13.0)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0))': - dependencies: - '@nrwl/cypress': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(cypress@13.13.0)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0)) - '@nx/devkit': 19.4.2(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) - '@nx/eslint': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))(verdaccio@5.31.0(typanion@3.14.0)) - '@nx/js': 19.4.2(@babel/traverse@7.24.6)(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0)) - '@phenomnomnominal/tsquery': 5.0.1(typescript@5.4.5) - detect-port: 1.6.1 - tslib: 2.6.2 - optionalDependencies: - cypress: 13.13.0 - transitivePeerDependencies: - - '@babel/traverse' - - '@swc-node/register' - - '@swc/core' - - '@swc/wasm' - - '@types/node' - - '@zkochan/js-yaml' - - debug - - eslint - - nx - - supports-color - - typescript - - verdaccio - '@nx/devkit@19.2.3(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))': dependencies: '@nrwl/devkit': 19.2.3(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) @@ -10782,7 +10079,7 @@ snapshots: '@nx/devkit@19.3.0(nx@19.3.0(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))': dependencies: - '@nrwl/devkit': 19.3.0(nx@19.3.0(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) + '@nrwl/devkit': 19.3.0(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) ejs: 3.1.10 enquirer: 2.3.6 ignore: 5.3.1 @@ -11504,7 +10801,7 @@ snapshots: '@swc-node/sourcemap-support': 0.5.0 '@swc/core': 1.5.29(@swc/helpers@0.5.11) colorette: 2.0.20 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 pirates: 4.0.6 tslib: 2.6.2 typescript: 5.4.5 @@ -11582,23 +10879,6 @@ snapshots: dependencies: defer-to-connect: 2.0.1 - '@testing-library/cypress@10.0.1(cypress@13.13.0)': - dependencies: - '@babel/runtime': 7.24.6 - '@testing-library/dom': 9.3.4 - cypress: 13.13.0 - - '@testing-library/dom@9.3.4': - dependencies: - '@babel/code-frame': 7.24.6 - '@babel/runtime': 7.24.6 - '@types/aria-query': 5.0.4 - aria-query: 5.1.3 - chalk: 4.1.2 - dom-accessibility-api: 0.5.16 - lz-string: 1.5.0 - pretty-format: 27.5.1 - '@tootallnate/once@2.0.0': {} '@trysound/sax@0.2.0': {} @@ -11617,8 +10897,6 @@ snapshots: '@types/argparse@1.0.38': {} - '@types/aria-query@5.0.4': {} - '@types/babel__core@7.20.5': dependencies: '@babel/parser': 7.24.6 @@ -11655,11 +10933,6 @@ snapshots: dependencies: '@types/node': 20.12.12 - '@types/eslint-scope@3.7.7': - dependencies: - '@types/eslint': 8.56.10 - '@types/estree': 1.0.5 - '@types/eslint@8.56.10': dependencies: '@types/estree': 1.0.5 @@ -11740,10 +11013,6 @@ snapshots: '@types/semver@7.5.8': {} - '@types/sinonjs__fake-timers@8.1.1': {} - - '@types/sizzle@2.3.8': {} - '@types/stack-utils@2.0.3': {} '@types/tough-cookie@4.0.5': {} @@ -11758,11 +11027,6 @@ snapshots: dependencies: '@types/yargs-parser': 21.0.3 - '@types/yauzl@2.10.3': - dependencies: - '@types/node': 20.12.12 - optional: true - '@typescript-eslint/eslint-plugin@7.9.0(@typescript-eslint/parser@7.9.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)': dependencies: '@eslint-community/regexpp': 4.10.0 @@ -11787,7 +11051,7 @@ snapshots: '@typescript-eslint/types': 7.9.0 '@typescript-eslint/typescript-estree': 7.9.0(typescript@5.4.5) '@typescript-eslint/visitor-keys': 7.9.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 eslint: 8.57.0 optionalDependencies: typescript: 5.4.5 @@ -11808,7 +11072,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5) '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5) - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 eslint: 8.57.0 ts-api-utils: 1.3.0(typescript@5.4.5) optionalDependencies: @@ -11820,7 +11084,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 7.9.0(typescript@5.4.5) '@typescript-eslint/utils': 7.9.0(eslint@8.57.0)(typescript@5.4.5) - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 eslint: 8.57.0 ts-api-utils: 1.3.0(typescript@5.4.5) optionalDependencies: @@ -11836,7 +11100,7 @@ snapshots: dependencies: '@typescript-eslint/types': 7.11.0 '@typescript-eslint/visitor-keys': 7.11.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.4 @@ -11851,7 +11115,7 @@ snapshots: dependencies: '@typescript-eslint/types': 7.9.0 '@typescript-eslint/visitor-keys': 7.9.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.4 @@ -12054,7 +11318,7 @@ snapshots: dependencies: '@ampproject/remapping': 2.3.0 '@bcoe/v8-coverage': 0.2.3 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 istanbul-lib-coverage: 3.2.2 istanbul-lib-report: 3.0.1 istanbul-lib-source-maps: 5.0.4 @@ -12151,86 +11415,6 @@ snapshots: '@vue/shared@3.4.27': {} - '@webassemblyjs/ast@1.12.1': - dependencies: - '@webassemblyjs/helper-numbers': 1.11.6 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - - '@webassemblyjs/floating-point-hex-parser@1.11.6': {} - - '@webassemblyjs/helper-api-error@1.11.6': {} - - '@webassemblyjs/helper-buffer@1.12.1': {} - - '@webassemblyjs/helper-numbers@1.11.6': - dependencies: - '@webassemblyjs/floating-point-hex-parser': 1.11.6 - '@webassemblyjs/helper-api-error': 1.11.6 - '@xtuc/long': 4.2.2 - - '@webassemblyjs/helper-wasm-bytecode@1.11.6': {} - - '@webassemblyjs/helper-wasm-section@1.12.1': - dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-buffer': 1.12.1 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/wasm-gen': 1.12.1 - - '@webassemblyjs/ieee754@1.11.6': - dependencies: - '@xtuc/ieee754': 1.2.0 - - '@webassemblyjs/leb128@1.11.6': - dependencies: - '@xtuc/long': 4.2.2 - - '@webassemblyjs/utf8@1.11.6': {} - - '@webassemblyjs/wasm-edit@1.12.1': - dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-buffer': 1.12.1 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/helper-wasm-section': 1.12.1 - '@webassemblyjs/wasm-gen': 1.12.1 - '@webassemblyjs/wasm-opt': 1.12.1 - '@webassemblyjs/wasm-parser': 1.12.1 - '@webassemblyjs/wast-printer': 1.12.1 - - '@webassemblyjs/wasm-gen@1.12.1': - dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/ieee754': 1.11.6 - '@webassemblyjs/leb128': 1.11.6 - '@webassemblyjs/utf8': 1.11.6 - - '@webassemblyjs/wasm-opt@1.12.1': - dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-buffer': 1.12.1 - '@webassemblyjs/wasm-gen': 1.12.1 - '@webassemblyjs/wasm-parser': 1.12.1 - - '@webassemblyjs/wasm-parser@1.12.1': - dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-api-error': 1.11.6 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/ieee754': 1.11.6 - '@webassemblyjs/leb128': 1.11.6 - '@webassemblyjs/utf8': 1.11.6 - - '@webassemblyjs/wast-printer@1.12.1': - dependencies: - '@webassemblyjs/ast': 1.12.1 - '@xtuc/long': 4.2.2 - - '@xtuc/ieee754@1.2.0': {} - - '@xtuc/long@4.2.2': {} - '@yarnpkg/lockfile@1.1.0': {} '@yarnpkg/parsers@3.0.0-rc.46': @@ -12263,10 +11447,6 @@ snapshots: acorn: 8.11.3 acorn-walk: 8.3.2 - acorn-import-attributes@1.9.5(acorn@8.11.3): - dependencies: - acorn: 8.11.3 - acorn-jsx@5.3.2(acorn@8.11.3): dependencies: acorn: 8.11.3 @@ -12281,39 +11461,21 @@ snapshots: agent-base@6.0.2: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 transitivePeerDependencies: - supports-color agent-base@7.1.1: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 transitivePeerDependencies: - supports-color - aggregate-error@3.1.0: - dependencies: - clean-stack: 2.2.0 - indent-string: 4.0.0 - aggregate-error@4.0.1: dependencies: clean-stack: 4.2.0 indent-string: 5.0.0 - ajv-formats@2.1.1(ajv@8.14.0): - optionalDependencies: - ajv: 8.14.0 - - ajv-keywords@3.5.2(ajv@6.12.6): - dependencies: - ajv: 6.12.6 - - ajv-keywords@5.1.0(ajv@8.14.0): - dependencies: - ajv: 8.14.0 - fast-deep-equal: 3.1.3 - ajv@6.12.6: dependencies: fast-deep-equal: 3.1.3 @@ -12328,13 +11490,6 @@ snapshots: require-from-string: 2.0.2 uri-js: 4.4.1 - ajv@8.14.0: - dependencies: - fast-deep-equal: 3.1.3 - json-schema-traverse: 1.0.0 - require-from-string: 2.0.2 - uri-js: 4.4.1 - all-contributors-cli@6.26.1: dependencies: '@babel/runtime': 7.24.6 @@ -12409,14 +11564,6 @@ snapshots: apache-md5@1.1.8: {} - append-transform@2.0.0: - dependencies: - default-require-extensions: 3.0.1 - - arch@2.2.0: {} - - archy@1.0.0: {} - arg@4.1.3: {} arg@5.0.2: {} @@ -12427,10 +11574,6 @@ snapshots: argparse@2.0.1: {} - aria-query@5.1.3: - dependencies: - deep-equal: 2.2.3 - array-buffer-byte-length@1.0.1: dependencies: call-bind: 1.0.7 @@ -12483,8 +11626,6 @@ snapshots: assertion-error@1.1.0: {} - astral-regex@2.0.0: {} - astring@1.8.6: {} async-retry@1.2.3: @@ -12497,8 +11638,6 @@ snapshots: asynckit@0.4.0: {} - at-least-node@1.0.0: {} - atomic-sleep@1.0.0: {} autoprefixer@10.4.19(postcss@8.4.38): @@ -12542,13 +11681,6 @@ snapshots: transitivePeerDependencies: - supports-color - babel-loader@9.1.3(@babel/core@7.24.6)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)): - dependencies: - '@babel/core': 7.24.6 - find-cache-dir: 4.0.0 - schema-utils: 4.2.0 - webpack: 5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19) - babel-plugin-const-enum@1.2.0(@babel/core@7.24.6): dependencies: '@babel/core': 7.24.6 @@ -12667,12 +11799,6 @@ snapshots: blake3-wasm@2.1.5: {} - blob-util@2.0.2: {} - - bluebird@3.7.1: {} - - bluebird@3.7.2: {} - body-parser@1.20.2: dependencies: bytes: 3.1.2 @@ -12796,15 +11922,6 @@ snapshots: normalize-url: 6.1.0 responselike: 2.0.1 - cachedir@2.4.0: {} - - caching-transform@4.0.0: - dependencies: - hasha: 5.2.2 - make-dir: 3.1.0 - package-hash: 4.0.0 - write-file-atomic: 3.0.3 - call-bind@1.0.7: dependencies: es-define-property: 1.0.0 @@ -12835,7 +11952,7 @@ snapshots: capnp-ts@0.7.0: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 tslib: 2.6.2 transitivePeerDependencies: - supports-color @@ -12895,8 +12012,6 @@ snapshots: dependencies: get-func-name: 2.0.2 - check-more-types@2.24.0: {} - chokidar@3.6.0: dependencies: anymatch: 3.1.3 @@ -12909,8 +12024,6 @@ snapshots: optionalDependencies: fsevents: 2.3.3 - chrome-trace-event@1.0.4: {} - ci-info@3.9.0: {} cjs-module-lexer@1.3.1: {} @@ -12919,8 +12032,6 @@ snapshots: dependencies: clsx: 2.0.0 - clean-stack@2.2.0: {} - clean-stack@4.2.0: dependencies: escape-string-regexp: 5.0.0 @@ -12939,22 +12050,11 @@ snapshots: cli-spinners@2.9.2: {} - cli-table3@0.6.5: - dependencies: - string-width: 4.2.3 - optionalDependencies: - '@colors/colors': 1.5.0 - cli-truncate@0.2.1: dependencies: slice-ansi: 0.0.4 string-width: 1.0.2 - cli-truncate@2.1.0: - dependencies: - slice-ansi: 3.0.0 - string-width: 4.2.3 - cli-width@2.2.1: {} cli-width@3.0.0: {} @@ -13038,19 +12138,11 @@ snapshots: commander@4.1.1: {} - commander@6.2.1: {} - commander@7.2.0: {} commander@9.5.0: optional: true - common-path-prefix@3.0.0: {} - - common-tags@1.8.2: {} - - commondir@1.0.1: {} - compare-func@2.0.0: dependencies: array-ify: 1.0.0 @@ -13179,8 +12271,6 @@ snapshots: git-semver-tags: 7.0.1 meow: 12.1.1 - convert-source-map@1.9.0: {} - convert-source-map@2.0.0: {} cookie-signature@1.0.6: {} @@ -13256,14 +12346,6 @@ snapshots: dependencies: type-fest: 1.4.0 - css-select@4.3.0: - dependencies: - boolbase: 1.0.0 - css-what: 6.1.0 - domhandler: 4.3.1 - domutils: 2.8.0 - nth-check: 2.1.1 - css-select@5.1.0: dependencies: boolbase: 1.0.0 @@ -13317,66 +12399,6 @@ snapshots: csv-stringify: 5.6.5 stream-transform: 2.1.3 - cypress-axe@1.5.0(axe-core@4.9.1)(cypress@13.13.0): - dependencies: - axe-core: 4.9.1 - cypress: 13.13.0 - - cypress-ct-qwik@0.3.0(@builder.io/qwik@1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1))(cypress@13.13.0): - dependencies: - '@builder.io/qwik': 1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) - '@cypress/mount-utils': 4.1.0 - cypress: 13.13.0 - - cypress-real-events@1.12.0(cypress@13.13.0): - dependencies: - cypress: 13.13.0 - - cypress@13.13.0: - dependencies: - '@cypress/request': 3.0.1 - '@cypress/xvfb': 1.2.4(supports-color@8.1.1) - '@types/sinonjs__fake-timers': 8.1.1 - '@types/sizzle': 2.3.8 - arch: 2.2.0 - blob-util: 2.0.2 - bluebird: 3.7.2 - buffer: 5.7.1 - cachedir: 2.4.0 - chalk: 4.1.2 - check-more-types: 2.24.0 - cli-cursor: 3.1.0 - cli-table3: 0.6.5 - commander: 6.2.1 - common-tags: 1.8.2 - dayjs: 1.11.11 - debug: 4.3.5(supports-color@8.1.1) - enquirer: 2.4.1 - eventemitter2: 6.4.7 - execa: 4.1.0 - executable: 4.1.1 - extract-zip: 2.0.1(supports-color@8.1.1) - figures: 3.2.0 - fs-extra: 9.1.0 - getos: 3.2.1 - is-ci: 3.0.1 - is-installed-globally: 0.4.0 - lazy-ass: 1.6.0 - listr2: 3.14.0(enquirer@2.4.1) - lodash: 4.17.21 - log-symbols: 4.1.0 - minimist: 1.2.8 - ospath: 1.2.2 - pretty-bytes: 5.6.0 - process: 0.11.10 - proxy-from-env: 1.0.0 - request-progress: 3.0.0 - semver: 7.6.2 - supports-color: 8.1.1 - tmp: 0.2.3 - untildify: 4.0.0 - yauzl: 2.10.0 - danger@11.3.1: dependencies: '@gitbeaker/core': 35.8.1 @@ -13386,7 +12408,7 @@ snapshots: chalk: 2.4.2 commander: 2.20.3 core-js: 3.37.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 fast-json-patch: 3.1.1 get-stdin: 6.0.0 http-proxy-agent: 5.0.0 @@ -13466,29 +12488,19 @@ snapshots: dayjs@1.11.10: {} - dayjs@1.11.11: {} - de-indent@1.0.2: {} debug@2.6.9: dependencies: ms: 2.0.0 - debug@3.2.7(supports-color@8.1.1): - dependencies: - ms: 2.1.3 - optionalDependencies: - supports-color: 8.1.1 - debug@4.3.4: dependencies: ms: 2.1.2 - debug@4.3.5(supports-color@8.1.1): + debug@4.3.5: dependencies: ms: 2.1.2 - optionalDependencies: - supports-color: 8.1.1 decamelize-keys@1.1.1: dependencies: @@ -13555,27 +12567,6 @@ snapshots: dependencies: type-detect: 4.0.8 - deep-equal@2.2.3: - dependencies: - array-buffer-byte-length: 1.0.1 - call-bind: 1.0.7 - es-get-iterator: 1.1.3 - get-intrinsic: 1.2.4 - is-arguments: 1.1.1 - is-array-buffer: 3.0.4 - is-date-object: 1.0.5 - is-regex: 1.1.4 - is-shared-array-buffer: 1.0.3 - isarray: 2.0.5 - object-is: 1.1.6 - object-keys: 1.1.1 - object.assign: 4.1.5 - regexp.prototype.flags: 1.5.2 - side-channel: 1.0.6 - which-boxed-primitive: 1.0.2 - which-collection: 1.0.2 - which-typed-array: 1.1.15 - deep-extend@0.6.0: {} deep-is@0.1.4: {} @@ -13589,10 +12580,6 @@ snapshots: bundle-name: 4.1.0 default-browser-id: 5.0.0 - default-require-extensions@3.0.1: - dependencies: - strip-bom: 4.0.0 - defaults@1.0.4: dependencies: clone: 1.0.4 @@ -13647,7 +12634,7 @@ snapshots: detect-port@1.6.1: dependencies: address: 1.2.2 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 transitivePeerDependencies: - supports-color @@ -13671,14 +12658,6 @@ snapshots: dependencies: esutils: 2.0.3 - dom-accessibility-api@0.5.16: {} - - dom-serializer@1.4.1: - dependencies: - domelementtype: 2.3.0 - domhandler: 4.3.1 - entities: 2.2.0 - dom-serializer@2.0.0: dependencies: domelementtype: 2.3.0 @@ -13691,20 +12670,10 @@ snapshots: dependencies: webidl-conversions: 7.0.0 - domhandler@4.3.1: - dependencies: - domelementtype: 2.3.0 - domhandler@5.0.3: dependencies: domelementtype: 2.3.0 - domutils@2.8.0: - dependencies: - dom-serializer: 1.4.1 - domelementtype: 2.3.0 - domhandler: 4.3.1 - domutils@3.1.0: dependencies: dom-serializer: 2.0.0 @@ -13771,11 +12740,6 @@ snapshots: dependencies: once: 1.4.0 - enhanced-resolve@5.17.0: - dependencies: - graceful-fs: 4.2.11 - tapable: 2.2.1 - enquirer@2.3.6: dependencies: ansi-colors: 4.1.3 @@ -13785,8 +12749,6 @@ snapshots: ansi-colors: 4.1.3 strip-ansi: 6.0.1 - entities@2.2.0: {} - entities@4.5.0: {} envinfo@7.13.0: {} @@ -13852,20 +12814,6 @@ snapshots: es-errors@1.3.0: {} - es-get-iterator@1.1.3: - dependencies: - call-bind: 1.0.7 - get-intrinsic: 1.2.4 - has-symbols: 1.0.3 - is-arguments: 1.1.1 - is-map: 2.0.3 - is-set: 2.0.3 - is-string: 1.0.7 - isarray: 2.0.5 - stop-iteration-iterator: 1.0.0 - - es-module-lexer@1.5.3: {} - es-object-atoms@1.0.0: dependencies: es-errors: 1.3.0 @@ -13886,8 +12834,6 @@ snapshots: is-date-object: 1.0.5 is-symbol: 1.0.4 - es6-error@4.1.1: {} - esbuild@0.17.19: optionalDependencies: '@esbuild/android-arm': 0.17.19 @@ -13965,11 +12911,6 @@ snapshots: dependencies: eslint: 8.57.0 - eslint-plugin-cypress@3.3.0(eslint@8.57.0): - dependencies: - eslint: 8.57.0 - globals: 13.24.0 - eslint-plugin-playwright@1.6.2(eslint@8.57.0): dependencies: eslint: 8.57.0 @@ -13980,11 +12921,6 @@ snapshots: eslint: 8.57.0 jsx-ast-utils: 3.3.5 - eslint-scope@5.1.1: - dependencies: - esrecurse: 4.3.0 - estraverse: 4.3.0 - eslint-scope@7.2.2: dependencies: esrecurse: 4.3.0 @@ -14005,7 +12941,7 @@ snapshots: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -14051,8 +12987,6 @@ snapshots: dependencies: estraverse: 5.3.0 - estraverse@4.3.0: {} - estraverse@5.3.0: {} estree-util-attach-comments@3.0.0: @@ -14093,22 +13027,8 @@ snapshots: event-target-shim@5.0.1: {} - eventemitter2@6.4.7: {} - events@3.3.0: {} - execa@4.1.0: - dependencies: - cross-spawn: 7.0.3 - get-stream: 5.2.0 - human-signals: 1.1.1 - is-stream: 2.0.1 - merge-stream: 2.0.0 - npm-run-path: 4.0.1 - onetime: 5.1.2 - signal-exit: 3.0.7 - strip-final-newline: 2.0.0 - execa@5.1.1: dependencies: cross-spawn: 7.0.3 @@ -14133,10 +13053,6 @@ snapshots: signal-exit: 4.1.0 strip-final-newline: 3.0.0 - executable@4.1.1: - dependencies: - pify: 2.3.0 - exit-hook@2.2.1: {} exit-hook@4.0.0: {} @@ -14243,16 +13159,6 @@ snapshots: iconv-lite: 0.4.24 tmp: 0.0.33 - extract-zip@2.0.1(supports-color@8.1.1): - dependencies: - debug: 4.3.5(supports-color@8.1.1) - get-stream: 5.2.0 - yauzl: 2.10.0 - optionalDependencies: - '@types/yauzl': 2.10.3 - transitivePeerDependencies: - - supports-color - extsprintf@1.3.0: {} fast-deep-equal@3.1.3: {} @@ -14347,17 +13253,6 @@ snapshots: transitivePeerDependencies: - supports-color - find-cache-dir@3.3.2: - dependencies: - commondir: 1.0.1 - make-dir: 3.1.0 - pkg-dir: 4.2.0 - - find-cache-dir@4.0.0: - dependencies: - common-path-prefix: 3.0.0 - pkg-dir: 7.0.0 - find-up-simple@1.0.0: {} find-up@4.1.0: @@ -14400,11 +13295,6 @@ snapshots: dependencies: is-callable: 1.2.7 - foreground-child@2.0.0: - dependencies: - cross-spawn: 7.0.3 - signal-exit: 3.0.7 - foreground-child@3.1.1: dependencies: cross-spawn: 7.0.3 @@ -14436,8 +13326,6 @@ snapshots: fresh@0.5.2: {} - fromentries@1.3.2: {} - front-matter@4.0.2: dependencies: js-yaml: 3.14.1 @@ -14464,13 +13352,6 @@ snapshots: jsonfile: 4.0.0 universalify: 0.1.2 - fs-extra@9.1.0: - dependencies: - at-least-node: 1.0.0 - graceful-fs: 4.2.11 - jsonfile: 6.1.0 - universalify: 2.0.1 - fs.realpath@1.0.0: {} fsevents@2.3.2: @@ -14532,10 +13413,6 @@ snapshots: es-errors: 1.3.0 get-intrinsic: 1.2.4 - getos@3.2.1: - dependencies: - async: 3.2.5 - getpass@0.1.7: dependencies: assert-plus: 1.0.0 @@ -14709,11 +13586,6 @@ snapshots: dependencies: has-symbols: 1.0.3 - hasha@5.2.2: - dependencies: - is-stream: 2.0.1 - type-fest: 0.8.1 - hasown@2.0.2: dependencies: function-bind: 1.1.2 @@ -14835,14 +13707,14 @@ snapshots: dependencies: '@tootallnate/once': 2.0.0 agent-base: 6.0.2 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 transitivePeerDependencies: - supports-color http-proxy-agent@7.0.2: dependencies: agent-base: 7.1.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 transitivePeerDependencies: - supports-color @@ -14869,21 +13741,19 @@ snapshots: https-proxy-agent@5.0.1: dependencies: agent-base: 6.0.2 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 transitivePeerDependencies: - supports-color https-proxy-agent@7.0.4: dependencies: agent-base: 7.1.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 transitivePeerDependencies: - supports-color human-id@1.0.2: {} - human-signals@1.1.1: {} - human-signals@2.1.0: {} human-signals@5.0.0: {} @@ -15044,11 +13914,6 @@ snapshots: is-alphabetical: 2.0.1 is-decimal: 2.0.1 - is-arguments@1.1.1: - dependencies: - call-bind: 1.0.7 - has-tostringtag: 1.0.2 - is-array-buffer@3.0.4: dependencies: call-bind: 1.0.7 @@ -15073,10 +13938,6 @@ snapshots: is-callable@1.2.7: {} - is-ci@3.0.1: - dependencies: - ci-info: 3.9.0 - is-core-module@2.13.1: dependencies: hasown: 2.0.2 @@ -15135,8 +13996,6 @@ snapshots: is-interactive@2.0.0: {} - is-map@2.0.3: {} - is-natural-number@4.0.1: {} is-negative-zero@2.0.3: {} @@ -15184,8 +14043,6 @@ snapshots: dependencies: scoped-regex: 3.0.0 - is-set@2.0.3: {} - is-shared-array-buffer@1.0.3: dependencies: call-bind: 1.0.7 @@ -15224,17 +14081,10 @@ snapshots: is-url-superb@6.1.0: {} - is-weakmap@2.0.2: {} - is-weakref@1.0.2: dependencies: call-bind: 1.0.7 - is-weakset@2.0.3: - dependencies: - call-bind: 1.0.7 - get-intrinsic: 1.2.4 - is-windows@1.0.2: {} is-wsl@2.2.0: @@ -15257,19 +14107,6 @@ snapshots: istanbul-lib-coverage@3.2.2: {} - istanbul-lib-hook@3.0.0: - dependencies: - append-transform: 2.0.0 - - istanbul-lib-instrument@4.0.3: - dependencies: - '@babel/core': 7.24.6 - '@istanbuljs/schema': 0.1.3 - istanbul-lib-coverage: 3.2.2 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - istanbul-lib-instrument@5.2.1: dependencies: '@babel/core': 7.24.6 @@ -15290,15 +14127,6 @@ snapshots: transitivePeerDependencies: - supports-color - istanbul-lib-processinfo@2.0.3: - dependencies: - archy: 1.0.0 - cross-spawn: 7.0.3 - istanbul-lib-coverage: 3.2.2 - p-map: 3.0.0 - rimraf: 3.0.2 - uuid: 8.3.2 - istanbul-lib-report@3.0.1: dependencies: istanbul-lib-coverage: 3.2.2 @@ -15307,7 +14135,7 @@ snapshots: istanbul-lib-source-maps@4.0.1: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 istanbul-lib-coverage: 3.2.2 source-map: 0.6.1 transitivePeerDependencies: @@ -15316,7 +14144,7 @@ snapshots: istanbul-lib-source-maps@5.0.4: dependencies: '@jridgewell/trace-mapping': 0.3.25 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 istanbul-lib-coverage: 3.2.2 transitivePeerDependencies: - supports-color @@ -15644,12 +14472,6 @@ snapshots: jest-util: 29.7.0 string-length: 4.0.2 - jest-worker@27.5.1: - dependencies: - '@types/node': 20.12.12 - merge-stream: 2.0.0 - supports-color: 8.1.1 - jest-worker@29.7.0: dependencies: '@types/node': 20.12.12 @@ -15856,8 +14678,6 @@ snapshots: dependencies: package-json: 8.1.1 - lazy-ass@1.6.0: {} - leven@3.1.0: {} levn@0.4.1: @@ -15903,19 +14723,6 @@ snapshots: date-fns: 1.30.1 figures: 2.0.0 - listr2@3.14.0(enquirer@2.4.1): - dependencies: - cli-truncate: 2.1.0 - colorette: 2.0.20 - log-update: 4.0.0 - p-map: 4.0.0 - rfdc: 1.3.1 - rxjs: 7.8.1 - through: 2.3.8 - wrap-ansi: 7.0.0 - optionalDependencies: - enquirer: 2.4.1 - listr@0.14.3: dependencies: '@samverschueren/stream-to-observable': 0.3.1(rxjs@6.6.7) @@ -15938,8 +14745,6 @@ snapshots: pify: 4.0.1 strip-bom: 3.0.0 - loader-runner@4.3.0: {} - local-pkg@0.5.0: dependencies: mlly: 1.7.0 @@ -15967,8 +14772,6 @@ snapshots: lodash.find@4.6.0: {} - lodash.flattendeep@4.4.0: {} - lodash.get@4.4.2: {} lodash.includes@4.3.0: {} @@ -16023,13 +14826,6 @@ snapshots: cli-cursor: 2.1.0 wrap-ansi: 3.0.1 - log-update@4.0.0: - dependencies: - ansi-escapes: 4.3.2 - cli-cursor: 3.1.0 - slice-ansi: 4.0.0 - wrap-ansi: 6.2.0 - longest-streak@3.1.0: {} loupe@2.3.7: @@ -16065,8 +14861,6 @@ snapshots: lru-cache@7.18.3: {} - lz-string@1.5.0: {} - magic-string@0.25.9: dependencies: sourcemap-codec: 1.4.8 @@ -16085,10 +14879,6 @@ snapshots: dependencies: pify: 3.0.0 - make-dir@3.1.0: - dependencies: - semver: 6.3.1 - make-dir@4.0.0: dependencies: semver: 7.6.2 @@ -16434,7 +15224,7 @@ snapshots: micromark@4.0.0: dependencies: '@types/debug': 4.1.12 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 decode-named-character-reference: 1.0.2 devlop: 1.1.0 micromark-core-commonmark: 2.0.1 @@ -16622,19 +15412,10 @@ snapshots: node-forge@1.3.1: {} - node-html-parser@5.3.3: - dependencies: - css-select: 4.3.0 - he: 1.2.0 - node-int64@0.4.0: {} node-machine-id@1.1.12: {} - node-preload@0.2.1: - dependencies: - process-on-spawn: 1.0.0 - node-releases@2.0.14: {} normalize-package-data@2.5.0: @@ -16841,49 +15622,12 @@ snapshots: transitivePeerDependencies: - debug - nyc@15.1.0: - dependencies: - '@istanbuljs/load-nyc-config': 1.1.0 - '@istanbuljs/schema': 0.1.3 - caching-transform: 4.0.0 - convert-source-map: 1.9.0 - decamelize: 1.2.0 - find-cache-dir: 3.3.2 - find-up: 4.1.0 - foreground-child: 2.0.0 - get-package-type: 0.1.0 - glob: 7.2.3 - istanbul-lib-coverage: 3.2.2 - istanbul-lib-hook: 3.0.0 - istanbul-lib-instrument: 4.0.3 - istanbul-lib-processinfo: 2.0.3 - istanbul-lib-report: 3.0.1 - istanbul-lib-source-maps: 4.0.1 - istanbul-reports: 3.1.7 - make-dir: 3.1.0 - node-preload: 0.2.1 - p-map: 3.0.0 - process-on-spawn: 1.0.0 - resolve-from: 5.0.0 - rimraf: 3.0.2 - signal-exit: 3.0.7 - spawn-wrap: 2.0.0 - test-exclude: 6.0.0 - yargs: 15.4.1 - transitivePeerDependencies: - - supports-color - object-assign@4.1.1: {} object-hash@3.0.0: {} object-inspect@1.13.1: {} - object-is@1.1.6: - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - object-keys@1.1.1: {} object.assign@4.1.5: @@ -16978,8 +15722,6 @@ snapshots: os-tmpdir@1.0.2: {} - ospath@1.2.2: {} - outdent@0.5.0: {} override-require@1.1.1: {} @@ -17022,14 +15764,6 @@ snapshots: p-map@2.1.0: {} - p-map@3.0.0: - dependencies: - aggregate-error: 3.1.0 - - p-map@4.0.0: - dependencies: - aggregate-error: 3.1.0 - p-map@5.5.0: dependencies: aggregate-error: 4.0.1 @@ -17045,13 +15779,6 @@ snapshots: p-try@2.2.0: {} - package-hash@4.0.0: - dependencies: - graceful-fs: 4.2.11 - hasha: 5.2.2 - lodash.flattendeep: 4.4.0 - release-zalgo: 1.0.0 - package-json@8.1.1: dependencies: got: 12.6.1 @@ -17232,10 +15959,6 @@ snapshots: dependencies: find-up: 4.1.0 - pkg-dir@7.0.0: - dependencies: - find-up: 6.3.0 - pkg-dir@8.0.0: dependencies: find-up-simple: 1.0.0 @@ -17313,14 +16036,6 @@ snapshots: prettier@3.2.5: {} - pretty-bytes@5.6.0: {} - - pretty-format@27.5.1: - dependencies: - ansi-regex: 5.0.1 - ansi-styles: 5.2.0 - react-is: 17.0.2 - pretty-format@29.7.0: dependencies: '@jest/schemas': 29.6.3 @@ -17349,10 +16064,6 @@ snapshots: process-nextick-args@2.0.1: {} - process-on-spawn@1.0.0: - dependencies: - fromentries: 1.3.2 - process-warning@1.0.0: {} process-warning@3.0.0: {} @@ -17375,8 +16086,6 @@ snapshots: forwarded: 0.2.0 ipaddr.js: 1.9.1 - proxy-from-env@1.0.0: {} - proxy-from-env@1.1.0: {} pseudomap@1.0.2: {} @@ -17434,10 +16143,6 @@ snapshots: qwik-themes@0.2.0: {} - randombytes@2.1.0: - dependencies: - safe-buffer: 5.2.1 - range-parser@1.2.1: {} raw-body@2.5.2: @@ -17454,8 +16159,6 @@ snapshots: minimist: 1.2.8 strip-json-comments: 2.0.1 - react-is@17.0.2: {} - react-is@18.3.1: {} read-cache@1.0.0: @@ -17606,10 +16309,6 @@ snapshots: unified: 11.0.4 unist-util-visit: 5.0.0 - release-zalgo@1.0.0: - dependencies: - es6-error: 4.1.1 - remark-mdx@3.0.1: dependencies: mdast-util-mdx: 3.0.0 @@ -17636,10 +16335,6 @@ snapshots: remove-accents@0.5.0: {} - request-progress@3.0.0: - dependencies: - throttleit: 1.0.1 - require-directory@2.1.1: {} require-from-string@2.0.2: {} @@ -17695,8 +16390,6 @@ snapshots: reusify@1.0.4: {} - rfdc@1.3.1: {} - rimraf@2.4.5: dependencies: glob: 6.0.4 @@ -17796,19 +16489,6 @@ snapshots: dependencies: xmlchars: 2.2.0 - schema-utils@3.3.0: - dependencies: - '@types/json-schema': 7.0.15 - ajv: 6.12.6 - ajv-keywords: 3.5.2(ajv@6.12.6) - - schema-utils@4.2.0: - dependencies: - '@types/json-schema': 7.0.15 - ajv: 8.14.0 - ajv-formats: 2.1.1(ajv@8.14.0) - ajv-keywords: 5.1.0(ajv@8.14.0) - scoped-regex@3.0.0: {} seek-bzip@1.0.6: @@ -17856,10 +16536,6 @@ snapshots: transitivePeerDependencies: - supports-color - serialize-javascript@6.0.2: - dependencies: - randombytes: 2.1.0 - serve-static@1.15.0: dependencies: encodeurl: 1.0.2 @@ -17965,18 +16641,6 @@ snapshots: slice-ansi@0.0.4: {} - slice-ansi@3.0.0: - dependencies: - ansi-styles: 4.3.0 - astral-regex: 2.0.0 - is-fullwidth-code-point: 3.0.0 - - slice-ansi@4.0.0: - dependencies: - ansi-styles: 4.3.0 - astral-regex: 2.0.0 - is-fullwidth-code-point: 3.0.0 - smartwrap@2.0.2: dependencies: array.prototype.flat: 1.3.2 @@ -18023,15 +16687,6 @@ snapshots: space-separated-tokens@2.0.2: {} - spawn-wrap@2.0.0: - dependencies: - foreground-child: 2.0.0 - is-windows: 1.0.2 - make-dir: 3.1.0 - rimraf: 3.0.2 - signal-exit: 3.0.7 - which: 2.0.2 - spawndamnit@2.0.0: dependencies: cross-spawn: 5.1.0 @@ -18092,10 +16747,6 @@ snapshots: dependencies: graceful-fs: 4.2.11 - stop-iteration-iterator@1.0.0: - dependencies: - internal-slot: 1.0.7 - stoppable@1.1.0: {} stream-shift@1.0.3: {} @@ -18317,8 +16968,6 @@ snapshots: transitivePeerDependencies: - ts-node - tapable@2.2.1: {} - tar-stream@1.6.2: dependencies: bl: 1.2.3 @@ -18344,24 +16993,13 @@ snapshots: ansi-escapes: 5.0.0 supports-hyperlinks: 2.3.0 - terser-webpack-plugin@5.3.10(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)): - dependencies: - '@jridgewell/trace-mapping': 0.3.25 - jest-worker: 27.5.1 - schema-utils: 3.3.0 - serialize-javascript: 6.0.2 - terser: 5.31.1 - webpack: 5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19) - optionalDependencies: - '@swc/core': 1.5.29(@swc/helpers@0.5.11) - esbuild: 0.17.19 - terser@5.31.1: dependencies: '@jridgewell/source-map': 0.3.6 acorn: 8.11.3 commander: 2.20.3 source-map-support: 0.5.21 + optional: true test-exclude@6.0.0: dependencies: @@ -18389,8 +17027,6 @@ snapshots: dependencies: real-require: 0.2.0 - throttleit@1.0.1: {} - through@2.3.8: {} tinybench@2.8.0: {} @@ -18684,8 +17320,6 @@ snapshots: unpipe@1.0.0: {} - untildify@4.0.0: {} - update-browserslist-db@1.0.16(browserslist@4.23.0): dependencies: browserslist: 4.23.0 @@ -18788,7 +17422,7 @@ snapshots: clipanion: 3.2.1(typanion@3.14.0) compression: 1.7.4 cors: 2.8.5 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 envinfo: 7.13.0 express: 4.19.2 express-rate-limit: 5.5.1 @@ -18844,7 +17478,7 @@ snapshots: vite-node@1.6.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1): dependencies: cac: 6.7.14 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 pathe: 1.1.2 picocolors: 1.0.1 vite: 5.2.11(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) @@ -18863,7 +17497,7 @@ snapshots: '@microsoft/api-extractor': 7.43.0(@types/node@20.12.12) '@rollup/pluginutils': 5.1.0(rollup@4.18.0) '@vue/language-core': 1.8.27(typescript@5.4.5) - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 kolorist: 1.8.0 magic-string: 0.30.10 typescript: 5.4.5 @@ -18887,7 +17521,7 @@ snapshots: dependencies: '@antfu/utils': 0.7.8 '@rollup/pluginutils': 5.1.0(rollup@4.18.0) - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 error-stack-parser-es: 0.1.4 fs-extra: 11.2.0 open: 10.1.0 @@ -18909,7 +17543,7 @@ snapshots: vite-tsconfig-paths@4.3.2(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)): dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 globrex: 0.1.2 tsconfck: 3.1.0(typescript@5.4.5) optionalDependencies: @@ -18938,7 +17572,7 @@ snapshots: '@vitest/utils': 1.6.0 acorn-walk: 8.3.2 chai: 4.4.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5 execa: 8.0.1 local-pkg: 0.5.0 magic-string: 0.30.10 @@ -18988,11 +17622,6 @@ snapshots: dependencies: makeerror: 1.0.12 - watchpack@2.4.1: - dependencies: - glob-to-regexp: 0.4.1 - graceful-fs: 4.2.11 - wcwidth@1.0.1: dependencies: defaults: 1.0.4 @@ -19005,39 +17634,6 @@ snapshots: webidl-conversions@7.0.0: {} - webpack-sources@3.2.3: {} - - webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19): - dependencies: - '@types/eslint-scope': 3.7.7 - '@types/estree': 1.0.5 - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/wasm-edit': 1.12.1 - '@webassemblyjs/wasm-parser': 1.12.1 - acorn: 8.11.3 - acorn-import-attributes: 1.9.5(acorn@8.11.3) - browserslist: 4.23.0 - chrome-trace-event: 1.0.4 - enhanced-resolve: 5.17.0 - es-module-lexer: 1.5.3 - 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.10(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)(webpack@5.92.0(@swc/core@1.5.29(@swc/helpers@0.5.11))(esbuild@0.17.19)) - watchpack: 2.4.1 - webpack-sources: 3.2.3 - transitivePeerDependencies: - - '@swc/core' - - esbuild - - uglify-js - whatwg-encoding@2.0.0: dependencies: iconv-lite: 0.6.3 @@ -19073,13 +17669,6 @@ snapshots: is-string: 1.0.7 is-symbol: 1.0.4 - which-collection@1.0.2: - dependencies: - is-map: 2.0.3 - is-set: 2.0.3 - is-weakmap: 2.0.2 - is-weakset: 2.0.3 - which-module@2.0.1: {} which-pm@2.0.0: From 76edce724667945143fcd8755371d67f180b1836 Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Tue, 17 Sep 2024 15:45:16 -0500 Subject: [PATCH 11/27] upgrade to 1.9 (#965) * upgrade to 1.9 * feat: use prefetch sw instead * changeset * remove duplicate --- .changeset/weak-phones-prove.md | 15 +++ apps/component-tests/vite.config.ts | 2 - apps/website/src/root.tsx | 16 ++-- .../examples/test-disabled-value-multiple.tsx | 2 +- .../examples/test-value-multiple.tsx | 2 +- apps/website/vite.config.ts | 2 - package.json | 6 +- packages/kit-headless/package.json | 2 +- .../src/components/carousel/carousel.test.ts | 2 +- packages/kit-headless/tsconfig.spec.json | 5 +- packages/kit-headless/vite.config.ts | 2 - packages/kit-styled/package.json | 2 +- packages/kit-styled/vite.config.ts | 2 - packages/themes/vite.config.ts | 2 - pnpm-lock.yaml | 96 +++++++++++-------- 15 files changed, 91 insertions(+), 67 deletions(-) create mode 100644 .changeset/weak-phones-prove.md diff --git a/.changeset/weak-phones-prove.md b/.changeset/weak-phones-prove.md new file mode 100644 index 000000000..e2fa08844 --- /dev/null +++ b/.changeset/weak-phones-prove.md @@ -0,0 +1,15 @@ +--- +'@qwik-ui/headless': minor +'@qwik-ui/styled': minor +'@qwik-ui/themes': minor +--- + +feat: carousel reaches beta state + +feat: stepper component added as a configuration for the carousel + +feat: vertical carousels are now supported + +feat: progress bar gets a major refactor and is backwards compatible + +docs: fixed theme issues and improved prefetching diff --git a/apps/component-tests/vite.config.ts b/apps/component-tests/vite.config.ts index a8894fc35..4ee31b824 100644 --- a/apps/component-tests/vite.config.ts +++ b/apps/component-tests/vite.config.ts @@ -2,12 +2,10 @@ import { qwikVite } from '@builder.io/qwik/optimizer'; import { qwikCity } from '@builder.io/qwik-city/vite'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; -import { qwikNxVite } from 'qwik-nx/plugins'; export default defineConfig({ cacheDir: '../../node_modules/.vite/apps/component-tests', plugins: [ - qwikNxVite(), qwikCity(), qwikVite({ client: { diff --git a/apps/website/src/root.tsx b/apps/website/src/root.tsx index 9ec36a83d..f4a541615 100644 --- a/apps/website/src/root.tsx +++ b/apps/website/src/root.tsx @@ -1,9 +1,12 @@ -import { component$, useContextProvider, useStore, useStyles$ } from '@builder.io/qwik'; import { - QwikCityProvider, - RouterOutlet, - ServiceWorkerRegister, -} from '@builder.io/qwik-city'; + component$, + useContextProvider, + useStore, + useStyles$, + PrefetchGraph, + PrefetchServiceWorker, +} from '@builder.io/qwik'; +import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city'; import { APP_STATE_CONTEXT_ID } from './_state/app-state-context-id'; import { AppState } from './_state/app-state.type'; @@ -46,9 +49,10 @@ export default component$(() => { - + + { (valueSelected.value = v)} + onChange$={(v: string[]) => (valueSelected.value = v)} disabled > diff --git a/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-multiple.tsx b/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-multiple.tsx index 303d8f66d..dbcfba3f5 100644 --- a/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-multiple.tsx +++ b/apps/website/src/routes/docs/headless/toggle-group/examples/test-value-multiple.tsx @@ -12,7 +12,7 @@ export default component$(() => { (valueSelected.value = v)} + onChange$={(v: string[]) => (valueSelected.value = v)} > Left diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts index 7d3229ee8..702ab3aeb 100644 --- a/apps/website/vite.config.ts +++ b/apps/website/vite.config.ts @@ -1,6 +1,5 @@ import { qwikCity } from '@builder.io/qwik-city/vite'; import { qwikVite } from '@builder.io/qwik/optimizer'; -import { qwikNxVite } from 'qwik-nx/plugins'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; import { recmaProvideComponents } from './recma-provide-components'; @@ -30,7 +29,6 @@ export default defineConfig(async () => { return { plugins: [ - qwikNxVite(), qwikCity({ mdxPlugins: { rehypeSyntaxHighlight: false, diff --git a/package.json b/package.json index 6dbb27248..0ad291047 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,8 @@ "packageManager": "pnpm@9.7.0", "devDependencies": { "@axe-core/playwright": "^4.9.1", - "@builder.io/qwik": "1.7.3", - "@builder.io/qwik-city": "1.7.3", + "@builder.io/qwik": "^1.9", + "@builder.io/qwik-city": "^1.9", "@changesets/cli": "^2.27.3", "@changesets/get-github-info": "^0.6.0", "@changesets/types": "^6.0.0", @@ -96,7 +96,7 @@ "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-playwright": "^1.6.2", - "eslint-plugin-qwik": "1.7.3", + "eslint-plugin-qwik": "^1.9", "focus-trap": "7.5.4", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/packages/kit-headless/package.json b/packages/kit-headless/package.json index d7412c8e9..c164b177a 100644 --- a/packages/kit-headless/package.json +++ b/packages/kit-headless/package.json @@ -30,7 +30,7 @@ }, "private": false, "peerDependencies": { - "@builder.io/qwik": "1.7.2" + "@builder.io/qwik": "^1.9" }, "dependencies": { "@floating-ui/core": "^1.6.2", diff --git a/packages/kit-headless/src/components/carousel/carousel.test.ts b/packages/kit-headless/src/components/carousel/carousel.test.ts index 2b2bc727b..797cf5a4b 100644 --- a/packages/kit-headless/src/components/carousel/carousel.test.ts +++ b/packages/kit-headless/src/components/carousel/carousel.test.ts @@ -416,7 +416,7 @@ test.describe('Mobile / Touch Behavior', () => { await expect(d.getSlideAt(3)).toHaveAttribute('data-active'); await expect(d.getSlideAt(0)).not.toHaveAttribute('data-active'); }); - + // test(`GIVEN a mobile carousel // WHEN swiping to the next slide // THEN the next slide should snap to the left side of the scroller`, async ({ diff --git a/packages/kit-headless/tsconfig.spec.json b/packages/kit-headless/tsconfig.spec.json index 0a8516abd..72404d3d4 100644 --- a/packages/kit-headless/tsconfig.spec.json +++ b/packages/kit-headless/tsconfig.spec.json @@ -2,10 +2,7 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../../dist/out-tsc", - "types": [ - "vitest/globals", - "node" - ] + "types": ["vitest/globals", "node"] }, "include": [ "vite.config.ts", diff --git a/packages/kit-headless/vite.config.ts b/packages/kit-headless/vite.config.ts index 427e837a1..5991aebc3 100644 --- a/packages/kit-headless/vite.config.ts +++ b/packages/kit-headless/vite.config.ts @@ -1,7 +1,6 @@ /// import { qwikVite } from '@builder.io/qwik/optimizer'; import { dirname, join } from 'path'; -import { qwikNxVite } from 'qwik-nx/plugins'; import { fileURLToPath } from 'url'; import { defineConfig } from 'vite'; import dts from 'vite-plugin-dts'; @@ -15,7 +14,6 @@ const excludeAll = (obj: any) => Object.keys(obj).map(makeRegex); export default defineConfig({ plugins: [ - qwikNxVite(), qwikVite(), tsconfigPaths({ root: '../../' }), dts({ diff --git a/packages/kit-styled/package.json b/packages/kit-styled/package.json index d449c291f..22a272390 100644 --- a/packages/kit-styled/package.json +++ b/packages/kit-styled/package.json @@ -20,7 +20,7 @@ "private": false, "scripts": {}, "peerDependencies": { - "@builder.io/qwik": "1.7.2" + "@builder.io/qwik": "^1.9" }, "devDependencies": { "@qwik-ui/headless": "^0.5.2", diff --git a/packages/kit-styled/vite.config.ts b/packages/kit-styled/vite.config.ts index 2dd050b40..58170aae6 100644 --- a/packages/kit-styled/vite.config.ts +++ b/packages/kit-styled/vite.config.ts @@ -1,14 +1,12 @@ import { qwikVite } from '@builder.io/qwik/optimizer'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import { join } from 'path'; -import { qwikNxVite } from 'qwik-nx/plugins'; import { defineConfig } from 'vite'; import dts from 'vite-plugin-dts'; import tsconfigPaths from 'vite-tsconfig-paths'; export default defineConfig({ plugins: [ - qwikNxVite(), qwikVite({ vendorRoots: [join(__dirname, '../kit-headless/src')], }), diff --git a/packages/themes/vite.config.ts b/packages/themes/vite.config.ts index 0531eab12..c2f756161 100644 --- a/packages/themes/vite.config.ts +++ b/packages/themes/vite.config.ts @@ -1,14 +1,12 @@ import { qwikVite } from '@builder.io/qwik/optimizer'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import { join } from 'path'; -import { qwikNxVite } from 'qwik-nx/plugins'; import { defineConfig } from 'vite'; import dts from 'vite-plugin-dts'; import tsconfigPaths from 'vite-tsconfig-paths'; export default defineConfig({ plugins: [ - qwikNxVite(), qwikVite(), tsconfigPaths({ root: '../../' }), dts({ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0464388de..0bde510b9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,11 +12,11 @@ importers: specifier: ^4.9.1 version: 4.9.1(playwright-core@1.44.1) '@builder.io/qwik': - specifier: 1.7.3 - version: 1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) + specifier: ^1.9 + version: 1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) '@builder.io/qwik-city': - specifier: 1.7.3 - version: 1.7.3(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1) + specifier: ^1.9 + version: 1.9.0(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1)(typescript@5.4.5) '@changesets/cli': specifier: ^2.27.3 version: 2.27.5 @@ -49,7 +49,7 @@ importers: version: 3.0.0-feat-sst-upgrade.1(@nx/devkit@19.4.2(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))))(@nx/node@19.3.0(@babel/traverse@7.24.6)(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(@zkochan/js-yaml@0.0.7)(eslint@8.57.0)(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))(ts-node@10.9.1(@swc/core@1.5.29(@swc/helpers@0.5.11))(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)(verdaccio@5.31.0(typanion@3.14.0)))(esbuild@0.17.19)(wrangler@3.58.0) '@modular-forms/qwik': specifier: ^0.24.0 - version: 0.24.0(@builder.io/qwik-city@1.7.3(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1))(@builder.io/qwik@1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)) + version: 0.24.0(@builder.io/qwik-city@1.9.0(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1)(typescript@5.4.5))(@builder.io/qwik@1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)) '@nx/devkit': specifier: 19.4.2 version: 19.4.2(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) @@ -85,7 +85,7 @@ importers: version: 1.44.1 '@qwikest/icons': specifier: ^0.0.13 - version: 0.0.13(@builder.io/qwik@1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)) + version: 0.0.13(@builder.io/qwik@1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)) '@shikijs/transformers': specifier: ^1.11.0 version: 1.11.0 @@ -168,8 +168,8 @@ importers: specifier: ^1.6.2 version: 1.6.2(eslint@8.57.0) eslint-plugin-qwik: - specifier: 1.7.3 - version: 1.7.3(eslint@8.57.0) + specifier: ^1.9 + version: 1.9.0(eslint@8.57.0) focus-trap: specifier: 7.5.4 version: 7.5.4 @@ -316,8 +316,8 @@ importers: packages/kit-headless: dependencies: '@builder.io/qwik': - specifier: 1.7.2 - version: 1.7.2(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) + specifier: ^1.9 + version: 1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) '@floating-ui/core': specifier: ^1.6.2 version: 1.6.2 @@ -337,8 +337,8 @@ importers: packages/kit-styled: dependencies: '@builder.io/qwik': - specifier: 1.7.2 - version: 1.7.2(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) + specifier: ^1.9 + version: 1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) devDependencies: '@qwik-ui/headless': specifier: ^0.5.2 @@ -1012,8 +1012,8 @@ packages: '@bcoe/v8-coverage@0.2.3': resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} - '@builder.io/qwik-city@1.7.3': - resolution: {integrity: sha512-ZCD8HQ4AmSaBCENaDeFDh3h5drxjUi44miEUSnBf73gSACDSChq70LaM+Y2wwoaArDT6OQ3YzuN/lzFpFWynQg==} + '@builder.io/qwik-city@1.9.0': + resolution: {integrity: sha512-N+TARxsrVMNpIQQ+cnTN+c/gCdI5PlUGPFaRnWT4dw3ug+bizoaldksFvdATarWVYUMkoK7tTpop3cORKN9tAg==} engines: {node: '>=16.8.0 <18.0.0 || >=18.11'} '@builder.io/qwik@1.7.2': @@ -1021,8 +1021,8 @@ packages: engines: {node: '>=16.8.0 <18.0.0 || >=18.11'} hasBin: true - '@builder.io/qwik@1.7.3': - resolution: {integrity: sha512-lVRT4j9redY4X+iOy26U2vhychJgX24aaleu3IuBlEwD8MjCU5k46ApHq+cGqI24/kbqjirPH3SIxtVSByEG/A==} + '@builder.io/qwik@1.9.0': + resolution: {integrity: sha512-E4EFXOaUz4A6D48lw1CwKR4CLZCPquetuMPrRoAPZjBueL/R1oBzXdRt5zVemS6lAoTSjXBsnxXo2kGYKCI7pA==} engines: {node: '>=16.8.0 <18.0.0 || >=18.11'} hasBin: true @@ -4075,8 +4075,8 @@ packages: eslint-plugin-jest: optional: true - eslint-plugin-qwik@1.7.3: - resolution: {integrity: sha512-1PGlVFmRfo/rlFQ/ZdzFdrtK3DdxEdmeVos0W8eJqIEDh7KkhjdIP6XIStf/SEYZ8KVcvEHgeDMv+vQm5QVcGA==} + eslint-plugin-qwik@1.9.0: + resolution: {integrity: sha512-9EsvIVwtpANSj/ICKMoR5aeabDPgPVcW58bxY8N7R/9oQs6piCm7XbFErxAeaGxmhuvpMZsc+7AN5DizDfDdrw==} engines: {node: '>=16.8.0 <18.0.0 || >=18.11'} peerDependencies: eslint: ^8.57.0 @@ -4745,9 +4745,9 @@ packages: resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} engines: {node: '>= 4'} - imagetools-core@6.0.4: - resolution: {integrity: sha512-N1qs5qn7u9nR3kboISkYuvJm8MohiphCfBa+wx1UOropVaFis9/mh6wuDPLHJNhl6/64C7q2Pch5NASVKAaSrg==} - engines: {node: '>=12.0.0'} + imagetools-core@7.0.1: + resolution: {integrity: sha512-XDUx3Ac1VrZ4XF5eAJNYdHbFXRPNyebHFrwJsZ4WHb7X2MitOVW23cFphSDByT3MH5rdWdxKr4edSW2agChvDg==} + engines: {node: '>=18.0.0'} immutable@4.3.6: resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==} @@ -7783,6 +7783,14 @@ packages: resolution: {integrity: sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==} engines: {node: '>=10.12.0'} + valibot@0.42.0: + resolution: {integrity: sha512-igMdmHXxDiQY714ssh9bGisMqJ2yg7sko1KOmv/omnrIacGtP6mGrbvVT1IuV1bDrHyG9ybgpHwG1UElDiDCLg==} + peerDependencies: + typescript: '>=5' + peerDependenciesMeta: + typescript: + optional: true + validate-npm-package-license@3.0.4: resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} @@ -7828,9 +7836,9 @@ packages: vfile@6.0.1: resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==} - vite-imagetools@6.2.9: - resolution: {integrity: sha512-C4ZYhgj2vAj43/TpZ06XlDNP0p/7LIeYbgUYr+xG44nM++4HGX6YZBKAYpiBNgiCFUTJ6eXkRppWBrfPMevgmg==} - engines: {node: '>=12.0.0'} + vite-imagetools@7.0.4: + resolution: {integrity: sha512-C9C7b2p/8/TCN2g26tE9haoer2i8K4x0v2RXUiHsIjiz221vQuKItCQ+VyiVCsUMPXfJC/tlZsmCZVBz5jh7uA==} + engines: {node: '>=18.0.0'} vite-node@1.6.0: resolution: {integrity: sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==} @@ -8179,6 +8187,9 @@ packages: engines: {node: '>=8.0.0'} hasBin: true + zod@3.22.4: + resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==} + zod@3.23.8: resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} @@ -8965,17 +8976,18 @@ snapshots: '@bcoe/v8-coverage@0.2.3': {} - '@builder.io/qwik-city@1.7.3(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1)': + '@builder.io/qwik-city@1.9.0(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1)(typescript@5.4.5)': dependencies: '@mdx-js/mdx': 3.0.1 '@types/mdx': 2.0.13 source-map: 0.7.4 svgo: 3.3.2 undici: 5.28.4 + valibot: 0.42.0(typescript@5.4.5) vfile: 6.0.1 vite: 5.2.11(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) - vite-imagetools: 6.2.9(rollup@4.18.0) - zod: 3.23.8 + vite-imagetools: 7.0.4(rollup@4.18.0) + zod: 3.22.4 transitivePeerDependencies: - '@types/node' - less @@ -8986,6 +8998,7 @@ snapshots: - sugarss - supports-color - terser + - typescript '@builder.io/qwik@1.7.2(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)': dependencies: @@ -9000,7 +9013,7 @@ snapshots: - sugarss - terser - '@builder.io/qwik@1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)': + '@builder.io/qwik@1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1)': dependencies: csstype: 3.1.3 vite: 5.2.11(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) @@ -9853,10 +9866,10 @@ snapshots: '@microsoft/tsdoc@0.14.2': {} - '@modular-forms/qwik@0.24.0(@builder.io/qwik-city@1.7.3(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1))(@builder.io/qwik@1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1))': + '@modular-forms/qwik@0.24.0(@builder.io/qwik-city@1.9.0(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1)(typescript@5.4.5))(@builder.io/qwik@1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1))': dependencies: - '@builder.io/qwik': 1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) - '@builder.io/qwik-city': 1.7.3(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1) + '@builder.io/qwik': 1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) + '@builder.io/qwik-city': 1.9.0(@types/node@20.12.12)(rollup@4.18.0)(sass@1.77.4)(terser@5.31.1)(typescript@5.4.5) decode-formdata: 0.7.3 '@nodelib/fs.scandir@2.1.5': @@ -10663,9 +10676,9 @@ snapshots: '@polka/url@1.0.0-next.25': {} - '@qwikest/icons@0.0.13(@builder.io/qwik@1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1))': + '@qwikest/icons@0.0.13(@builder.io/qwik@1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1))': dependencies: - '@builder.io/qwik': 1.7.3(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) + '@builder.io/qwik': 1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) '@rollup/pluginutils@4.2.1': dependencies: @@ -12916,7 +12929,7 @@ snapshots: eslint: 8.57.0 globals: 13.24.0 - eslint-plugin-qwik@1.7.3(eslint@8.57.0): + eslint-plugin-qwik@1.9.0(eslint@8.57.0): dependencies: eslint: 8.57.0 jsx-ast-utils: 3.3.5 @@ -13780,9 +13793,7 @@ snapshots: ignore@5.3.1: {} - imagetools-core@6.0.4: - dependencies: - sharp: 0.33.4 + imagetools-core@7.0.1: {} immutable@4.3.6: {} @@ -17364,6 +17375,10 @@ snapshots: '@types/istanbul-lib-coverage': 2.0.6 convert-source-map: 2.0.0 + valibot@0.42.0(typescript@5.4.5): + optionalDependencies: + typescript: 5.4.5 + validate-npm-package-license@3.0.4: dependencies: spdx-correct: 3.2.0 @@ -17468,10 +17483,11 @@ snapshots: unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 - vite-imagetools@6.2.9(rollup@4.18.0): + vite-imagetools@7.0.4(rollup@4.18.0): dependencies: '@rollup/pluginutils': 5.1.0(rollup@4.18.0) - imagetools-core: 6.0.4 + imagetools-core: 7.0.1 + sharp: 0.33.4 transitivePeerDependencies: - rollup @@ -17869,6 +17885,8 @@ snapshots: optionalDependencies: commander: 9.5.0 + zod@3.22.4: {} + zod@3.23.8: {} zwitch@2.0.4: {} From 0447c90d45687a258a5f568a9584b712507ad6c2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 17 Sep 2024 15:56:30 -0500 Subject: [PATCH 12/27] Version Packages (#966) Co-authored-by: github-actions[bot] --- .changeset/cuddly-snakes-smell.md | 6 ------ .changeset/weak-phones-prove.md | 15 --------------- packages/cli/package.json | 2 +- packages/kit-headless/CHANGELOG.md | 16 ++++++++++++++++ packages/kit-headless/package.json | 2 +- packages/kit-styled/CHANGELOG.md | 16 ++++++++++++++++ packages/kit-styled/package.json | 4 ++-- packages/themes/CHANGELOG.md | 14 ++++++++++++++ packages/themes/package.json | 2 +- pnpm-lock.yaml | 12 +++++++++--- 10 files changed, 60 insertions(+), 29 deletions(-) delete mode 100644 .changeset/cuddly-snakes-smell.md delete mode 100644 .changeset/weak-phones-prove.md diff --git a/.changeset/cuddly-snakes-smell.md b/.changeset/cuddly-snakes-smell.md deleted file mode 100644 index 2e59e3991..000000000 --- a/.changeset/cuddly-snakes-smell.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@qwik-ui/headless': minor -'@qwik-ui/styled': minor ---- - -feat: toggle and togglegroup headless and styled components diff --git a/.changeset/weak-phones-prove.md b/.changeset/weak-phones-prove.md deleted file mode 100644 index e2fa08844..000000000 --- a/.changeset/weak-phones-prove.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -'@qwik-ui/headless': minor -'@qwik-ui/styled': minor -'@qwik-ui/themes': minor ---- - -feat: carousel reaches beta state - -feat: stepper component added as a configuration for the carousel - -feat: vertical carousels are now supported - -feat: progress bar gets a major refactor and is backwards compatible - -docs: fixed theme issues and improved prefetching diff --git a/packages/cli/package.json b/packages/cli/package.json index 366f07e2b..d3255772a 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -19,7 +19,7 @@ "yargs": "17.7.2" }, "devDependencies": { - "@qwik-ui/styled": "0.1.0" + "@qwik-ui/styled": "0.2.0" }, "type": "commonjs", "main": "./src/index.js", diff --git a/packages/kit-headless/CHANGELOG.md b/packages/kit-headless/CHANGELOG.md index 5ce627a47..91be78861 100644 --- a/packages/kit-headless/CHANGELOG.md +++ b/packages/kit-headless/CHANGELOG.md @@ -1,5 +1,21 @@ # Changelog +## 0.6.0 + +### Minor Changes + +- ✨ toggle and togglegroup headless and styled components (by [@steffanek](https://github.com/steffanek) in [#957](https://github.com/qwikifiers/qwik-ui/pull/957)) + +- ✨ carousel reaches beta state (by [@thejackshelton](https://github.com/thejackshelton) in [#965](https://github.com/qwikifiers/qwik-ui/pull/965)) + + feat: stepper component added as a configuration for the carousel + + feat: vertical carousels are now supported + + feat: progress bar gets a major refactor and is backwards compatible + + docs: fixed theme issues and improved prefetching + ## 0.5.2 ### Patch Changes diff --git a/packages/kit-headless/package.json b/packages/kit-headless/package.json index c164b177a..b34a44fe4 100644 --- a/packages/kit-headless/package.json +++ b/packages/kit-headless/package.json @@ -1,6 +1,6 @@ { "name": "@qwik-ui/headless", - "version": "0.5.2", + "version": "0.6.0", "description": "Qwik UI headless components library", "publishConfig": { "access": "public" diff --git a/packages/kit-styled/CHANGELOG.md b/packages/kit-styled/CHANGELOG.md index 2826eba63..2db7a621d 100644 --- a/packages/kit-styled/CHANGELOG.md +++ b/packages/kit-styled/CHANGELOG.md @@ -1,5 +1,21 @@ # @qwik-ui/styled +## 0.2.0 + +### Minor Changes + +- ✨ toggle and togglegroup headless and styled components (by [@steffanek](https://github.com/steffanek) in [#957](https://github.com/qwikifiers/qwik-ui/pull/957)) + +- ✨ carousel reaches beta state (by [@thejackshelton](https://github.com/thejackshelton) in [#965](https://github.com/qwikifiers/qwik-ui/pull/965)) + + feat: stepper component added as a configuration for the carousel + + feat: vertical carousels are now supported + + feat: progress bar gets a major refactor and is backwards compatible + + docs: fixed theme issues and improved prefetching + ## 0.1.0 ### Minor Changes diff --git a/packages/kit-styled/package.json b/packages/kit-styled/package.json index 22a272390..908b89007 100644 --- a/packages/kit-styled/package.json +++ b/packages/kit-styled/package.json @@ -1,6 +1,6 @@ { "name": "@qwik-ui/styled", - "version": "0.1.0", + "version": "0.2.0", "description": "Qwik UI components library with styles", "publishConfig": { "access": "public" @@ -23,7 +23,7 @@ "@builder.io/qwik": "^1.9" }, "devDependencies": { - "@qwik-ui/headless": "^0.5.2", + "@qwik-ui/headless": "^0.6.0", "@qwik-ui/utils": "0.3.1" } } diff --git a/packages/themes/CHANGELOG.md b/packages/themes/CHANGELOG.md index 825c32f0d..5d9ebd058 100644 --- a/packages/themes/CHANGELOG.md +++ b/packages/themes/CHANGELOG.md @@ -1 +1,15 @@ # Changelog + +## 0.1.0 + +### Minor Changes + +- ✨ carousel reaches beta state (by [@thejackshelton](https://github.com/thejackshelton) in [#965](https://github.com/qwikifiers/qwik-ui/pull/965)) + + feat: stepper component added as a configuration for the carousel + + feat: vertical carousels are now supported + + feat: progress bar gets a major refactor and is backwards compatible + + docs: fixed theme issues and improved prefetching diff --git a/packages/themes/package.json b/packages/themes/package.json index c8d2a4cd9..873520567 100644 --- a/packages/themes/package.json +++ b/packages/themes/package.json @@ -1,6 +1,6 @@ { "name": "@qwik-ui/themes", - "version": "0.0.1", + "version": "0.1.0", "description": "Qwik UI themes", "publishConfig": { "access": "public" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0bde510b9..7760abaab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -310,7 +310,7 @@ importers: version: 17.7.2 devDependencies: '@qwik-ui/styled': - specifier: 0.1.0 + specifier: 0.2.0 version: link:../kit-styled packages/kit-headless: @@ -341,7 +341,7 @@ importers: version: 1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1) devDependencies: '@qwik-ui/headless': - specifier: ^0.5.2 + specifier: ^0.6.0 version: link:../kit-headless '@qwik-ui/utils': specifier: 0.3.1 @@ -9890,6 +9890,12 @@ snapshots: transitivePeerDependencies: - nx + '@nrwl/devkit@19.3.0(nx@19.3.0(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))': + dependencies: + '@nx/devkit': 19.3.0(nx@19.3.0(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) + transitivePeerDependencies: + - nx + '@nrwl/devkit@19.3.0(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))': dependencies: '@nx/devkit': 19.3.0(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) @@ -10092,7 +10098,7 @@ snapshots: '@nx/devkit@19.3.0(nx@19.3.0(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11)))': dependencies: - '@nrwl/devkit': 19.3.0(nx@19.4.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) + '@nrwl/devkit': 19.3.0(nx@19.3.0(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5))(@swc/core@1.5.29(@swc/helpers@0.5.11))) ejs: 3.1.10 enquirer: 2.3.6 ignore: 5.3.1 From 63c88429f74d3e7f3a46396d0932cdc0f7aa43c2 Mon Sep 17 00:00:00 2001 From: Din Date: Wed, 18 Sep 2024 21:09:46 +0800 Subject: [PATCH 13/27] fix(docs): typo (#943) --- .../src/routes/docs/styled/(getting-started)/install/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx index 739bd81b5..2c0ba075a 100644 --- a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx +++ b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx @@ -258,7 +258,7 @@ export * from './select/select'; This way you can now `import { Accordion, Alert, ... } from '~/components/ui';` 👯‍♀️ -(**small tip:** you can commment out the components you don't use!) +(**small tip:** you can comment out the components you don't use!) ## Tailwind CSS IntelliSense VSCode extension From 6fcd4724255632da37d8ed157724df54d253c8d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=AFeul?= <45822175+maiieul@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:20:34 +0200 Subject: [PATCH 14/27] fix(mdx): add ?inline to css default import (#944) * fix(mdx): add ?inline to css default import * fix: remove 'as any' leading to error on CI --- apps/website/src/routes/docs/headless/popover/index.mdx | 2 +- apps/website/src/routes/docs/headless/tooltip/index.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/routes/docs/headless/popover/index.mdx b/apps/website/src/routes/docs/headless/popover/index.mdx index adeefe34a..aa917618a 100644 --- a/apps/website/src/routes/docs/headless/popover/index.mdx +++ b/apps/website/src/routes/docs/headless/popover/index.mdx @@ -4,7 +4,7 @@ title: Qwik UI | Popover import { statusByComponent } from '~/_state/component-statuses'; -import styles from './snippets/popover.css'; +import styles from './snippets/popover.css?inline'; diff --git a/apps/website/src/routes/docs/headless/tooltip/index.mdx b/apps/website/src/routes/docs/headless/tooltip/index.mdx index 22d654297..e885b8c43 100644 --- a/apps/website/src/routes/docs/headless/tooltip/index.mdx +++ b/apps/website/src/routes/docs/headless/tooltip/index.mdx @@ -4,7 +4,7 @@ title: Qwik UI | Tooltip import { statusByComponent } from '~/_state/component-statuses'; -import styles from './snippets/tooltip.css'; +import styles from './snippets/tooltip.css?inline'; From c818eec052b7479bbd559946fe72e95a6bd589ee Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Fri, 20 Sep 2024 14:26:14 -0500 Subject: [PATCH 15/27] Updated checkbox (#969) * initial tests * updated checkbox --- .../headless/checkbox/examples/checklist.tsx | 28 + .../checkbox/examples/controlled-values.tsx | 2 +- .../docs/headless/checkbox/examples/hero.tsx | 22 +- .../docs/headless/checkbox/examples/pizza.tsx | 77 +-- .../headless/checkbox/examples/reactive.tsx | 27 + .../examples/test-controlled-list-false.tsx | 6 +- .../examples/test-controlled-list-falses.tsx | 54 +- .../examples/test-controlled-list-mixed.tsx | 85 +-- .../examples/test-controlled-list-true.tsx | 55 +- .../examples/test-controlled-list-trues.tsx | 6 +- .../examples/test-controlled-list.tsx | 6 +- .../checkbox/examples/test-default.tsx | 27 +- ...test-hero.tsx => test-initial-checked.tsx} | 8 +- .../headless/checkbox/examples/test-list.tsx | 60 +- .../checkbox/examples/test-props-ids-list.tsx | 6 +- .../routes/docs/headless/checkbox/index.mdx | 2 + .../components/checkbox/checkbox-context.tsx | 3 + .../checkbox/checkbox-indicator.tsx | 26 +- .../src/components/checkbox/checkbox-root.tsx | 69 +++ .../src/components/checkbox/checkbox.css | 3 + .../components/checkbox/checkbox.driver.ts | 17 +- .../src/components/checkbox/checkbox.test.ts | 556 ++++++++++-------- .../src/components/checkbox/checkbox.tsx | 225 ------- .../src/components/checkbox/context-id.ts | 11 - .../src/components/checkbox/index.ts | 3 +- .../src/components/checkbox/note.md | 1 + .../checklist/checklist-context-wrapper.tsx | 64 -- .../checklist/checklist-context.tsx | 12 + .../checklist/checklist-indicator.tsx | 31 +- .../components/checklist/checklist-item.tsx | 69 +++ .../components/checklist/checklist-root.tsx | 65 ++ .../checklist/checklist-selectall.tsx | 47 ++ .../src/components/checklist/checklist.tsx | 105 ---- .../src/components/checklist/context-id.ts | 10 - .../src/components/checklist/index.ts | 9 +- .../src/components/combobox/combobox.test.ts | 48 +- .../dropdown/dropdown-checkbox-item.tsx | 2 +- .../dropdown/dropdown-radio-item.tsx | 2 +- 38 files changed, 921 insertions(+), 928 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx create mode 100644 apps/website/src/routes/docs/headless/checkbox/examples/reactive.tsx rename apps/website/src/routes/docs/headless/checkbox/examples/{test-hero.tsx => test-initial-checked.tsx} (65%) create mode 100644 packages/kit-headless/src/components/checkbox/checkbox-context.tsx create mode 100644 packages/kit-headless/src/components/checkbox/checkbox-root.tsx create mode 100644 packages/kit-headless/src/components/checkbox/checkbox.css delete mode 100644 packages/kit-headless/src/components/checkbox/checkbox.tsx delete mode 100644 packages/kit-headless/src/components/checkbox/context-id.ts create mode 100644 packages/kit-headless/src/components/checkbox/note.md delete mode 100644 packages/kit-headless/src/components/checklist/checklist-context-wrapper.tsx create mode 100644 packages/kit-headless/src/components/checklist/checklist-context.tsx create mode 100644 packages/kit-headless/src/components/checklist/checklist-item.tsx create mode 100644 packages/kit-headless/src/components/checklist/checklist-root.tsx create mode 100644 packages/kit-headless/src/components/checklist/checklist-selectall.tsx delete mode 100644 packages/kit-headless/src/components/checklist/checklist.tsx delete mode 100644 packages/kit-headless/src/components/checklist/context-id.ts diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx new file mode 100644 index 000000000..b0f592b8c --- /dev/null +++ b/apps/website/src/routes/docs/headless/checkbox/examples/checklist.tsx @@ -0,0 +1,28 @@ +import { component$ } from '@builder.io/qwik'; + +import { Checklist } from '@qwik-ui/headless'; + +export default component$(() => { + return ( + + +
+ ✅ +
{' '} + Select All + + + {Array.from({ length: 2 }, (_, index) => { + const uniqueKey = `cl-${index}-${Date.now()}`; + return ( + +
+ ✅ +
+ {`item ${index}`} + + ); + })} + + ); +}); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx index 9b2fcb8f3..c841af64d 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/controlled-values.tsx @@ -1,4 +1,4 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { component$, useSignal } from '@builder.io/qwik'; import { Checkbox } from '@qwik-ui/headless'; export default component$(() => { const initialVal1 = false; diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx index 932d1a50d..f35a438d0 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx @@ -1,14 +1,18 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { component$, useSignal } from '@builder.io/qwik'; import { Checkbox } from '@qwik-ui/headless'; export default component$(() => { + const isCheckedSig = useSignal(false); + return ( - <> - - - ✅ - - I have read the README - - + +
+ ✅ +
+

I have read the README

+ ); }); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx index 37c671abe..633f5069b 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx @@ -1,39 +1,42 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; -import { Checkbox, Checklist } from '@qwik-ui/headless'; -const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom']; -const toppingImages = ['🌶️', '🍗', '🍍', '🍄']; -export default component$(() => { - return ( - <> -

Pizza toppings

- - - -
- 🍕 -
+// import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +// import { Checkbox, Checklist } from '@qwik-ui/headless'; +// const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom']; +// const toppingImages = ['🌶️', '🍗', '🍍', '🍄']; +// export default component$(() => { +// return ( +// <> +//

Pizza toppings

+// +// +// +//
+// 🍕 +//
-
- ➖ -
- - Pick all toppings - +//
+// ➖ +//
+// +// Pick all toppings +// - {toppingNames.map((name, i) => { - return ( - - - {toppingImages[i]} - - {name} - - ); - })} - - - ); -}); +// {toppingNames.map((name, i) => { +// return ( +// +// +// {toppingImages[i]} +// +// {name} +// +// ); +// })} +// +// +// ); +// }); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/reactive.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/reactive.tsx new file mode 100644 index 000000000..ad20aa681 --- /dev/null +++ b/apps/website/src/routes/docs/headless/checkbox/examples/reactive.tsx @@ -0,0 +1,27 @@ +import { component$, useSignal } from '@builder.io/qwik'; +import { Checkbox } from '@qwik-ui/headless'; +export default component$(() => { + const isCheckedSig = useSignal(false); + + return ( + <> + +
+ ✅ +
+

I have read the README

+ + + + ); +}); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx index 9946226e4..480307958 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx @@ -1,4 +1,4 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { component$, useSignal } from '@builder.io/qwik'; import { Checkbox, Checklist } from '@qwik-ui/headless'; // TODO: add logic to handle user passed sigs with trues // this test basically ensures that the sig passed to the checklist controlls trumps all its children @@ -7,10 +7,10 @@ export default component$(() => { return ( <>

Pick a cat

- + diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx index 5c458f05d..4e2180971 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx @@ -1,36 +1,28 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; -import { Checkbox, Checklist } from '@qwik-ui/headless'; +import { component$ } from '@builder.io/qwik'; + +import { Checklist } from '@qwik-ui/headless'; + export default component$(() => { - const firstUserSig = useSignal(false); - const secondUserSig = useSignal(false); return ( - <> -

Pick a cat

- - - - ✅ - -

Controlls all

- - - ✅ -

No other stuff is needed here

- + + +
+ ✅ +
{' '} + Select All + - -
- ✅ -

No other stuff is needed here

-
- - - + {Array.from({ length: 2 }, (_, index) => { + const uniqueKey = `cl-${index}-${Date.now()}`; + return ( + +
+ ✅ +
+ {`item ${index}`} + + ); + })} + ); }); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx index 97998cd2d..72e924095 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx @@ -1,41 +1,46 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; -import { Checkbox, Checklist } from '@qwik-ui/headless'; -export default component$(() => { - const firstUserSig = useSignal(false); - const secondUserSig = useSignal(true); - return ( - <> -

Pick a cat

- - - -
- ✅ -
-
- ➖ -
- -

Controlls all

- - - ✅ -

No other stuff is needed here

- +// import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +// import { Checkbox, Checklist } from '@qwik-ui/headless'; +// export default component$(() => { +// const firstUserSig = useSignal(false); +// const secondUserSig = useSignal(true); +// return ( +// <> +//

Pick a cat

+// +// +// +//
+// ✅ +//
+//
+// ➖ +//
+// +//

Controlls all

+// +// +// ✅ +//

No other stuff is needed here

+// - -
- ✅ -

No other stuff is needed here

-
- - - - ); -}); +// +//
+// +// ✅ +// +//

No other stuff is needed here

+//
+// +// +// +// ); +// }); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx index 1b07e991d..b1e16b705 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx @@ -1,46 +1,19 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; -import { Checkbox, Checklist } from '@qwik-ui/headless'; +import { component$ } from '@builder.io/qwik'; +import { Checklist } from '@qwik-ui/headless'; // this test basically ensures that the sig passed to the checklist controlls trumps all its children export default component$(() => { - const checklistSig = useSignal(true); + // const checklistSig = useSignal(true); return ( - <> -

Pick a cat

- - - -
- ✅ -
- -
- ➖ -
- -

Controlls all

- - - ✅ -

No other stuff is needed here

- - - -
- ✅ -

Im a true.tsx

-
- - -

You signal is:

-

{`${checklistSig.value}`}

- + + + ✅ + + + ✅ first item + + + ✅ second item + + ); }); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx index 43d0ebc4e..c723dcfbc 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx @@ -1,4 +1,4 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { component$, useSignal } from '@builder.io/qwik'; import { Checkbox, Checklist } from '@qwik-ui/headless'; export default component$(() => { const firstUserSig = useSignal(true); @@ -6,10 +6,10 @@ export default component$(() => { return ( <>

Pick a cat

- + ✅ diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx index 4717b279f..2e8ce5759 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx @@ -1,4 +1,4 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { component$, useSignal } from '@builder.io/qwik'; import { Checkbox, Checklist } from '@qwik-ui/headless'; export default component$(() => { const firstUserSig = useSignal(true); @@ -6,10 +6,10 @@ export default component$(() => { return ( <>

Pick a cat

- + ✅ diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-default.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-default.tsx index 113802e5f..c13b66a80 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-default.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-default.tsx @@ -1,17 +1,18 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; -import { Checkbox, Checklist } from '@qwik-ui/headless'; +import { component$, useSignal } from '@builder.io/qwik'; +import { Checkbox } from '@qwik-ui/headless'; + export default component$(() => { + const bindChecked = useSignal(false); return ( - <> -

I'm the default checkbox!!!

- -
- -

✅

- -

No other stuff is needed here

-
- - + + +

✅

+ + I have read the README + ); }); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-hero.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-initial-checked.tsx similarity index 65% rename from apps/website/src/routes/docs/headless/checkbox/examples/test-hero.tsx rename to apps/website/src/routes/docs/headless/checkbox/examples/test-initial-checked.tsx index 21f227d5c..211e05f08 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-hero.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-initial-checked.tsx @@ -1,19 +1,17 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { component$, useSignal } from '@builder.io/qwik'; import { Checkbox } from '@qwik-ui/headless'; export default component$(() => { - const userSig = useSignal(true); + const bindChecked = useSignal(true); return ( <> - +

✅

 -

No other stuff is needed here

 -
{`${userSig.value}`}
); }); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx index ddd840a9b..3369e9101 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx @@ -1,39 +1,33 @@ import { component$ } from '@builder.io/qwik'; -import { Checkbox, Checklist } from '@qwik-ui/headless'; -export default component$(() => { - return ( - <> -

Pick a cat

- - - -
- ✅ -
- -
- ➖ -
- -

Get All

- +import { Checklist } from '@qwik-ui/headless'; - - ✅ -

Cat One

- +export default component$(() => { + return ( + + +
+ ✅ +
{' '} + Select All + - -
- ✅ -

Cat Two

-
- - - + +
+ ✅ +
+ first item + + +
+ ✅ +
+ second item + + ); }); diff --git a/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx b/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx index 47e008451..2fd0ccc08 100644 --- a/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx +++ b/apps/website/src/routes/docs/headless/checkbox/examples/test-props-ids-list.tsx @@ -1,4 +1,4 @@ -import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; +import { component$, useSignal } from '@builder.io/qwik'; import { Checkbox, Checklist } from '@qwik-ui/headless'; export default component$(() => { const firstUserSig = useSignal(true); @@ -6,10 +6,10 @@ export default component$(() => { return ( <>

Pick a cat

- + diff --git a/apps/website/src/routes/docs/headless/checkbox/index.mdx b/apps/website/src/routes/docs/headless/checkbox/index.mdx index ebe744394..278d807f3 100644 --- a/apps/website/src/routes/docs/headless/checkbox/index.mdx +++ b/apps/website/src/routes/docs/headless/checkbox/index.mdx @@ -44,6 +44,8 @@ In the example below, the left checkbox starts as **false**, while the right che + + ## Customization & Caveats You can apply CSS classes to any part of the component. Any valid HTML can be used as an icon, but children of the Checkbox Indicator are removed from the accessibility tree to prevent them from being added to the Checkbox Label. diff --git a/packages/kit-headless/src/components/checkbox/checkbox-context.tsx b/packages/kit-headless/src/components/checkbox/checkbox-context.tsx new file mode 100644 index 000000000..e1d3a0f93 --- /dev/null +++ b/packages/kit-headless/src/components/checkbox/checkbox-context.tsx @@ -0,0 +1,3 @@ +import { createContextId, type Signal } from '@builder.io/qwik'; + +export const CheckboxContext = createContextId>('CheckBox.context'); diff --git a/packages/kit-headless/src/components/checkbox/checkbox-indicator.tsx b/packages/kit-headless/src/components/checkbox/checkbox-indicator.tsx index 8adc76e70..b6183ded5 100644 --- a/packages/kit-headless/src/components/checkbox/checkbox-indicator.tsx +++ b/packages/kit-headless/src/components/checkbox/checkbox-indicator.tsx @@ -1,15 +1,29 @@ -import { component$, useContext, PropsOf, Slot } from '@builder.io/qwik'; -import { CheckboxContext } from './context-id'; +import { + component$, + useContext, + type PropsOf, + Slot, + useTask$, + useStyles$, +} from '@builder.io/qwik'; +import { CheckboxContext } from './checkbox-context'; +import './checkbox.css'; +import styles from './checkbox.css?inline'; export type CheckboxIndicatorProps = PropsOf<'div'>; export const CheckboxIndicator = component$((props) => { + useStyles$(styles); + const checkSig = useContext(CheckboxContext); + + useTask$(({ track }) => { + track(() => checkSig.value); + }); + return ( -
- + ); }); diff --git a/packages/kit-headless/src/components/checkbox/checkbox-root.tsx b/packages/kit-headless/src/components/checkbox/checkbox-root.tsx new file mode 100644 index 000000000..ddbcb9fb0 --- /dev/null +++ b/packages/kit-headless/src/components/checkbox/checkbox-root.tsx @@ -0,0 +1,69 @@ +import { + component$, + type PropsOf, + Slot, + type Signal, + $, + useContextProvider, + sync$, +} from '@builder.io/qwik'; +import { useBoundSignal } from '../../utils/bound-signal'; +import { CheckboxContext } from './checkbox-context'; +import type { QwikIntrinsicElements } from '@builder.io/qwik'; + +type AllowedElements = 'li' | 'div' | 'span'; + +export type CheckboxProps = { + 'bind:checked'?: Signal; + initialValue?: boolean; + index?: number; +} & PropsOf<'div'>; + +export const CheckboxRoot = component$( + ( + props: QwikIntrinsicElements[C] & { as?: C } & CheckboxProps, + ) => { + const { 'bind:checked': givenCheckedSig, initialValue, as, ...rest } = props; + const Comp = as ?? 'div'; + + const checkedSignal = useBoundSignal(givenCheckedSig, initialValue); + + useContextProvider(CheckboxContext, checkedSignal); + const handleKeyDownSync$ = sync$((e: KeyboardEvent) => { + if (e.key === ' ') { + e.preventDefault(); + } + }); + + const handleClick$ = $(() => { + checkedSignal.value = !checkedSignal.value; + }); + + const handleKeyDown$ = $((e: KeyboardEvent) => { + if (e.key === ' ') { + checkedSignal.value = !checkedSignal.value; + } + }); + + return ( + <> + {/* @ts-expect-error annoying polymorphism */} + + + + + ); + }, +); diff --git a/packages/kit-headless/src/components/checkbox/checkbox.css b/packages/kit-headless/src/components/checkbox/checkbox.css new file mode 100644 index 000000000..038a0a6f3 --- /dev/null +++ b/packages/kit-headless/src/components/checkbox/checkbox.css @@ -0,0 +1,3 @@ +[data-qds-indicator][data-hidden] { + display: none; +} diff --git a/packages/kit-headless/src/components/checkbox/checkbox.driver.ts b/packages/kit-headless/src/components/checkbox/checkbox.driver.ts index c1a3c2097..92280477b 100644 --- a/packages/kit-headless/src/components/checkbox/checkbox.driver.ts +++ b/packages/kit-headless/src/components/checkbox/checkbox.driver.ts @@ -1,4 +1,4 @@ -import { type Locator, type Page } from '@playwright/test'; +import type { Locator, Page } from '@playwright/test'; export type DriverLocator = Locator | Page; export function createTestDriver(rootLocator: T) { @@ -10,7 +10,7 @@ export function createTestDriver(rootLocator: T) { return getRoot().locator('#indicator'); }; const getCheckList = () => { - return getRoot().getByRole('group'); + return getRoot().getByRole('checkbox'); }; const getChecklistUL = () => { // note: filter method is always relative to the original locator not document root despite using root @@ -24,8 +24,17 @@ export function createTestDriver(rootLocator: T) { const getCheckbox = () => { return getRoot().getByRole('checkbox'); }; + + const getSelectAll = () => { + return getRoot().locator('[data-qds-selectall]'); + }; + + const getSelectAllIndicator = () => { + return getSelectAll().locator('[data-qds-indicator]'); + }; + const getTriCheckbox = () => { - return getRoot().locator('css=[aria-controls]'); + return getRoot().locator('#selectAll'); }; return { ...rootLocator, @@ -37,5 +46,7 @@ export function createTestDriver(rootLocator: T) { getChecklistUL, getChecklistLIs, getTriCheckbox, + getSelectAll, + getSelectAllIndicator, }; } diff --git a/packages/kit-headless/src/components/checkbox/checkbox.test.ts b/packages/kit-headless/src/components/checkbox/checkbox.test.ts index 75b808902..566c41012 100644 --- a/packages/kit-headless/src/components/checkbox/checkbox.test.ts +++ b/packages/kit-headless/src/components/checkbox/checkbox.test.ts @@ -1,8 +1,9 @@ +// TODO: refactor this into checkbox.test.ts and checklist.test.ts + import { expect, test, type Page } from '@playwright/test'; import { createTestDriver } from './checkbox.driver'; -import { getTriBool } from '../checklist/checklist-context-wrapper'; async function setup(page: Page, exampleName: string) { - await page.goto(`/headless/checkbox/${exampleName}`); + await page.goto(`http://localhost:6174/checkbox/${exampleName}`); const driver = createTestDriver(page); @@ -28,25 +29,138 @@ async function setup(page: Page, exampleName: string) { }; } -test.describe('checklist', () => { - test(`GIVEN a mixed checklist - WHEN the checklist renders - IT should render the mixed img - AND not the true img`, async ({ page }) => { - const exampleName = 'test-controlled-list-mixed'; - await setup(page, exampleName); - await expect(page.locator('#mixed-img')).toBeVisible(); - await expect(page.locator('#true-img')).toBeHidden(); +/** + * TYPESCRIPT SUPPORT + LESS IMPORTS + * test(`GIVEN a carousel + WHEN clicking on the next button + THEN it should move to the next slide`, async ({ page }) => { + const { driver: d } = await setup(page, 'hero'); + + await d.getNextButton().click(); + await expect(d.getSlideAt(1)).toHaveAttribute('data-active'); }); + */ - test(`GIVEN an all-checked checklist - WHEN the checklist renders - IT should render the true img - AND not the mixed img`, async ({ page }) => { - const exampleName = 'test-controlled-list-true'; - await setup(page, exampleName); - await expect(page.locator('#true-img')).toBeVisible(); - await expect(page.locator('#mixed-img')).toBeHidden(); +// components -> usually modular, sometimes grouped depending on what it is +// modular -> tests ONE SPECIFIC thing + +// grouped -> tests groups of things + +/** + * + * test.describe('Critical functionality', () => { + * test(`GIVEN a checkbox + When the checkbox is clicked + Then it should be checked`, async ({ page }) => { + await expect() -> aria-checked + await expect() -> data-checked + }); + + // if there's too many of one thing (for example, maybe you need to check 10 different keys! make it a describe block) + test(`GIVEN a checkbox + When the checkbox is pressed with space + Then it should be checked`, async ({ page }) => { + + }); + + Ex: Select + + test.describe('Keyboard Behavior', () => { + + }); + * }) + * + */ + +test.describe('checkbox', () => { + // test default state and click from unchecked checkbox + test(`GIVEN a checkbox that is initially unchecked + and its icon is hidden + WHEN the checkbox is clicked + IT should toggle aria-checked to true + and make its icon visible`, async ({ page }) => { + const exampleName = 'test-default'; + const { getCheckbox, getIcon } = await setup(page, exampleName); + await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); + await expect(getIcon()).toBeHidden(); + await getCheckbox().click(); + await expect(getCheckbox()).toHaveAttribute('aria-checked', 'true'); + await expect(getIcon()).toBeVisible(); + }); + + // test default state and keyboard space from unchecked checkbox + test(`GIVEN a checkbox that is initially unchecked + and its icon is hidden + WHEN the checkbox is focused and the spacebar is pressed + IT should toggle aria-checked to true + and make its icon visible`, async ({ page }) => { + const exampleName = 'test-default'; + const { getCheckbox, getIcon } = await setup(page, exampleName); + await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); + await expect(getIcon()).toBeHidden(); + await getCheckbox().focus(); + await getCheckbox().press(' '); + await expect(getCheckbox()).toHaveAttribute('aria-checked', 'true'); + await expect(getIcon()).toBeVisible(); + }); + + // test default state from checked checkbox + test(`GIVEN a checkbox that is checked + WHEN the checkbox renders + IT should have aria-checked as true + and its icon visible`, async ({ page }) => { + const exampleName = 'test-initial-checked'; + const { getCheckbox, getIcon } = await setup(page, exampleName); + await expect(getCheckbox()).toBeVisible(); + await expect(getCheckbox()).toHaveAttribute('aria-checked', 'true'); + await expect(getIcon()).toBeVisible(); + }); + + // test mouse click + test(`GIVEN a checkbox that is checked + WHEN the checkbox is clicked + IT should have aria-checked as false + and its icon hidden`, async ({ page }) => { + const exampleName = 'test-initial-checked'; + const { getCheckbox, getIcon } = await setup(page, exampleName); + await expect(getCheckbox()).toBeVisible(); + await getCheckbox().click(); + await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); + await expect(getIcon()).toBeHidden(); + }); + + // test keyboard space from checked checkbox + test(`GIVEN a checkbox that is checked + WHEN the checkbox is focused and the spacebar is pressed + IT should have aria-checked as false + and its icon hidden`, async ({ page }) => { + const exampleName = 'test-initial-checked'; + const { getCheckbox, getIcon } = await setup(page, exampleName); + await expect(getCheckbox()).toBeVisible(); + await getCheckbox().focus(); + await getCheckbox().press(' '); + await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); + await expect(getIcon()).toBeHidden(); + }); +}); + +// Checklisst tests +test.describe('checklist', () => { + // test(`GIVEN a mixed checklist + // WHEN the checklist renders + // IT should render the mixed img + // AND not the true img`, async ({ page }) => { + // const exampleName = 'test-controlled-list-mixed'; + // await setup(page, exampleName); + // await expect(page.locator('#mixed-img')).toBeVisible(); + // await expect(page.locator('#true-img')).toBeHidden(); + // }); + + test(`GIVEN a checklist with all items checked + WHEN the checklist renders + The indicator in the toggle all checkbox should be visible`, async ({ page }) => { + const { driver: d } = await setup(page, 'test-controlled-list-true'); + await expect(d.getSelectAllIndicator()).toBeVisible(); }); test(`GIVEN an all-unchecked checklist @@ -58,33 +172,33 @@ test.describe('checklist', () => { await expect(page.locator('#mixed-img')).toBeHidden(); }); - test(`GIVEN a checklist with checkboxes - WHEN the elements render - THEN the checklist should be a
    with
  • s of checkboxes, all wrapped around a div with a role and aria-labeledby attributes`, async ({ - page, - }) => { - const { getCheckList, getChecklistUL, getChecklistLIs } = await setup( - page, - 'test-list', - ); - await expect(getCheckList()).toBeVisible(); - await expect(getCheckList()).toHaveAttribute('aria-labelledby', 'test123'); - await expect(getChecklistUL()).toBeVisible(); - await expect(getChecklistLIs()).toBeVisible(); - }); + // TODO: fix this test + // test(`GIVEN a checklist with checkboxes + // WHEN the elements render + // THEN the checklist should be a
      with
    • s of checkboxes, all wrapped around a div with a role and aria-labeledby attributes`, async ({ + // page, + // }) => { + // const { getRoot, getCheckList, getChecklistUL, getChecklistLIs } = + // await setup(page, 'test-list'); + // await expect(getCheckList()).toBeVisible(); + // await expect(getCheckList()).toHaveAttribute('aria-labelledby', 'test123'); + // await expect(getChecklistUL()).toBeVisible(); + // await expect(getChecklistLIs()).toBeVisible(); + // }); - test(`GIVEN a tri boolean function - WHEN it recieves an array of booleans - IT should return the correct tri bool`, async () => { - const indeterminateArr = [true, true, false]; - const trueArr = [true, true, true]; - const falseArr = [false, false, false]; - const emptyArr: boolean[] = []; - expect(getTriBool(indeterminateArr)).toBe('indeterminate'); - expect(getTriBool(trueArr)).toBe(true); - expect(getTriBool(falseArr)).toBe(false); - expect(getTriBool(emptyArr)).toBe('indeterminate'); - }); + // not using triboolean + // test(`GIVEN a tri boolean function + // WHEN it recieves an array of booleans + // IT should return the correct tri bool`, async () => { + // const indeterminateArr = [true, true, false]; + // const trueArr = [true, true, true]; + // const falseArr = [false, false, false]; + // const emptyArr: boolean[] = []; + // expect(getTriBool(indeterminateArr)).toBe('indeterminate'); + // expect(getTriBool(trueArr)).toBe(true); + // expect(getTriBool(falseArr)).toBe(false); + // expect(getTriBool(emptyArr)).toBe('indeterminate'); + // }); test(`GIVEN checklist with all unchecked checkboxes WHEN it renders @@ -96,29 +210,33 @@ test.describe('checklist', () => { await expect(getTriCheckbox()).toBeVisible(); await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'false'); }); - test(`GIVEN checklist with all unchecked checkboxes - WHEN the first checkbox is checked - the chekbox with aria-controls should have aria-checked mixed`, async ({ - page, - }) => { - const exampleName = 'test-list'; - const { getTriCheckbox, getCheckbox } = await setup(page, exampleName); - await expect(getTriCheckbox()).toBeVisible(); - await getCheckbox().nth(1).press(' '); - await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); - }); + // Not using mixed yet + // test(`GIVEN checklist with all unchecked checkboxes + // WHEN the first checkbox is checked + // the chekbox with aria-controls should have aria-checked mixed`, async ({ + // page, + // }) => { + // const exampleName = 'test-list'; + // const { getTriCheckbox, getCheckbox } = await setup(page, exampleName); + // await expect(getTriCheckbox()).toBeVisible(); + // await getCheckbox().nth(1).press(' '); + // await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); + // }); + + // 4 test(`GIVEN checklist with all unchecked checkboxes - WHEN all checkboxes are checked with space - the tri state checkbox should have aria-checked true`, async ({ page }) => { + WHEN all checkboxes are checked + the toggle all indicator should be checked`, async ({ page }) => { const exampleName = 'test-list'; - const { getTriCheckbox, getCheckbox } = await setup(page, exampleName); - await expect(getTriCheckbox()).toBeVisible(); - await getCheckbox().nth(1).press(' '); - await getCheckbox().nth(2).press(' '); - await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'true'); + const { driver: d } = await setup(page, exampleName); + await expect(d.getSelectAllIndicator()).toBeHidden(); + await d.getCheckbox().nth(1).click(); + await d.getCheckbox().nth(2).click(); + await expect(d.getSelectAllIndicator()).toBeVisible(); }); + //5 test(`GIVEN checklist with all unchecked checkboxes WHEN the checklist's checkbox is checked with space THEN all chekboxes should have aria-checked true`, async ({ page }) => { @@ -131,6 +249,7 @@ test.describe('checklist', () => { await expect(getCheckbox().nth(2)).toHaveAttribute('aria-checked', 'true'); }); + //6 // TODO: reme two part of test by adding new test file test(`GIVEN checklist with all unchecked checkboxes WHEN the checklist's checkbox is checked twice using space @@ -149,45 +268,53 @@ test.describe('checklist', () => { await expect(getCheckbox().nth(1)).toHaveAttribute('aria-checked', 'false'); await expect(getCheckbox().nth(2)).toHaveAttribute('aria-checked', 'false'); }); - test(`GIVEN checklist with checkboxes - WHEN the values of aria-controls are search - IT should always return a valid, non-duplicate, checkboxes`, async ({ page }) => { - const { getTriCheckbox } = await setup(page, 'test-list'); - await expect(getTriCheckbox()).toHaveAttribute('aria-controls'); - const magic = await getTriCheckbox().getAttribute('aria-controls'); - expect(magic).not.toBe(null); - if (magic === null) { - throw new Error( - 'no mixed checkbox found. Was the driver or test template changed?', - ); - } - const idArr = magic.split(' '); - expect(isUniqArr(idArr)).toBe(true); - for (let index = 0; index < idArr.length; index++) { - const elementId = idArr[index]; - const PosCheckbox = page.locator(`#${elementId}`); - await expect(PosCheckbox).toBeVisible(); - const role = await PosCheckbox.getAttribute('role'); - expect(role).toBe('checkbox'); - } - }); - test(`GIVEN a controlled checklist with one default checkbox and a controlled checkbox of true - WHEN it renders - IT should have aria-checked mixed`, async ({ page }) => { - const exampleName = 'test-controlled-list'; - const { getTriCheckbox } = await setup(page, exampleName); - await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); - }); + // Search? + // test(`GIVEN checklist with checkboxes + // WHEN the values of aria-controls are search + // IT should always return a valid, non-duplicate, checkboxes`, async ({ + // page, + // }) => { + // const { getTriCheckbox } = await setup(page, 'test-list'); + // await expect(getTriCheckbox()).toHaveAttribute('aria-controls'); + // const magic = await getTriCheckbox().getAttribute('aria-controls'); + // expect(magic).not.toBe(null); + // if (magic === null) { + // throw new Error( + // 'no mixed checkbox found. Was the driver or test template changed?' + // ); + // } + // const idArr = magic.split(' '); + // expect(isUniqArr(idArr)).toBe(true); + // for (let index = 0; index < idArr.length; index++) { + // const elementId = idArr[index]; + // const PosCheckbox = page.locator(`#${elementId}`); + // await expect(PosCheckbox).toBeVisible(); + // const role = await PosCheckbox.getAttribute('role'); + // expect(role).toBe('checkbox'); + // } + // }); - test(`GIVEN a controlled checklist with two true checkboxes + // Not using mixed yet + // test(`GIVEN a controlled checklist with one default checkbox and a controlled checkbox of true + // WHEN it renders + // IT should have aria-checked mixed`, async ({ page }) => { + // const exampleName = 'test-controlled-list'; + // const { getTriCheckbox } = await setup(page, exampleName); + // await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); + // }); + + //7 + test(`GIVEN a controlled checklist with two checked checkboxes WHEN it renders IT should have aria-checked true`, async ({ page }) => { const exampleName = 'test-controlled-list-trues'; const { getTriCheckbox } = await setup(page, exampleName); await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'true'); }); - test(`GIVEN a controlled checklist with two false checkboxes + + //8 + test(`GIVEN a controlled checklist with two unchecked checkboxes WHEN it renders IT should have aria-checked true`, async ({ page }) => { const exampleName = 'test-controlled-list-falses'; @@ -195,22 +322,26 @@ test.describe('checklist', () => { await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'false'); }); - test(`GIVEN a controlled checklist with mixed checkboxes - WHEN it renders - IT should have aria-checked mixed`, async ({ page }) => { - const exampleName = 'test-controlled-list-mixed'; - const { getTriCheckbox } = await setup(page, exampleName); - await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); - }); + //Not using mixed yet + // test(`GIVEN a controlled checklist with mixed checkboxes + // WHEN it renders + // IT should have aria-checked mixed`, async ({ page }) => { + // const exampleName = 'test-controlled-list-mixed'; + // const { getTriCheckbox } = await setup(page, exampleName); + // await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); + // }); - test(`GIVEN a controlled checklist with a checklist signal of true and default checkboxes as children + //9 + test(`GIVEN a checklist with intial value of true and default checkboxes as children WHEN the checklist renders IT shoud have aria-checked true`, async ({ page }) => { const exampleName = 'test-controlled-list-true'; const { getTriCheckbox } = await setup(page, exampleName); await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'true'); }); - test(`GIVEN a controlled checklist with a checklist signal of true and default checkboxes as children + + //10 + test(`GIVEN a checklist with intial value of true and default checkboxes as children WHEN the checklist renders ALL its child checkboxes should have aria-checked true`, async ({ page }) => { const exampleName = 'test-controlled-list-true'; @@ -222,59 +353,72 @@ test.describe('checklist', () => { } }); - // TODO: change api to not use indeterminate and used mixed instead - test(`GIVEN a controlled checklist with a checklist signal of true and default checkboxes as children - WHEN a child checkbox is unchecked - THEN the checklist signal should have aria-checked mixed`, async ({ page }) => { + // Not using mixed yet + // ONE CHILD UNCHECKED + //11 + test(`GIVEN a checklist that has all items checked + WHEN a child checkbox is unchecked + THEN the checklist signal should have a mixed state`, async ({ page }) => { const exampleName = 'test-controlled-list-true'; - const { getTriCheckbox } = await setup(page, exampleName); - const firstCheckbox = page.locator('#child-1'); - await firstCheckbox.press(' '); + const { getTriCheckbox, getCheckbox } = await setup(page, exampleName); + const firstCheckbox = getCheckbox().first(); + await firstCheckbox.click(); await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); }); - test(`GIVEN a controlled checklist with a checklist signal of true and default checkboxes as children - WHEN all child checkbox are unchecked - THEN the checklist signal should have aria-checked false`, async ({ page }) => { - const exampleName = 'test-controlled-list-true'; - const { getTriCheckbox } = await setup(page, exampleName); - await page.locator('#child-1').press(' '); - await page.locator('#child-2').press(' '); - await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'false'); - }); - test(`GIVEN a controlled checklist with every checkbox having a defined ID - WHEN it renders - ALL IDs should be present/rendered`, async ({ page }) => { - await setup(page, 'test-props-ids-list'); - const hardCodedIds = ['checklist', 'child-1', 'child-2']; - for (let index = 0; index < hardCodedIds.length; index++) { - const id = hardCodedIds[index]; - await expect(page.locator(`#${id}`)).toBeVisible(); - } - }); + // Not implemented yet + // ALL CHILDREN UNCHECKED + // test(`GIVEN a controlled checklist with a checklist signal of true and default checkboxes as children + // WHEN all child checkbox are unchecked + // THEN the checklist signal should have aria-checked false`, async ({ + // page, + // }) => { + // const exampleName = 'test-controlled-list-true'; + // const { getTriCheckbox } = await setup(page, exampleName); + // await page.locator('#child-1').press(' '); + // await page.locator('#child-2').press(' '); + // await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'false'); + // }); - test(`GIVEN a controlled checklist with every checkbox having a defined ID - WHEN it renders - THEN all IDs should be present in the aria-controls`, async ({ page }) => { - const { getTriCheckbox } = await setup(page, 'test-props-ids-list'); - const hardChildren = ['child-1', 'child-2']; - const magic = await getTriCheckbox().getAttribute('aria-controls'); - const twin = magic?.split(' '); - expect(hardChildren).toStrictEqual(twin); - }); + //Not using IDs yet and may not be needed + // test(`GIVEN a controlled checklist with every checkbox having a defined ID + // WHEN it renders + // ALL IDs should be present/rendered`, async ({ page }) => { + // await setup(page, 'test-props-ids-list'); + // const hardCodedIds = ['checklist', 'child-1', 'child-2']; + // for (let index = 0; index < hardCodedIds.length; index++) { + // const id = hardCodedIds[index]; + // await expect(page.locator(`#${id}`)).toBeVisible(); + // } + // }); - test(`GIVEN checklist with all unchecked checkboxes - WHEN the first child checkbox is clicked - the chekbox with aria-controls should have aria-checked mixed`, async ({ - page, - }) => { - const exampleName = 'test-list'; - const { getTriCheckbox, getCheckbox } = await setup(page, exampleName); - await expect(getTriCheckbox()).toBeVisible(); - await getCheckbox().nth(1).click(); - await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); - }); + //Not using IDs yet and may not be needed + // test(`GIVEN a controlled checklist with every checkbox having a defined ID + // WHEN it renders + // THEN all IDs should be present in the aria-controls`, async ({ page }) => { + // const { getTriCheckbox } = await setup(page, 'test-props-ids-list'); + // const hardChildren = ['child-1', 'child-2']; + // const magic = await getTriCheckbox().getAttribute('aria-controls'); + // const twin = magic?.split(' '); + // expect(hardChildren).toStrictEqual(twin); + // }); + + // Not using mixed yet + // ONE CHILD CHECKED + // test(`GIVEN checklist with all unchecked checkboxes + // WHEN the first child checkbox is clicked + // the chekbox with aria-controls should have aria-checked mixed`, async ({ + // page, + // }) => { + // const exampleName = 'test-list'; + // const { getTriCheckbox, getCheckbox } = await setup(page, exampleName); + // await expect(getTriCheckbox()).toBeVisible(); + // await getCheckbox().nth(1).click(); + // await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); + // }); + //Duplicates? Starts with Unchecked + //12 test(`GIVEN checklist with all unchecked checkboxes WHEN all checkboxes are checked using click THEN the checkbox with aria-controls should have aria-checked true`, async ({ @@ -288,6 +432,7 @@ test.describe('checklist', () => { await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'true'); }); + //13 test(`GIVEN checklist with all unchecked checkboxes WHEN the checklist's checkbox is checked by clicking THEN all checkboxes should have aria-checked true`, async ({ page }) => { @@ -300,6 +445,7 @@ test.describe('checklist', () => { await expect(getCheckbox().nth(2)).toHaveAttribute('aria-checked', 'true'); }); + //14 // TODO: reme two part of test by adding new test file test(`GIVEN checklist with all unchecked checkboxes WHEN the checklist's checkbox is checked twice using click @@ -337,104 +483,16 @@ test.describe('checklist', () => { // } // }); - test(`GIVEN a controlled checklist with a checklist signal of true and default checkboxes as children - WHEN a child checkbox is unchecked - THEN the checklist signal should have aria-checked mixed`, async ({ page }) => { - const exampleName = 'test-controlled-list-true'; - const { getTriCheckbox } = await setup(page, exampleName); - const firstCheckbox = page.locator('#child-1'); - await firstCheckbox.click(); - await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'mixed'); - }); - - test(`GIVEN a controlled checklist with a checklist signal of true and default checkboxes as children - WHEN all child checkbox are unchecked - THEN the checklist signal should have aria-checked false`, async ({ page }) => { - const exampleName = 'test-controlled-list-true'; - const { getTriCheckbox } = await setup(page, exampleName); - await page.locator('#child-1').click(); - await page.locator('#child-2').click(); - await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'false'); - }); + // Not using mixed yet + // test(`GIVEN a controlled checklist with a checklist signal of true and default checkboxes as children + // WHEN all child checkbox are unchecked + // THEN the checklist signal should have aria-checked false`, async ({ + // page, + // }) => { + // const exampleName = 'test-controlled-list-true'; + // const { getTriCheckbox } = await setup(page, exampleName); + // await page.locator('#child-1').click(); + // await page.locator('#child-2').click(); + // await expect(getTriCheckbox()).toHaveAttribute('aria-checked', 'false'); + // }); }); -test.describe('checkbox', () => { - test(`GIVEN a checkbox with a user sig value of true - WHEN the checkbox renders - IT should have aria-checked as true`, async ({ page }) => { - const exampleName = 'test-hero'; - const { getCheckbox } = await setup(page, exampleName); - await expect(getCheckbox()).toBeVisible(); - await expect(getCheckbox()).toHaveAttribute('aria-checked', 'true'); - }), - test(`GIVEN a checkbox with a user sig value of true -WHEN the checkbox is focused and the spacebar is pressed -IT should have aria-checked as false`, async ({ page }) => { - const exampleName = 'test-hero'; - const { getCheckbox } = await setup(page, exampleName); - await expect(getCheckbox()).toBeVisible(); - await getCheckbox().focus(); - await getCheckbox().press(' '); - await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); - }); - - test(`GIVEN a checkbox with a user sig value of true - WHEN the checkbox is focused and the spacebar is pressed - IT should have its icon hidden`, async ({ page }) => { - const exampleName = 'test-hero'; - const { getCheckbox, getIcon } = await setup(page, exampleName); - await expect(getIcon()).toBeVisible(); - await getCheckbox().focus(); - await getCheckbox().press(' '); - await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); - await expect(getIcon()).toBeHidden(); - }); - test(`GIVEN a default checkbox with a default sig value of false - WHEN the checkbox is focused and the spacebar is pressed - IT should have its icon visible`, async ({ page }) => { - const exampleName = 'test-default'; - const { getCheckbox, getIcon } = await setup(page, exampleName); - await expect(getIcon()).toBeHidden(); - await getCheckbox().focus(); - await getCheckbox().press(' '); - await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); - await expect(getIcon()).toBeVisible(); - }); - - test(`GIVEN a checkbox with a user sig value of true - WHEN the checkbox is clicked - IT should have aria-checked as false`, async ({ page }) => { - const exampleName = 'test-hero'; - const { getCheckbox } = await setup(page, exampleName); - await expect(getCheckbox()).toBeVisible(); - await getCheckbox().click(); - await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); - }); - - test(`GIVEN a checkbox with a user sig value of true - WHEN the checkbox is clicked - IT should have its icon hidden`, async ({ page }) => { - const exampleName = 'test-hero'; - const { getCheckbox, getIcon } = await setup(page, exampleName); - await expect(getIcon()).toBeVisible(); - await getCheckbox().click(); - await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); - await expect(getIcon()).toBeHidden(); - }); - test(`GIVEN a default checkbox with a default sig value of false - WHEN the checkbox is clicked - IT should have its icon visible`, async ({ page }) => { - const exampleName = 'test-default'; - const { getCheckbox, getIcon } = await setup(page, exampleName); - await expect(getIcon()).toBeHidden(); - await getCheckbox().click(); - await expect(getCheckbox()).toHaveAttribute('aria-checked', 'false'); - await expect(getIcon()).toBeVisible(); - }); -}); -//TODO: create util file -//TODO: add click -//TODO: refactor to use ids instead of nths since its test-only now -function isUniqArr(arr: string[]) { - const singleInstances = new Set(arr); - return arr.length === singleInstances.size; -} diff --git a/packages/kit-headless/src/components/checkbox/checkbox.tsx b/packages/kit-headless/src/components/checkbox/checkbox.tsx deleted file mode 100644 index 63b9966a1..000000000 --- a/packages/kit-headless/src/components/checkbox/checkbox.tsx +++ /dev/null @@ -1,225 +0,0 @@ -import { - PropsOf, - Signal, - Slot, - component$, - sync$, - useContextProvider, - useContext, - $, - useSignal, - useTask$, -} from '@builder.io/qwik'; -import { CheckListContext, CheckboxContext } from './context-id'; -import { TriBool, getTriBool } from '../checklist/checklist-context-wrapper'; -export type MixedStateCheckboxProps = { - 'bind:checked'?: Signal; - checklist?: boolean; - _useCheckListContext?: boolean; - _overWriteCheckbox?: boolean; -} & PropsOf<'div'>; -export type TwoStateCheckboxProps = { - 'bind:checked'?: Signal; - _useCheckListContext?: boolean; - _overWriteCheckbox?: boolean; -} & PropsOf<'div'>; - -type TwoStateCheckboxBehaviorProps = { - 'bind:checked': Signal; -} & PropsOf<'div'>; -export type ChecklistTwoStateCheckboxProps = { - 'bind:checked'?: Signal; - _useCheckListContext?: boolean; - _overWriteCheckbox?: boolean; -} & PropsOf<'div'>; -export const CheckboxRoot = component$((props) => { - // this is done to avoid consumers dealing with two types checkboxes, could go in different files - if (props.checklist) { - return ( - - - - ); - } - if (props._useCheckListContext) { - return ( - - - - ); - } - return ( - - - - ); -}); - -function getAriaChecked(triBool: TriBool): 'mixed' | 'true' | 'false' { - if (triBool === 'indeterminate') { - return 'mixed'; - } - return `${triBool === true}`; -} - -export const TwoStateCheckbox = component$((props) => { - // all the sig stuff should be refactored into a fancy hook - const defaultSig = useSignal(false); - const appliedSig = props['bind:checked'] ?? defaultSig; - const checklistID = useSignal(props.id); - useContextProvider(CheckboxContext, appliedSig); - return ( - - - - ); -}); - -export const ChecklistTwoStateCheckbox = component$( - (props) => { - // this code is duplicate bcs you cant use conditionals on hooks (checklistContext could be undefined) - // this has room for improvement: remove most of the code duplivation - // making this a wrapper over the simpler component or using hooks - const checklistContext = useContext(CheckListContext); - const defaultSig = useSignal(false); - const appliedSig = props['bind:checked'] ?? defaultSig; - const checklistID = useSignal(props.id); - // makes sure that the checklist's value is the same as its child - const syncToChecklist = useSignal(props._overWriteCheckbox); - useContextProvider(CheckboxContext, appliedSig); - useTask$(({ track }) => { - if (syncToChecklist.value !== undefined) { - appliedSig.value = syncToChecklist.value; - syncToChecklist.value = undefined; - } - track(() => { - appliedSig.value; - }); - - // now i can say that there's one good application for object identity - if (!checklistContext.checkboxes.value.some((e) => e === appliedSig)) { - const currIndex = checklistContext.checkboxes.value.length; - - // TODO: refactor id to not run on wrapper but after conditional - if (checklistID.value === undefined) { - checklistID.value = checklistContext.idArr[currIndex]; - } else { - checklistContext.idArr[currIndex] = checklistID.value; - } - checklistContext.checkboxes.value = [ - ...checklistContext.checkboxes.value, - appliedSig, - ]; - } - - const boolArr = checklistContext?.checkboxes.value.map((e) => e.value); - const newVal = getTriBool(boolArr); - checklistContext.checklistSig.value = newVal; - }); - return ( - - - - ); - }, -); - -export const MixedStateCheckbox = component$((props) => { - console.log('mixed'); - - // all the sig stuff should be refactored into a fancy hook - const checklistContext = useContext(CheckListContext); - const childCheckboxes = checklistContext.checkboxes; - const appliedSig = props['bind:checked'] ?? checklistContext.checklistSig; - const ariaControlsStrg = - checklistContext.idArr.length === 0 - ? '' - : checklistContext.idArr.reduce((p, c) => p + ' ' + c); - useContextProvider(CheckboxContext, appliedSig); - - // im not enterily sure why, but the if statement only runs once - if (props['bind:checked'] !== undefined) { - checklistContext.checklistSig = props['bind:checked']; - } - - const changeChecklistSig = $(() => { - if (appliedSig.value !== true) { - appliedSig.value = true; - childCheckboxes.value.forEach((sig) => (sig.value = true)); - return; - } - appliedSig.value = false; - childCheckboxes.value.forEach((sig) => (sig.value = false)); - }); - const handleKeyDownSync$ = sync$((e: KeyboardEvent) => { - if (e.key === ' ') { - e.preventDefault(); - } - }); - const handleKeyDown$ = $((e: KeyboardEvent) => { - if (e.key === ' ') { - changeChecklistSig(); - } - }); - const handleClick$ = $(() => { - changeChecklistSig(); - }); - - return ( -
      - -
      - ); -}); - -const TwoStateCheckboxBehavior = component$((props) => { - const handleKeyDownSync$ = sync$((e: KeyboardEvent) => { - if (e.key === ' ') { - e.preventDefault(); - } - }); - // this logic is duplicared thrice, make into hook pls - const handleClick = $(() => { - props['bind:checked'].value = !props['bind:checked'].value; - }); - const handleKeyDown$ = $((e: KeyboardEvent) => { - if (e.key === ' ') { - props['bind:checked'].value = !props['bind:checked'].value; - } - }); - // TODO: refactor to usetask code into fancy hook thingy - return ( -
      - -
      - ); -}); diff --git a/packages/kit-headless/src/components/checkbox/context-id.ts b/packages/kit-headless/src/components/checkbox/context-id.ts deleted file mode 100644 index fc0cfcabf..000000000 --- a/packages/kit-headless/src/components/checkbox/context-id.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Signal, createContextId } from '@builder.io/qwik'; -import { TriBool } from '../checklist'; - -export type ArrSigs = Signal[]; -type CheckContextObj = { - checklistSig: Signal; - checkboxes: Signal; - idArr: string[]; -}; -export const CheckboxContext = createContextId>('CheckBox.context'); -export const CheckListContext = createContextId('CheckList.context'); diff --git a/packages/kit-headless/src/components/checkbox/index.ts b/packages/kit-headless/src/components/checkbox/index.ts index 12d259867..b16beff20 100644 --- a/packages/kit-headless/src/components/checkbox/index.ts +++ b/packages/kit-headless/src/components/checkbox/index.ts @@ -1,3 +1,2 @@ -export { CheckboxRoot as Root } from './checkbox'; +export { CheckboxRoot as Root } from './checkbox-root'; export { CheckboxIndicator as Indicator } from './checkbox-indicator'; -export * from './context-id'; diff --git a/packages/kit-headless/src/components/checkbox/note.md b/packages/kit-headless/src/components/checkbox/note.md new file mode 100644 index 000000000..1f457d4b4 --- /dev/null +++ b/packages/kit-headless/src/components/checkbox/note.md @@ -0,0 +1 @@ +# There isn't a route for the checklist. There should be one. That can be changed in menu.md as well as a new folder and examples. diff --git a/packages/kit-headless/src/components/checklist/checklist-context-wrapper.tsx b/packages/kit-headless/src/components/checklist/checklist-context-wrapper.tsx deleted file mode 100644 index 4e6c25611..000000000 --- a/packages/kit-headless/src/components/checklist/checklist-context-wrapper.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { - PropsOf, - Slot, - useId, - component$, - useContextProvider, - useSignal, - useTask$, -} from '@builder.io/qwik'; -import { CheckListContext } from './context-id'; - -export type CheckListContextWrapperProps = { - ariaLabeledBy: string; - arrSize: number; - idArr: Array; - initialTriBool: TriBool; -} & PropsOf<'div'>; - -export type TriBool = boolean | 'indeterminate'; -export const ChecklistContextWrapper = component$( - (props) => { - const helpme = useSignal([]); - const idArr: string[] = []; - // this sig vals should be a prop - const mehelp = useSignal(props.initialTriBool); - const id = useId(); - for (let index = 0; index < props.arrSize; index++) { - if (props.idArr[index] != false) { - idArr.push(props.idArr[index] as string); - continue; - } - - const uniqId = id + index.toString(); - idArr.push(uniqId); - } - const obj = { checkboxes: helpme, checklistSig: mehelp, idArr }; - useContextProvider(CheckListContext, obj); - useTask$(({ track }) => { - track(() => { - return obj.checkboxes; - }); - }); - return ( -
      - -
      - ); - }, -); - -export function getTriBool(boolArr: boolean[]): TriBool { - if (boolArr.length === 0) { - return 'indeterminate'; - } - if (boolArr.every((e) => e === true)) { - return true; - } - - if (boolArr.every((e) => e === false)) { - return false; - } - - return 'indeterminate'; -} diff --git a/packages/kit-headless/src/components/checklist/checklist-context.tsx b/packages/kit-headless/src/components/checklist/checklist-context.tsx new file mode 100644 index 000000000..0f85930e4 --- /dev/null +++ b/packages/kit-headless/src/components/checklist/checklist-context.tsx @@ -0,0 +1,12 @@ +import { createContextId, type Signal } from '@builder.io/qwik'; + +export interface ChecklistState { + items: Signal; + // toggleItem: (index: number) => void; + allSelected: Signal; + toggleAllSelected: () => void; + indeterminate: Signal; + initialStates: boolean[]; +} + +export const ChecklistContext = createContextId('ChecklistContext'); diff --git a/packages/kit-headless/src/components/checklist/checklist-indicator.tsx b/packages/kit-headless/src/components/checklist/checklist-indicator.tsx index 2ae376f3b..afe406d8e 100644 --- a/packages/kit-headless/src/components/checklist/checklist-indicator.tsx +++ b/packages/kit-headless/src/components/checklist/checklist-indicator.tsx @@ -1,29 +1,12 @@ -import { component$, useContext, PropsOf, Slot, useTask$ } from '@builder.io/qwik'; -import { CheckListContext } from './context-id'; +import { component$, type PropsOf, Slot } from '@builder.io/qwik'; +import { CheckboxIndicator } from '../checkbox/checkbox-indicator'; -export type ChecklistIndicatorProps = PropsOf<'div'>; +type ChecklistItemIndicatorProps = PropsOf<'div'>; -export const ChecklistIndicator = component$((props) => { - const { checklistSig } = useContext(CheckListContext); - - useTask$(({ track }) => { - track(() => checklistSig.value); - }); - - // weird comparions, but it gets the right behavior +export const ChecklistItemIndicator = component$((props: ChecklistItemIndicatorProps) => { return ( -
      -

      Here lol: {JSON.stringify(checklistSig.value)}

      - {checklistSig.value === true && ( -
      - -
      - )} - {checklistSig.value === 'indeterminate' && ( -
      - -
      - )} -
      + + + ); }); diff --git a/packages/kit-headless/src/components/checklist/checklist-item.tsx b/packages/kit-headless/src/components/checklist/checklist-item.tsx new file mode 100644 index 000000000..2a1052b96 --- /dev/null +++ b/packages/kit-headless/src/components/checklist/checklist-item.tsx @@ -0,0 +1,69 @@ +import { + component$, + type PropsOf, + Slot, + useContext, + useSignal, + useTask$, +} from '@builder.io/qwik'; +import { CheckboxRoot } from '../checkbox/checkbox-root'; +import { ChecklistContext } from './checklist-context'; + +interface ChecklistItemProps extends PropsOf<'div'> { + _index?: number; +} + +export const ChecklistItem = component$((props: ChecklistItemProps) => { + const { _index } = props; + + if (_index === undefined) { + throw new Error('Checklist Item must have an index.'); + } + + const context = useContext(ChecklistContext); + const isCheckedSig = useSignal(context.items.value[_index]); + const initialLoadSig = useSignal(true); + + useTask$(({ track }) => { + track(() => context.allSelected.value); + + if (initialLoadSig.value) { + return; + } + + if (context.allSelected.value) { + isCheckedSig.value = true; + } else { + isCheckedSig.value = false; + } + }); + + useTask$(function syncCheckboxState({ track }) { + track(() => isCheckedSig.value); + + // itemsSig + context.items.value[_index] = isCheckedSig.value; + + // root of both checkboxes updating. context.allselected is updated causing the other useTask$ to run again + // if (isCheckedSig.value === false) { + // context.allSelected.value = false; + // } + + const isAllSelected = context.items.value.every((item) => item === true); + // const isAnyChecked = context.items.value.some(Boolean); + + if (isAllSelected) { + context.allSelected.value = true; + } + }); + + useTask$(() => { + initialLoadSig.value = false; + }); + + return ( + + + + ); +}); diff --git a/packages/kit-headless/src/components/checklist/checklist-root.tsx b/packages/kit-headless/src/components/checklist/checklist-root.tsx new file mode 100644 index 000000000..0af93ae7e --- /dev/null +++ b/packages/kit-headless/src/components/checklist/checklist-root.tsx @@ -0,0 +1,65 @@ +import { + type JSXNode, + type JSXChildren, + type PropsOf, + component$, + useSignal, + Slot, + useContextProvider, + $, +} from '@builder.io/qwik'; +import { findComponent, processChildren } from '../../utils/inline-component'; +import { ChecklistContext, type ChecklistState } from './checklist-context'; +import { ChecklistItem } from './checklist-item'; + +export const ChecklistRoot = + //removing component to make inline causes Internal Server + (props: { initialStates: boolean[]; children: JSXChildren | JSXNode }) => { + const children = props.children; + let currItemIndex = 0; + const itemsMap = new Map(); + + findComponent(ChecklistItem, (itemProps) => { + itemProps._index = currItemIndex; + itemsMap.set(currItemIndex, itemProps.disabled); + currItemIndex++; + }); + + processChildren(props.children); + + return ( +
        + {children} +
      + ); + }; + +type ChecklistRootProps = PropsOf<'div'> & { + initialStates: boolean[]; +}; + +export const ChecklistBase = component$( + ({ initialStates, ...props }: ChecklistRootProps) => { + const items = useSignal(initialStates ?? []); + const allSelected = useSignal(false); + const toggleAllSelected = $(() => { + allSelected.value = !allSelected.value; + }); + const indeterminate = useSignal(false); + + const context: ChecklistState = { + items, + allSelected, + toggleAllSelected, + indeterminate, + initialStates, + }; + + useContextProvider(ChecklistContext, context); + return ( +
      + +
      + ); + }, +); diff --git a/packages/kit-headless/src/components/checklist/checklist-selectall.tsx b/packages/kit-headless/src/components/checklist/checklist-selectall.tsx new file mode 100644 index 000000000..94ca02d97 --- /dev/null +++ b/packages/kit-headless/src/components/checklist/checklist-selectall.tsx @@ -0,0 +1,47 @@ +import { + component$, + useContext, + $, + type PropsOf, + Slot, + useSignal, + useTask$, +} from '@builder.io/qwik'; +import { ChecklistContext } from './checklist-context'; +import { CheckboxRoot } from '../checkbox/checkbox-root'; + +export const ChecklistSelectAll = component$((props: PropsOf<'div'>) => { + const context = useContext(ChecklistContext); + const isInitiallySelected = context.initialStates.every(Boolean); + const allSelected = useSignal(isInitiallySelected); + const items = useSignal(context.items.value); + const toggleAll = $(() => { + const newState = !allSelected.value; + allSelected.value = newState; + items.value = items.value.map(() => newState); + context.toggleAllSelected(); + }); + + useTask$(({ track }) => { + track(() => context.items.value); + }); + + /** + * When in mixed state, it should show the mixed state indicator + * + * When in all selected state, it should show the checked indicator + */ + return ( + + + + ); +}); diff --git a/packages/kit-headless/src/components/checklist/checklist.tsx b/packages/kit-headless/src/components/checklist/checklist.tsx deleted file mode 100644 index a5d8d51ce..000000000 --- a/packages/kit-headless/src/components/checklist/checklist.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { type JSXNode, Component, PropsOf } from '@builder.io/qwik'; -import { CheckboxRoot, type MixedStateCheckboxProps } from '../checkbox/checkbox'; -import { ChecklistContextWrapper, getTriBool } from './checklist-context-wrapper'; - -type CheckListProps = PropsOf<'ul'> & { ariaLabeledBy: string }; -// type CheckBoxes= -/* - This is an inline component. An example use case of an inline component to get the proper indexes with CSR. See issue #4757 - for more information. -*/ -export const Checklist: Component = (props: CheckListProps) => { - const checkArr: JSXNode[] = []; - const hellSigs = []; - let checklistCheckbox = undefined; - const boolArr: boolean[] = []; - const idArr: Array = []; - const checklistChilds: JSXNode[] = []; - const { children: myChildren } = props; - - const childrenToProcess = ( - Array.isArray(myChildren) ? [...myChildren] : [myChildren] - ) as Array; - - while (childrenToProcess.length) { - const child = childrenToProcess.shift(); - - if (!child) { - continue; - } - - if (Array.isArray(child)) { - childrenToProcess.unshift(...child); - continue; - } - - switch (child.type) { - case CheckboxRoot: { - const typedProps = child.props as MixedStateCheckboxProps; - // FYI: Obj.assign mutates - Object.assign(typedProps, { _useCheckListContext: true }); - - checkArr.push(child); - // TODO: fix this if hell by making fn - if (!typedProps.checklist) { - checklistChilds.push(child); - - if (typedProps.id != undefined) { - idArr.push(typedProps.id as string); - } else { - idArr.push(false); - } - if (typedProps['bind:checked'] && typedProps['bind:checked'].value) { - boolArr.push(typedProps['bind:checked'].value); - hellSigs.push(typedProps['bind:checked']); - } else { - boolArr.push(false); - } - } else { - checklistCheckbox = child; - } - - break; - } - - default: { - if (child) { - const anyChildren = Array.isArray(child.children) - ? [...child.children] - : [child.children]; - childrenToProcess.unshift(...(anyChildren as JSXNode[])); - } - - break; - } - } - } - if (checklistCheckbox === undefined) { - throw Error( - "QWIKUI: checklist doesn't have a checkbox. Did you give the atribute to *checklist* to any of the checkboxes inside the checklist?", - ); - } - if (checklistCheckbox.props['bind:checked']) { - checklistChilds.forEach((checkbox) => { - Object.assign(checkbox.props, { _overWriteCheckbox: true }); - }); - } - - return ( - <> - -
        - {checkArr.map((checkbox, i) => ( -
      • {checkbox}
        • - ))} -
      -       - - ); -}; -// TODO: deprecate ariaLabelledBy diff --git a/packages/kit-headless/src/components/checklist/context-id.ts b/packages/kit-headless/src/components/checklist/context-id.ts deleted file mode 100644 index 13bdbd3ba..000000000 --- a/packages/kit-headless/src/components/checklist/context-id.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Signal, createContextId } from '@builder.io/qwik'; -import { TriBool } from './checklist-context-wrapper'; - -export type ArrSigs = Signal[]; -type CheckContextObj = { - checklistSig: Signal; - checkboxes: Signal; - idArr: string[]; -}; -export const CheckListContext = createContextId('CheckList.context'); diff --git a/packages/kit-headless/src/components/checklist/index.ts b/packages/kit-headless/src/components/checklist/index.ts index 9db387ec8..110a6b63a 100644 --- a/packages/kit-headless/src/components/checklist/index.ts +++ b/packages/kit-headless/src/components/checklist/index.ts @@ -1,4 +1,5 @@ -export { Checklist as Root } from './checklist'; -export { ChecklistIndicator as Indicator } from './checklist-indicator'; -export * from './checklist-context-wrapper'; -export * from './context-id'; +export { ChecklistRoot as Root } from './checklist-root'; +export { ChecklistSelectAll as SelectAll } from './checklist-selectall'; +export { ChecklistItem as Item } from './checklist-item'; +export { ChecklistItemIndicator as ItemIndicator } from './checklist-indicator'; +export { ChecklistItemIndicator as Indicator } from './checklist-indicator'; diff --git a/packages/kit-headless/src/components/combobox/combobox.test.ts b/packages/kit-headless/src/components/combobox/combobox.test.ts index f76d8a8fc..80cee0898 100644 --- a/packages/kit-headless/src/components/combobox/combobox.test.ts +++ b/packages/kit-headless/src/components/combobox/combobox.test.ts @@ -61,7 +61,7 @@ test.describe('Mouse Behavior', () => { await expect(d.getItemAt(1)).toHaveAttribute('aria-selected', 'true'); }); - test(`GIVEN a combobox with an open listbox + test(`GIVEN a combobox with an open listbox WHEN the 3rd option is clicked THEN the 3rd option should be the selected value`, async ({ page }) => { const { driver: d } = await setup(page, 'hero'); @@ -587,6 +587,52 @@ test.describe('Props', () => { await expect(d.getListbox()).toBeVisible(); }); + + test(`GIVEN a reactive combobox + WHEN the user empties the input with selecting all text and backspace + THEN there should be no selected value`, async ({ page }) => { + const { driver: d } = await setup(page, 'reactive'); + + const apricot = (await d.getItemAt(1).textContent()) ?? ''; + + await expect(d.getInput()).toHaveValue(apricot); + + await d.getInput().clear(); + + await expect(d.getInput()).toHaveValue(''); + + await expect( + page.getByRole('paragraph', { name: 'Your favorite fruit is:' }), + ).toBeVisible(); + }); + + test(`GIVEN a reactive combobox + WHEN the user empties the input and selects a new value + THEN that should update the given signal`, async ({ page }) => { + const { driver: d } = await setup(page, 'reactive'); + + const apricot = (await d.getItemAt(1).textContent()) ?? ''; + + await expect(d.getInput()).toHaveValue(apricot); + + await d.getInput().clear(); + + await expect(d.getInput()).toHaveValue(''); + + await expect( + page.getByRole('paragraph', { name: 'Your favorite fruit is:' }), + ).toBeVisible(); + + await d.openListbox('click'); + + await d.getItemAt(1).click(); + + await expect(d.getInput()).toHaveValue('Apricot'); + + await expect( + page.getByRole('paragraph', { name: 'Your favorite fruit is: Apricot' }), + ).toBeVisible(); + }); }); test.describe('option value', () => { diff --git a/packages/kit-headless/src/components/dropdown/dropdown-checkbox-item.tsx b/packages/kit-headless/src/components/dropdown/dropdown-checkbox-item.tsx index c86f4b1e5..a39da6f95 100644 --- a/packages/kit-headless/src/components/dropdown/dropdown-checkbox-item.tsx +++ b/packages/kit-headless/src/components/dropdown/dropdown-checkbox-item.tsx @@ -9,7 +9,7 @@ import { useTask$, } from '@builder.io/qwik'; -import { CheckboxRoot } from '../checkbox/checkbox'; +import { CheckboxRoot } from '../checkbox/checkbox-root'; import { DropdownItemProps } from './dropdown-item'; import { useDropdownItem } from './use-dropdown-item'; diff --git a/packages/kit-headless/src/components/dropdown/dropdown-radio-item.tsx b/packages/kit-headless/src/components/dropdown/dropdown-radio-item.tsx index 7bcecb690..d7491bfa4 100644 --- a/packages/kit-headless/src/components/dropdown/dropdown-radio-item.tsx +++ b/packages/kit-headless/src/components/dropdown/dropdown-radio-item.tsx @@ -8,7 +8,7 @@ import { useTask$, } from '@builder.io/qwik'; -import { CheckboxRoot } from '../checkbox/checkbox'; +import { CheckboxRoot } from '../checkbox/checkbox-root'; import { DropdownCheckboxItemProps } from './dropdown-checkbox-item'; import { dropdownRadioGroupContextId } from './dropdown-context'; import { useDropdownItem } from './use-dropdown-item'; From 6655bad1d686f5630f4eca01a928018997883431 Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Sun, 22 Sep 2024 17:18:29 -0500 Subject: [PATCH 16/27] fix: bound signal updates on the combobox (#968) * initial tests * get values with arrays instead * reactively update * make selection manager cleaner * remove unnecessary addition * fix: onChange$ only executes on client & simpler disabled state * feat: simpler invalid check * remove early return * feat: simplify inline component * simpler initial value naming * refactor: better context names * fix: combobox closes on enter key * fix: combobox properly resets when empty * get correct initial value reactively * fix: highlight jumping * multiple shows correct display * fix: undefined does not become part of the input * fix: handle proper empty input * feat: use local index instead * fix: last filtered item now gets highlighted on down key * fix: preserve item disabled state * fix: combobox empty now properly shows for both filter and non-filtered comboboxes * fix: removing items on backspace * respect input's given signal first * refactor: remove all the logs * fix: combobox scrolling * fix: form submissions * fix: pw tests * refactor: remove test since behavior is no longer warranted * fix: mouse should not affect initial keyboard highlight * feat: changeset --- .changeset/funny-pens-vanish.md | 31 +++ .../components/combobox/combobox-context.tsx | 9 +- .../components/combobox/combobox-empty.tsx | 2 +- .../combobox/combobox-hidden-option.tsx | 8 +- .../components/combobox/combobox-inline.tsx | 165 +++++++--------- .../components/combobox/combobox-input.tsx | 83 ++++---- .../src/components/combobox/combobox-item.tsx | 84 ++++---- .../components/combobox/combobox-popover.tsx | 19 +- .../src/components/combobox/combobox-root.tsx | 156 ++++++--------- .../src/components/combobox/combobox.test.ts | 75 +++---- .../src/components/combobox/use-combobox.tsx | 185 +++++++++++------- 11 files changed, 412 insertions(+), 405 deletions(-) create mode 100644 .changeset/funny-pens-vanish.md diff --git a/.changeset/funny-pens-vanish.md b/.changeset/funny-pens-vanish.md new file mode 100644 index 000000000..bd99ffd15 --- /dev/null +++ b/.changeset/funny-pens-vanish.md @@ -0,0 +1,31 @@ +--- +'@qwik-ui/headless': patch +--- + +# Combobox Improvements + +## 🔄 Reactive Improvements + +- Better handling of array-based values +- Improved handling of initial and reactive values + +## 🐛 Key Bug Fixes + +- Fixed highlight jumping issues +- Enhanced empty input handling +- Better filtered item highlighting + +## 🖱️ Interaction Enhancements + +- Smoother scrolling experience +- Improved keyboard and mouse coordination + +## 🚀 Performance Optimizations + +- More efficient item filtering + +## 🧪 Reliability + +- Added tests for reactivity handling, item unselection, and mouse-to-pointer interaction switching + +- Improved handling of edge cases in user interactions diff --git a/packages/kit-headless/src/components/combobox/combobox-context.tsx b/packages/kit-headless/src/components/combobox/combobox-context.tsx index aff81076c..a22bce646 100644 --- a/packages/kit-headless/src/components/combobox/combobox-context.tsx +++ b/packages/kit-headless/src/components/combobox/combobox-context.tsx @@ -18,14 +18,17 @@ export type ComboboxContext = { labelRef: Signal; controlRef: Signal; selectedValueSetSig: Signal>; + selectedValuesSig: Signal; + filteredIndexSetSig: Signal>; highlightedIndexSig: Signal; - currDisplayValueSig: Signal; + displayValuesSig: Signal; isMouseOverPopupSig: Signal; + isKeyboardFocusSig: Signal; disabledIndexSetSig: Signal>; removeOnBackspace: boolean; - hasVisibleItemsSig: Signal; + isNoItemsSig: Signal; initialLoadSig: Signal; - _value: string | undefined; + initialValue: string | undefined; loop: boolean; multiple: boolean | undefined; diff --git a/packages/kit-headless/src/components/combobox/combobox-empty.tsx b/packages/kit-headless/src/components/combobox/combobox-empty.tsx index d2eac1d7b..6c9833d12 100644 --- a/packages/kit-headless/src/components/combobox/combobox-empty.tsx +++ b/packages/kit-headless/src/components/combobox/combobox-empty.tsx @@ -7,7 +7,7 @@ export const HComboboxEmpty = component$((props: PropsOf<'div'>) => { return (
      diff --git a/packages/kit-headless/src/components/combobox/combobox-hidden-option.tsx b/packages/kit-headless/src/components/combobox/combobox-hidden-option.tsx index 1ee0bc7a9..017cc2e5f 100644 --- a/packages/kit-headless/src/components/combobox/combobox-hidden-option.tsx +++ b/packages/kit-headless/src/components/combobox/combobox-hidden-option.tsx @@ -22,7 +22,7 @@ export const ComboboxHiddenSelectOption = component$( const context = useContext(comboboxContextId); useTask$(async function modularFormsValidation({ track }) { - track(() => context.selectedValueSetSig.value); + track(() => context.selectedValuesSig.value); if (isServer || !nativeSelectRef.value || !optionRef.value) return; @@ -37,7 +37,11 @@ export const ComboboxHiddenSelectOption = component$( 'Qwik UI: value not found when trying to select or unselect an item.', ); } - optionRef.value.selected = context.selectedValueSetSig.value.has(value); + + const selectedValues = context.selectedValuesSig.value; + optionRef.value.selected = Array.isArray(selectedValues) + ? selectedValues.includes(value) + : selectedValues === value; }); return ( diff --git a/packages/kit-headless/src/components/combobox/combobox-inline.tsx b/packages/kit-headless/src/components/combobox/combobox-inline.tsx index ac8e604d4..2ca5a5c7f 100644 --- a/packages/kit-headless/src/components/combobox/combobox-inline.tsx +++ b/packages/kit-headless/src/components/combobox/combobox-inline.tsx @@ -1,9 +1,10 @@ -import { type JSXNode, Component } from '@builder.io/qwik'; +import { Component, JSXChildren } from '@builder.io/qwik'; import { HComboboxRootImpl, HComboboxRootImplProps } from './combobox-root'; import { HComboboxItem as InternalComboboxItem } from './combobox-item'; import { HComboboxItemLabel as InternalComboboxItemLabel } from './combobox-item-label'; import { HComboboxEmpty as InternalComboboxEmpty } from './combobox-empty'; import { HComboboxErrorMessage } from './combobox-error-message'; +import { findComponent, processChildren } from '../../utils/inline-component'; export type TItemsMap = Map< number, @@ -13,8 +14,8 @@ export type TItemsMap = Map< export type InternalComboboxProps = { /** When a value is passed, we check if it's an actual item value, and get its index at pre-render time. **/ - _valuePropIndex?: number | null; - _value?: string; + initialIndex?: number | null; + initialValue?: string; /** Checks if the consumer added the label in their JSX */ _label?: boolean; @@ -35,7 +36,7 @@ export const HComboboxRoot: Component { const { - children: myChildren, + children, comboboxItemComponent: UserItem, comboboxItemLabelComponent: UserItemLabel, ...rest @@ -47,121 +48,87 @@ export const HComboboxRoot: Component; + findComponent(HComboboxItem, (itemProps) => { + itemProps._index = currItemIndex; + + isItemDisabled = itemProps.disabled === true; + + if (itemProps.value) { + givenItemValue = itemProps.value as string; + } + + // the default case isn't handled here, so we need to process the children to get to the label component + if (itemProps.children) { + return processChildren(itemProps.children as JSXChildren); + } + }); + + findComponent(HComboboxItemLabel, (labelProps) => { + const displayValue = labelProps.children as string; - while (childrenToProcess.length) { - const child = childrenToProcess.shift(); + // distinct value, or the display value is the same as the value + const value = (givenItemValue !== null ? givenItemValue : displayValue) as string; - if (!child) { - continue; + itemsMap.set(currItemIndex, { value, displayValue, disabled: isItemDisabled }); + + if (props.value && props.multiple) { + throw new Error( + `Qwik UI: When in multiple selection mode, the value prop is disabled. Use the bind:value prop's initial signal value instead.`, + ); } - if (Array.isArray(child)) { - childrenToProcess.unshift(...child); - continue; + // if the current option value is equal to the initial value + if (value === props.value) { + // minus one because it is incremented already in SelectOption + initialIndex = currItemIndex; + initialValue = value; } - switch (child.type) { - case HComboboxItem: { - // get the index of the current option - child.props._index = currItemIndex; - - isItemDisabled = child.props.disabled === true; - - if (child.props.value) { - givenItemValue = child.props.value; - } - - // the default case isn't handled here, so we need to process the children to get to the label component - if (child.props.children) { - const childChildren = Array.isArray(child.props.children) - ? [...child.props.children] - : [child.props.children]; - childrenToProcess.unshift(...childChildren); - } - - break; - } - - case HComboboxItemLabel: { - const displayValue = child.props.children as string; - - // distinct value, or the display value is the same as the value - const value = (givenItemValue !== null ? givenItemValue : displayValue) as string; - - itemsMap.set(currItemIndex, { value, displayValue, disabled: isItemDisabled }); - - if (props.value && props.multiple) { - throw new Error( - `Qwik UI: When in multiple selection mode, the value prop is disabled. Use the bind:value prop's initial signal value instead.`, - ); - } - - // if the current option value is equal to the initial value - if (value === props.value) { - // minus one because it is incremented already in SelectOption - valuePropIndex = currItemIndex; - _value = value; - } - - const isString = typeof child.props.children === 'string'; - - if (!isString) { - throw new Error( - `Qwik UI: select item label passed was not a string. It was a ${typeof child - .props.children}.`, - ); - } - - // increment after processing children - currItemIndex++; - - break; - } - - case HComboboxEmpty: { - hasEmptyComp = true; - break; - } - - case HComboboxErrorMessage: { - hasErrorComp = true; - break; - } - - default: { - if (child) { - const anyChildren = Array.isArray(child.children) - ? [...child.children] - : [child.children]; - childrenToProcess.unshift(...(anyChildren as JSXNode[])); - } - - break; - } + const isString = typeof labelProps.children === 'string'; + + if (!isString) { + throw new Error( + `Qwik UI: select item label passed was not a string. It was a ${typeof labelProps.children}.`, + ); } - } + + // increment after processing children + currItemIndex++; + }); + + findComponent(HComboboxEmpty, () => { + hasEmptyComp = true; + }); + + findComponent(HComboboxErrorMessage, () => { + hasErrorComp = true; + }); + + processChildren(children); return ( - {props.children} + {children} ); }; diff --git a/packages/kit-headless/src/components/combobox/combobox-input.tsx b/packages/kit-headless/src/components/combobox/combobox-input.tsx index e4bb482f7..c0c5bd7e5 100644 --- a/packages/kit-headless/src/components/combobox/combobox-input.tsx +++ b/packages/kit-headless/src/components/combobox/combobox-input.tsx @@ -15,7 +15,7 @@ import { useCombinedRef } from '../../hooks/combined-refs'; type HComboboxInputProps = PropsOf<'input'>; export const HComboboxInput = component$( - ({ 'bind:value': inputValueSig, ...props }: HComboboxInputProps) => { + ({ 'bind:value': givenInputValueSig, ...props }: HComboboxInputProps) => { const context = useContext(comboboxContextId); const contextRefOpts = { context, givenContextRef: context.inputRef }; const inputRef = useCombinedRef(props.ref, contextRefOpts); @@ -25,7 +25,7 @@ export const HComboboxInput = component$( const labelId = `${context.localId}-label`; const descriptionId = `${context.localId}-description`; const errorMessageId = `${context.localId}-error-message`; - const initialValueSig = useSignal(); + const initialValueSig = useSignal(); const wasEmptyBeforeBackspaceSig = useSignal(false); const isInputResetSig = useSignal(false); @@ -54,6 +54,8 @@ export const HComboboxInput = component$( const handleKeyDown$ = $(async (e: KeyboardEvent) => { if (!context.itemsMapSig.value) return; + context.isKeyboardFocusSig.value = true; + if (e.key === 'Backspace') { // check if input was empty before backspace wasEmptyBeforeBackspaceSig.value = context.inputValueSig.value.length === 0; @@ -107,7 +109,7 @@ export const HComboboxInput = component$( if (!context.isListboxOpenSig.value) break; await selectionManager$(context.highlightedIndexSig.value, 'toggle'); - if (context.selectedValueSetSig.value.size <= 0) break; + if (context.selectedValuesSig.value.length <= 0) break; if (!context.multiple) { context.isListboxOpenSig.value = false; @@ -142,9 +144,15 @@ export const HComboboxInput = component$( context.highlightedIndexSig.value = null; isInputResetSig.value = false; + if (target.value === '' && !context.multiple) { + context.selectedValuesSig.value = ''; + } else { + context.isListboxOpenSig.value = true; + } + // bind:value on the input - if (inputValueSig) { - inputValueSig.value = el.value; + if (givenInputValueSig) { + givenInputValueSig.value = el.value; context.inputValueSig.value = el.value; } }); @@ -153,64 +161,51 @@ export const HComboboxInput = component$( if (e.key === 'Backspace') { // removeOnBackspace if (!context.multiple) return; - if (context.selectedValueSetSig.value.size === 0) return; + if (context.selectedValuesSig.value.length === 0) return; if (!context.removeOnBackspace) return; if ( (wasEmptyBeforeBackspaceSig.value || isInputResetSig.value) && context.inputValueSig.value.length === 0 ) { - const selectedValuesArray = [...context.selectedValueSetSig.value]; - selectedValuesArray.pop(); // Remove the last element - context.selectedValueSetSig.value = new Set(selectedValuesArray); + const selectedValuesArray = [...context.selectedValuesSig.value]; + selectedValuesArray.pop(); + + context.selectedValuesSig.value = selectedValuesArray; } } }); /** Users may pass an initial value to bind:value on the input, use the value, or bind:value props on the root. */ - useTask$(function initialState() { - const selectedValue = - context.selectedValueSetSig.value.size > 0 - ? context.selectedValueSetSig.value.values().next().value - : ''; - - let initialValue = ''; - let matchingItemValue = null; - let matchingItemIndex = -1; - - context.itemsMapSig.value.forEach((item, index) => { - if (item.value === selectedValue) { - initialValue = item.displayValue; - } - if (inputValueSig?.value && item.displayValue === inputValueSig.value) { - matchingItemValue = item.value; - matchingItemIndex = index; + useTask$(function getInitialValues() { + const { selectedValuesSig, multiple, itemsMapSig, highlightedIndexSig } = context; + const selectedValues = selectedValuesSig.value; + const initialValue: string[] = []; + + for (const [index, item] of itemsMapSig.value.entries()) { + const isSelected = multiple + ? Array.isArray(selectedValues) && selectedValues.includes(item.value) + : item.value === selectedValues; + + if (isSelected) { + initialValue.push(item.displayValue); + highlightedIndexSig.value = index; + // end the loop when we've found our selected value in single mode + if (!multiple) break; } - }); - - initialValueSig.value = initialValue; - - if (matchingItemValue !== null) { - context.selectedValueSetSig.value.add(matchingItemValue); - context.highlightedIndexSig.value = matchingItemIndex; } - }); - const computedInputValueSig = useComputed$(() => { - if (initialValueSig.value) { - return initialValueSig.value; - } else { - if (inputValueSig?.value) { - return inputValueSig.value; - } - return ''; - } + initialValueSig.value = multiple ? initialValue : initialValue[0] || ''; }); + const inputValueSig = useComputed$( + () => givenInputValueSig?.value ?? initialValueSig.value ?? '', + ); + return ( & { }; export const HComboboxItem = component$((props: HComboboxItemProps) => { + const context = useContext(comboboxContextId); + const debounceTimeoutSig = useSignal(); + if (props._index === undefined) { throw new Error('Qwik UI: Combobox component item cannot find its proper index.'); } - const context = useContext(comboboxContextId); + const localIndexSig = useComputed$(() => props._index ?? -1); const itemRef = useCombinedRef(props.ref); - const itemLabelId = `${context.localId}-${props._index ?? -1}-item-label`; const { selectionManager$, filterManager$ } = useCombobox(); + + const itemLabelId = `${context.localId}-${localIndexSig.value}-item-label`; + const isDisabledSig = useComputed$(() => - context.disabledIndexSetSig.value.has(props._index ?? -1), + context.disabledIndexSetSig.value.has(localIndexSig.value), ); const isSelectedSig = useComputed$(() => { - const index = props._index ?? -1; + const index = localIndexSig.value; const selectedValue = context.itemsMapSig.value.get(index)?.value; - return !isDisabledSig.value && context.selectedValueSetSig.value.has(selectedValue!); + if (!selectedValue || isDisabledSig.value) return false; + + if (Array.isArray(context.selectedValuesSig.value)) { + return context.selectedValuesSig.value.includes(selectedValue); + } else { + return context.selectedValuesSig.value === selectedValue; + } }); const isHighlightedSig = useComputed$(() => { if (isDisabledSig.value) return; - if (context.highlightedIndexSig.value === props._index ?? -1) { + if (context.highlightedIndexSig.value === localIndexSig.value) { return true; } else { return false; @@ -64,7 +76,7 @@ export const HComboboxItem = component$((props: HComboboxItemProps) => { const containerRect = context.panelRef.value?.getBoundingClientRect(); const itemRect = itemRef.value?.getBoundingClientRect(); - if (!containerRect || !itemRect || context.isMouseOverPopupSig.value) return; + if (!containerRect || !itemRect || !context.isKeyboardFocusSig.value) return; // Calculates the offset to center the item within the container const offset = @@ -78,9 +90,9 @@ export const HComboboxItem = component$((props: HComboboxItemProps) => { }); const handleClick$ = $(async () => { - if (isDisabledSig.value || (props._index ?? -1) === null) return; + if (isDisabledSig.value || localIndexSig.value === null) return; - await selectionManager$(props._index ?? -1, 'toggle'); + await selectionManager$(localIndexSig.value, 'toggle'); if (!isSelectedSig.value && !context.multiple) { context.isListboxOpenSig.value = false; @@ -88,10 +100,10 @@ export const HComboboxItem = component$((props: HComboboxItemProps) => { }); const handlePointerOver$ = $(() => { - if (isDisabledSig.value) return; + if (isDisabledSig.value || context.isKeyboardFocusSig.value) return; if (props._index !== undefined && context.isMouseOverPopupSig.value) { - context.highlightedIndexSig.value = props._index ?? -1; + context.highlightedIndexSig.value = localIndexSig.value; } }); @@ -107,50 +119,56 @@ export const HComboboxItem = component$((props: HComboboxItemProps) => { useContextProvider(comboboxItemContextId, itemContext); - useTask$(async function navigationTask({ track, cleanup }) { + useTask$(function handleScrolling({ track, cleanup }) { track(() => context.highlightedIndexSig.value); if (isServer || !context.panelRef.value) return; - if (props._index !== context.highlightedIndexSig.value) return; const hasScrollbar = context.panelRef.value.scrollHeight > context.panelRef.value.clientHeight; - if (!hasScrollbar) { - return; + if (!hasScrollbar) return; + + if (debounceTimeoutSig.value !== undefined) { + clearTimeout(debounceTimeoutSig.value); } - const observer = new IntersectionObserver(checkVisibility$, { - root: context.panelRef.value, - threshold: 1.0, - }); + debounceTimeoutSig.value = setTimeout(() => { + if (props._index !== context.highlightedIndexSig.value) return; - cleanup(() => observer?.disconnect()); + const observer = new IntersectionObserver(checkVisibility$, { + root: context.panelRef.value, + threshold: 1.0, + }); - if (itemRef.value) { - observer.observe(itemRef.value); - } + cleanup(() => observer?.disconnect()); + + if (itemRef.value) { + observer.observe(itemRef.value); + } + }, 100); + + cleanup(() => { + if (debounceTimeoutSig.value !== undefined) { + clearTimeout(debounceTimeoutSig.value); + } + }); }); - useTask$(async ({ track }) => { + useTask$(async function defaultFilter({ track }) { track(() => context.inputValueSig.value); if (isServer || !itemRef.value) return; - if (context.inputValueSig.value === '' && !context.multiple) { - context.selectedValueSetSig.value = new Set(); - } else { - context.isListboxOpenSig.value = true; - } + const displayValue = context.itemsMapSig.value.get(localIndexSig.value)?.displayValue; let isVisible; - const displayValue = context.itemsMapSig.value.get(props._index ?? -1)?.displayValue; if (!displayValue) return; if (context.filter) { const lowerCaseDisplayValue = displayValue?.toLowerCase(); const lowerCaseInputValue = context.inputValueSig.value.toLowerCase(); isVisible = lowerCaseDisplayValue?.includes(lowerCaseInputValue); - filterManager$(!!isVisible, itemRef, props._index ?? -1); + filterManager$(!!isVisible, itemRef, localIndexSig.value); } }); @@ -167,7 +185,7 @@ export const HComboboxItem = component$((props: HComboboxItemProps) => { role="option" ref={itemRef} tabIndex={-1} - id={`${context.localId}-${props._index ?? -1}`} + id={`${context.localId}-${localIndexSig.value}`} aria-selected={isSelectedSig.value} aria-disabled={isDisabledSig.value === true ? 'true' : 'false'} data-disabled={isDisabledSig.value ? '' : undefined} @@ -177,7 +195,7 @@ export const HComboboxItem = component$((props: HComboboxItemProps) => { onFocus$={[handleFocus$, props.onFocus$]} aria-labelledby={itemLabelId} data-item - onClick$={handleClick$} + onClick$={[handleClick$, props.onClick$]} {...props} > diff --git a/packages/kit-headless/src/components/combobox/combobox-popover.tsx b/packages/kit-headless/src/components/combobox/combobox-popover.tsx index b935f42f2..aafd115ca 100644 --- a/packages/kit-headless/src/components/combobox/combobox-popover.tsx +++ b/packages/kit-headless/src/components/combobox/combobox-popover.tsx @@ -14,7 +14,6 @@ import { comboboxContextId } from './combobox-context'; import { HPopoverRoot } from '../popover/popover-root'; import { isServer } from '@builder.io/qwik/build'; import { useCombinedRef } from '../../hooks/combined-refs'; -import { useDebouncer } from '../../hooks/use-debouncer'; export const HComboboxPopover = component$>((props) => { const context = useContext(comboboxContextId); @@ -85,12 +84,10 @@ export const HComboboxPopover = component$>((props) initialLoadSig.value = false; }); - const resetScrollMove = useDebouncer( - $(() => { - context.isMouseOverPopupSig.value = false; - }), - 650, - ); + const handleMouseEnter$ = $(() => { + context.isKeyboardFocusSig.value = false; + context.isMouseOverPopupSig.value = true; + }); return ( >((props) role="listbox" aria-expanded={context.isListboxOpenSig.value ? 'true' : 'false'} aria-multiselectable={context.multiple ? 'true' : undefined} - onMouseMove$={async () => { - context.isMouseOverPopupSig.value = true; - - await resetScrollMove(); - }} - onMouseOut$={() => (context.isMouseOverPopupSig.value = false)} - onKeyDown$={() => (context.isMouseOverPopupSig.value = true)} + onMouseEnter$={[handleMouseEnter$, props.onMouseEnter$]} {...rest} > diff --git a/packages/kit-headless/src/components/combobox/combobox-root.tsx b/packages/kit-headless/src/components/combobox/combobox-root.tsx index 6e8a03477..b901f662f 100644 --- a/packages/kit-headless/src/components/combobox/combobox-root.tsx +++ b/packages/kit-headless/src/components/combobox/combobox-root.tsx @@ -12,8 +12,8 @@ import { } from '@builder.io/qwik'; import { ComboboxContext, comboboxContextId } from './combobox-context'; import { InternalComboboxProps } from './combobox-inline'; -import { useCombobox } from './use-combobox'; import { useCombinedRef } from '../../hooks/combined-refs'; +import { useBoundSignal } from '../../utils/bound-signal'; export type TMultiple = M extends true ? string[] : string; @@ -118,13 +118,12 @@ export type HComboboxRootImplProps = Omit< export const HComboboxRootImpl = component$< HComboboxRootImplProps & InternalComboboxProps >((props: HComboboxRootImplProps & InternalComboboxProps) => { - const isListboxOpenSig = useSignal(false); const { onInput$, onChange$, onOpenChange$, - _valuePropIndex: givenValuePropIndex, - _value, + initialIndex, + initialValue, loop: givenLoop, scrollOptions: givenScrollOptions, multiple = false, @@ -132,15 +131,23 @@ export const HComboboxRootImpl = component$< filter = true, _itemsMap, hasEmptyComp, - hasErrorComp, removeOnBackspace = false, name, required, - disabled, + 'bind:value': givenValueSig, + 'bind:open': givenOpenSig, + 'bind:displayValue': givenDisplayValueSig, ...rest } = props; // source of truth + const isListboxOpenSig = useBoundSignal(givenOpenSig, false); + const displayValuesSig = useBoundSignal(givenDisplayValueSig, []); + const selectedValuesSig = useBoundSignal( + givenValueSig, + multiple ? (initialValue ? [initialValue] : []) : initialValue || '', + ); + const itemsMapSig = useComputed$(() => { return props._itemsMap ?? new Map(); }); @@ -154,20 +161,24 @@ export const HComboboxRootImpl = component$< const loop = givenLoop ?? false; const localId = useId(); /** We use selected values to preserve the item state when the consumer filters the items. */ - const selectedValueSetSig = useSignal>(new Set(_value ? [_value] : [])); + const selectedValueSetSig = useSignal>( + new Set(initialValue ? [initialValue] : []), + ); + const disabledIndexSetSig = useSignal>(new Set()); + const filteredIndexSetSig = useSignal>(new Set()); const isMouseOverPopupSig = useSignal(false); - const isDisabledSig = useSignal(disabled ?? false); - const highlightedIndexSig = useSignal(givenValuePropIndex ?? null); + const highlightedIndexSig = useSignal(initialIndex ?? null); const initialLoadSig = useSignal(true); - const currDisplayValueSig = useSignal(); const scrollOptions = givenScrollOptions ?? { behavior: 'smooth', block: 'center', inline: 'nearest', }; const inputValueSig = useSignal(inputRef.value?.value ?? ''); - const isInvalidSig = useSignal(hasErrorComp ?? false); + const isDisabledSig = useComputed$(() => props.disabled ?? false); + const isInvalidSig = useComputed$(() => props.hasErrorComp ?? false); + const isKeyboardFocusSig = useSignal(false); // check any initial disabled items before the computed read below useTask$(() => { @@ -181,19 +192,19 @@ export const HComboboxRootImpl = component$< disabledIndexSetSig.value = disabledIndices; }); - useTask$(({ track }) => { - isInvalidSig.value = track(() => props.hasErrorComp ?? false); - }); - - const hasVisibleItemsSig = useComputed$(() => { - return itemsMapSig.value.size !== disabledIndexSetSig.value.size; + const isNoItemsSig = useComputed$(() => { + return ( + itemsMapSig.value.size === filteredIndexSetSig.value.size || + itemsMapSig.value.size === 0 + ); }); useTask$(function closeIfEmptyComp({ track }) { - track(() => disabledIndexSetSig.value); + track(() => itemsMapSig.value); + track(() => filteredIndexSetSig.value); // automatically closes the listbox if there are no visible items AND the combobox does not have an empty component - if (!hasEmptyComp && !hasVisibleItemsSig.value) { + if (!hasEmptyComp && isNoItemsSig.value) { isListboxOpenSig.value = false; } }); @@ -210,19 +221,22 @@ export const HComboboxRootImpl = component$< controlRef, localId, highlightedIndexSig, + selectedValuesSig, selectedValueSetSig, disabledIndexSetSig, - currDisplayValueSig, + filteredIndexSetSig, + displayValuesSig, isMouseOverPopupSig, + isKeyboardFocusSig, initialLoadSig, removeOnBackspace, filter, loop, multiple, - _value, + initialValue, scrollOptions, placeholder, - hasVisibleItemsSig, + isNoItemsSig, name, required, isDisabledSig, @@ -231,104 +245,50 @@ export const HComboboxRootImpl = component$< useContextProvider(comboboxContextId, context); - const { selectionManager$ } = useCombobox(); - - useTask$(async function reactiveUserValue({ track }) { - const bindValueSig = props['bind:value']; - if (!bindValueSig) return; - track(() => bindValueSig.value); - - for (const [index, item] of itemsMapSig.value) { - if (bindValueSig.value?.includes(item.value)) { - await selectionManager$(index, 'add'); - - if (initialLoadSig.value) { - // for both SSR and CSR, we need to set the initial index - context.highlightedIndexSig.value = index; - } - } else { - await selectionManager$(index, 'remove'); - } - } - }); - - useTask$(function reactiveUserOpen({ track }) { - const bindOpenSig = props['bind:open']; - if (!bindOpenSig) return; - track(() => bindOpenSig.value); - - isListboxOpenSig.value = bindOpenSig.value ?? isListboxOpenSig.value; - }); - - useTask$(function onOpenChangeTask({ track }) { - const bindOpenSig = props['bind:open']; + useTask$(async function handleOpenChange({ track }) { track(() => isListboxOpenSig.value); if (!initialLoadSig.value) { - onOpenChange$?.(isListboxOpenSig.value); - } - - // sync the user's given signal for the open state - if (bindOpenSig && bindOpenSig.value !== isListboxOpenSig.value) { - bindOpenSig.value = isListboxOpenSig.value; + await onOpenChange$?.(isListboxOpenSig.value); } }); - useTask$(function onInputTask({ track }) { + useTask$(async function handleInput({ track }) { track(() => context.inputValueSig.value); if (!initialLoadSig.value) { - onInput$?.(context.inputValueSig.value); + await onInput$?.(context.inputValueSig.value); } }); - useTask$(async function updateConsumerProps({ track }) { - const bindValueSig = props['bind:value']; - const bindDisplayTextSig = props['bind:displayValue']; - track(() => selectedValueSetSig.value); + useTask$(async function handleChange({ track }) { + track(() => selectedValuesSig.value); - const values = Array.from(selectedValueSetSig.value); - const displayValues = []; - - for (const value of values) { - for (const item of context.itemsMapSig.value.values()) { - if (item.value === value) { - displayValues.push(item.displayValue); - break; - } - } + if (!initialLoadSig.value && selectedValuesSig.value.length > 0) { + await onChange$?.(selectedValuesSig.value); } - if (onChange$ && selectedValueSetSig.value.size > 0) { - await onChange$(context.multiple ? values : values[0]); - } + const selectedValues = Array.isArray(selectedValuesSig.value) + ? selectedValuesSig.value + : [selectedValuesSig.value]; - // sync the user's given signal when an option is selected - if (bindValueSig && bindValueSig.value) { - const currUserSigValues = JSON.stringify(bindValueSig.value); - const newUserSigValues = JSON.stringify(values); + const displayValues: string[] = []; - if (currUserSigValues !== newUserSigValues) { - if (context.multiple) { - bindValueSig.value = values; - } else { - bindValueSig.value = values[0]; + for (const [index, item] of itemsMapSig.value.entries()) { + if (selectedValues.includes(item.value)) { + displayValues.push(item.displayValue); + + /* avoid "highlight jumping" on multiple selections */ + if (context.isListboxOpenSig.value === false) { + context.highlightedIndexSig.value = index; } } } - context.currDisplayValueSig.value = displayValues; - - // sync the user's given signal for the display value - if (bindDisplayTextSig && context.currDisplayValueSig.value) { - bindDisplayTextSig.value = context.multiple - ? context.currDisplayValueSig.value - : context.currDisplayValueSig.value[0]; - } - }); + displayValuesSig.value = displayValues; - useTask$(({ track }) => { - isDisabledSig.value = track(() => disabled ?? false); + if (multiple || !context.inputRef.value || !displayValues[0]) return; + context.inputRef.value.value = displayValues[0]; }); useTask$(() => { diff --git a/packages/kit-headless/src/components/combobox/combobox.test.ts b/packages/kit-headless/src/components/combobox/combobox.test.ts index 80cee0898..012bc4a1a 100644 --- a/packages/kit-headless/src/components/combobox/combobox.test.ts +++ b/packages/kit-headless/src/components/combobox/combobox.test.ts @@ -238,6 +238,32 @@ test.describe('Keyboard Behavior', () => { await d.getInput().press('ArrowUp'); await expect(d.getItemAt(1)).toHaveAttribute('data-highlighted'); }); + + test(`GIVEN a combobox with a selected value via mouse + WHEN using the arrow keys to select another option + THEN the latest selected option should be highlighted when the menu is opened again`, async ({ + page, + }) => { + const { driver: d } = await setup(page, 'hero'); + + // initial mouse selection + await d.openListbox('click'); + await d.getItemAt(2).click(); + + await d.openListbox('ArrowDown'); + await expect(d.getItemAt(2)).toHaveAttribute('data-highlighted'); + + // selection via arrow keys + await d.getInput().press('ArrowDown'); + await expect(d.getItemAt(3)).toHaveAttribute('data-highlighted'); + + await d.getInput().press('Enter'); + await expect(d.getItemAt(3)).toHaveAttribute('data-selected'); + + // latest selected option should be highlighted when the menu is opened again + await d.openListbox('ArrowDown'); + await expect(d.getItemAt(3)).toHaveAttribute('data-highlighted'); + }); }); test.describe('selecting options', () => { @@ -589,49 +615,39 @@ test.describe('Props', () => { }); test(`GIVEN a reactive combobox - WHEN the user empties the input with selecting all text and backspace - THEN there should be no selected value`, async ({ page }) => { + WHEN the user empties the input with selecting all text and backspace + THEN there should be no selected value`, async ({ page }) => { const { driver: d } = await setup(page, 'reactive'); - const apricot = (await d.getItemAt(1).textContent()) ?? ''; - - await expect(d.getInput()).toHaveValue(apricot); + await expect(d.getInput()).toHaveValue('Apricot'); + await expect(page.getByRole('paragraph')).toContainText('Apricot'); await d.getInput().clear(); await expect(d.getInput()).toHaveValue(''); - await expect( - page.getByRole('paragraph', { name: 'Your favorite fruit is:' }), - ).toBeVisible(); + await expect(page.getByRole('paragraph')).not.toContainText('Apricot'); }); test(`GIVEN a reactive combobox - WHEN the user empties the input and selects a new value - THEN that should update the given signal`, async ({ page }) => { + WHEN the user empties the input and selects a new value + THEN that should update the given signal`, async ({ page }) => { const { driver: d } = await setup(page, 'reactive'); - const apricot = (await d.getItemAt(1).textContent()) ?? ''; - - await expect(d.getInput()).toHaveValue(apricot); + await expect(d.getInput()).toHaveValue('Apricot'); + await expect(page.getByRole('paragraph')).toContainText('Apricot'); await d.getInput().clear(); await expect(d.getInput()).toHaveValue(''); - await expect( - page.getByRole('paragraph', { name: 'Your favorite fruit is:' }), - ).toBeVisible(); + await expect(page.getByRole('paragraph')).not.toContainText('Apricot'); await d.openListbox('click'); + await d.getItemAt(0).click(); - await d.getItemAt(1).click(); - - await expect(d.getInput()).toHaveValue('Apricot'); - - await expect( - page.getByRole('paragraph', { name: 'Your favorite fruit is: Apricot' }), - ).toBeVisible(); + await expect(d.getInput()).toHaveValue('Apple'); + await expect(page.getByRole('paragraph')).toContainText('Apple'); }); }); @@ -892,19 +908,6 @@ test.describe('Filtering options', () => { expect(await d.getVisibleItemsLength()).toBe(8); }); - test(`GIVEN a combobox - WHEN an option is selected - AND the typed string does not match the filter function - THEN the option should be unselected`, async ({ page }) => { - const { driver: d } = await setup(page, 'hero'); - await d.openListbox('ArrowDown'); - await d.getInput().press('Enter'); - await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'true'); - - await d.getInput().press('z'); - await expect(d.getItemAt(0)).toHaveAttribute('aria-selected', 'false'); - }); - test(`GIVEN a combobox WHEN a custom filter is set THEN it should respect the filter function`, async ({ page }) => { diff --git a/packages/kit-headless/src/components/combobox/use-combobox.tsx b/packages/kit-headless/src/components/combobox/use-combobox.tsx index 3a970b7eb..a1462a1e3 100644 --- a/packages/kit-headless/src/components/combobox/use-combobox.tsx +++ b/packages/kit-headless/src/components/combobox/use-combobox.tsx @@ -1,13 +1,46 @@ import { useContext, $, Signal } from '@builder.io/qwik'; import { comboboxContextId } from './combobox-context'; +class ValueManager { + constructor( + private isMultiple: boolean, + private initialValue: T | T[], + ) {} + + add(value: T): T | T[] { + if (this.isMultiple) { + const currentArray = Array.isArray(this.initialValue) ? [...this.initialValue] : []; + return [...currentArray, value]; + } + return value; + } + + remove(value: T): T | T[] { + if (this.isMultiple && Array.isArray(this.initialValue)) { + return this.initialValue.filter((v) => v !== value); + } + return '' as T; + } + + toggle(value: T): T | T[] { + if (this.isMultiple) { + const currentArray = Array.isArray(this.initialValue) ? [...this.initialValue] : []; + return currentArray.includes(value) + ? currentArray.filter((v) => v !== value) + : [...currentArray, value]; + } + return this.initialValue === value ? ('' as T) : value; + } +} + export function useCombobox() { const context = useContext(comboboxContextId); + const selectionManager$ = $( async (index: number | null, action: 'add' | 'toggle' | 'remove') => { if (index === null) return; - const selectedDisplayValue = context.itemsMapSig.value.get(index)?.displayValue; + const selectedDisplayValue = context.itemsMapSig.value.get(index)?.displayValue; const value = context.itemsMapSig.value.get(index)?.value; if (!value) { @@ -16,49 +49,26 @@ export function useCombobox() { ); } - if (action === 'add') { - if (context.multiple) { - context.selectedValueSetSig.value = new Set([ - ...context.selectedValueSetSig.value, - value, - ]); - } else { - context.selectedValueSetSig.value = new Set([value]); - } - } - if (action === 'toggle') { - if (context.selectedValueSetSig.value.has(value)) { - context.selectedValueSetSig.value = new Set( - [...context.selectedValueSetSig.value].filter( - (selectedValue) => selectedValue !== value, - ), - ); - } else { - if (context.multiple) { - context.selectedValueSetSig.value = new Set([ - ...context.selectedValueSetSig.value, - value, - ]); - } else { - context.selectedValueSetSig.value = new Set([value]); - } - } - } - if (action === 'remove') { - context.selectedValueSetSig.value = new Set( - [...context.selectedValueSetSig.value].filter( - (selectedValue) => selectedValue !== value, - ), - ); - } + const valueManager = new ValueManager( + context.multiple ?? false, + context.selectedValuesSig.value, + ); - if (action === 'add' || action === 'toggle') { - if (!context.inputRef.value) return; - if (!selectedDisplayValue) return; + switch (action) { + case 'add': + context.selectedValuesSig.value = valueManager.add(value); + break; + case 'remove': + context.selectedValuesSig.value = valueManager.remove(value); + return; // Early return for 'remove' action + case 'toggle': + context.selectedValuesSig.value = valueManager.toggle(value); + break; + } - if (!context.multiple && context.selectedValueSetSig.value.has(value)) { - context.inputRef.value.value = selectedDisplayValue; - } + // Update input value for single-select combobox + if (!context.multiple && context.inputRef.value && selectedDisplayValue) { + context.inputRef.value.value = selectedDisplayValue; } }, ); @@ -66,56 +76,81 @@ export function useCombobox() { const filterManager$ = $((isVisible: boolean, itemRef: Signal, index: number) => { if (!itemRef.value) return; + const isDisabled = context.itemsMapSig.value.get(index)?.disabled; + itemRef.value.style.display = isVisible ? '' : 'none'; - context.disabledIndexSetSig.value = new Set( + + context.filteredIndexSetSig.value = new Set( isVisible - ? [...context.disabledIndexSetSig.value].filter( - (selectedIndex) => selectedIndex !== index, + ? [...context.filteredIndexSetSig.value].filter( + (filteredIndex) => filteredIndex !== index, ) - : [...context.disabledIndexSetSig.value, index], + : [...context.filteredIndexSetSig.value, index], ); + + // Update disabledIndexSetSig + if (isDisabled) { + context.disabledIndexSetSig.value = new Set([ + ...context.disabledIndexSetSig.value, + index, + ]); + } else { + context.disabledIndexSetSig.value = new Set( + [...context.disabledIndexSetSig.value].filter( + (disabledIndex) => disabledIndex !== index, + ), + ); + } }); const getNextEnabledItemIndex$ = $((index: number) => { const len = context.itemsMapSig.value.size; - if (len === 1) { - return context.disabledIndexSetSig.value.has(0) ? -1 : 0; - } + if (len === 0) return -1; - let offset = 1; - if (!context.loop && index + 1 >= len) { - return index; - } - while (offset < len) { - const nextIndex = (index + offset) % len; - if (!context.disabledIndexSetSig.value.has(nextIndex)) { - return nextIndex; - } - offset++; - if (!context.loop && index + offset >= len) { - break; + const findNextEnabled = (start: number) => { + for (let i = 0; i < len; i++) { + const nextIndex = (start + i) % len; + if ( + !context.disabledIndexSetSig.value.has(nextIndex) && + !context.filteredIndexSetSig.value.has(nextIndex) + ) { + return nextIndex; + } } + return -1; + }; + + if (index === -1 || len === 1) { + return findNextEnabled(0); } - return index; + + const nextIndex = findNextEnabled(index + 1); + return context.loop || nextIndex > index ? nextIndex : index; }); const getPrevEnabledItemIndex$ = $((index: number) => { - let offset = 1; const len = context.itemsMapSig.value.size; - if (!context.loop && index - 1 < 0) { - return index; - } - while (offset <= len) { - const prevIndex = (index - offset + len) % len; - if (!context.disabledIndexSetSig.value.has(prevIndex)) { - return prevIndex; - } - offset++; - if (!context.loop && index - offset < 0) { - break; + if (len === 0) return -1; + + const findPrevEnabled = (start: number) => { + for (let i = 0; i < len; i++) { + const prevIndex = (start - i + len) % len; + if ( + !context.disabledIndexSetSig.value.has(prevIndex) && + !context.filteredIndexSetSig.value.has(prevIndex) + ) { + return prevIndex; + } } + return -1; + }; + + if (index === -1 || len === 1) { + return findPrevEnabled(len - 1); } - return index; + + const prevIndex = findPrevEnabled(index - 1); + return context.loop || prevIndex < index ? prevIndex : index; }); const getActiveDescendant$ = $((index: number) => { From af6aff98dd2a77c4e20c1e98b8619d322c6717f6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 22 Sep 2024 17:21:48 -0500 Subject: [PATCH 17/27] Version Packages (#971) Co-authored-by: github-actions[bot] --- .changeset/funny-pens-vanish.md | 31 ------------------------------ packages/kit-headless/CHANGELOG.md | 31 ++++++++++++++++++++++++++++++ packages/kit-headless/package.json | 2 +- 3 files changed, 32 insertions(+), 32 deletions(-) delete mode 100644 .changeset/funny-pens-vanish.md diff --git a/.changeset/funny-pens-vanish.md b/.changeset/funny-pens-vanish.md deleted file mode 100644 index bd99ffd15..000000000 --- a/.changeset/funny-pens-vanish.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -'@qwik-ui/headless': patch ---- - -# Combobox Improvements - -## 🔄 Reactive Improvements - -- Better handling of array-based values -- Improved handling of initial and reactive values - -## 🐛 Key Bug Fixes - -- Fixed highlight jumping issues -- Enhanced empty input handling -- Better filtered item highlighting - -## 🖱️ Interaction Enhancements - -- Smoother scrolling experience -- Improved keyboard and mouse coordination - -## 🚀 Performance Optimizations - -- More efficient item filtering - -## 🧪 Reliability - -- Added tests for reactivity handling, item unselection, and mouse-to-pointer interaction switching - -- Improved handling of edge cases in user interactions diff --git a/packages/kit-headless/CHANGELOG.md b/packages/kit-headless/CHANGELOG.md index 91be78861..3a02b0b5d 100644 --- a/packages/kit-headless/CHANGELOG.md +++ b/packages/kit-headless/CHANGELOG.md @@ -1,5 +1,36 @@ # Changelog +## 0.6.1 + +### Patch Changes + +- # Combobox Improvements (by [@thejackshelton](https://github.com/thejackshelton) in [#968](https://github.com/qwikifiers/qwik-ui/pull/968)) + + ## 🔄 Reactive Improvements + + - Better handling of array-based values + - Improved handling of initial and reactive values + + ## 🐛 Key Bug Fixes + + - Fixed highlight jumping issues + - Enhanced empty input handling + - Better filtered item highlighting + + ## 🖱️ Interaction Enhancements + + - Smoother scrolling experience + - Improved keyboard and mouse coordination + + ## 🚀 Performance Optimizations + + - More efficient item filtering + + ## 🧪 Reliability + + - Added tests for reactivity handling, item unselection, and mouse-to-pointer interaction switching + - Improved handling of edge cases in user interactions + ## 0.6.0 ### Minor Changes diff --git a/packages/kit-headless/package.json b/packages/kit-headless/package.json index b34a44fe4..4890d7bb3 100644 --- a/packages/kit-headless/package.json +++ b/packages/kit-headless/package.json @@ -1,6 +1,6 @@ { "name": "@qwik-ui/headless", - "version": "0.6.0", + "version": "0.6.1", "description": "Qwik UI headless components library", "publishConfig": { "access": "public" From 27474ea07aa73545999a4366a042e11d9941c8e1 Mon Sep 17 00:00:00 2001 From: TheMcnafaha <102767512+TheMcnafaha@users.noreply.github.com> Date: Sun, 29 Sep 2024 06:20:20 -0400 Subject: [PATCH 18/27] Custom automatic api (#835) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(automatin/api): makes obj from components * feat(automation/api): parses single line comments * feat(regex): found it * feat(regex): grouped and closed it * feat(regex): and now it respect white space * feat(automation): working regex-to-obj * feat(commentMerger): removes whitespace and * This is achieved by yet another regex™. It fully respects any intentional (or not) whitespace or line breaks after the fact. * feat(automation/regex): adds type extraction to regex * feat(automation api): fix type regex to correctly read from file * refactor(automation): splits file reading from comment regex * refactor(extractType): splits regex from file handle * refactor(automatic api): better file name and ouput * fix(automatic api): removes camel case * refactor(api automation): better fn name * fix(automatic api): prevents deleting comments * fix(automatic api): rm console log * feat(custom api): parses comments from single file * fix(custom api): type extentions correctly handles the second way a type could end * feat(auto api):group comments under type label Adds label prop to comment obj. Label prop is derived from the type that defines the comments but is not changed to match current API naming * feat(auto api): components use comment labels * feat(auto api): dynamically gets component name * feat(auto api): adds fn that returns output path * refactor(auto api): renames and shifts now the plugin is in one file, decluttering the vite.config file, and gives it a better name * refactor(custom api): removes old code new code is placed under a single file, can now be used in vite * refactor(auto api): move fns around Mostly default export being at the top. * fix(auto api): adds proper types * feat(auto-api): write api obj to file * fix(auto-api): removes semicolon from type * feat(auto-api): adds docs component * fix(auto api): removes unused import * feat(auto api): adds periods to sub component names * feat(auto api): adds fn for removing question marks * refactor(auto api): betters namings * fix(auto api): workaround error message Essentially, you can't import across package boundaries. Hacky fix is to duplicate types. * fix(auto api): removes unused import * fix(auto api): removes test code Accidentally commited code used to test the auto API. --- apps/website/auto-api.ts | 118 +++++++++++++++ .../src/components/api-table/api-table.tsx | 4 +- .../src/components/api-table/auto-api.tsx | 134 ++++++++++++++++++ .../src/components/mdx-components/index.tsx | 2 + .../src/routes/docs/headless/select/index.mdx | 1 + apps/website/vite.config.ts | 2 + .../src/components/select/select-root.tsx | 12 +- 7 files changed, 265 insertions(+), 8 deletions(-) create mode 100644 apps/website/auto-api.ts create mode 100644 apps/website/src/components/api-table/auto-api.tsx diff --git a/apps/website/auto-api.ts b/apps/website/auto-api.ts new file mode 100644 index 000000000..d4f2bafe2 --- /dev/null +++ b/apps/website/auto-api.ts @@ -0,0 +1,118 @@ +import * as fs from 'fs'; +import { resolve } from 'path'; +import { inspect } from 'util'; +import { ViteDevServer } from 'vite'; +export default function autoAPI() { + return { + name: 'watch-monorepo-changes', + configureServer(server: ViteDevServer) { + const watchPath = resolve(__dirname, '../../packages/kit-headless'); + server.watcher.on('change', (file: string) => { + if (file.startsWith(watchPath)) { + loopOnAllChildFiles(file); + } + }); + }, + }; +} +// the object should have this general structure, arranged from parent to child +// componentName:[subComponent,subcomponent,...] +// subComponentName:[publicType,publicType,...] +// publicType:[{ comment,prop,type },{ comment,prop,type },...] +// THEY UPPER-MOST KEY IS ALWAYS USED AS A HEADING +export type ComponentParts = Record; +type SubComponents = SubComponent[]; +export type SubComponent = Record; +export type PublicType = Record; +type ParsedProps = { + comment: string; + prop: string; + type: string; +}; +function parseSingleComponentFromDir(path: string, ref: SubComponents) { + const component_name = /\/([\w-]*).tsx/.exec(path); + if (component_name === null || component_name[1] === null) { + // may need better behavior + return; + } + const sourceCode = fs.readFileSync(path, 'utf-8'); + const comments = extractPublicTypes(sourceCode); + const parsed: PublicType[] = []; + for (const comment of comments) { + const api = extractComments(comment.string); + const pair: PublicType = { [comment.label]: api }; + parsed.push(pair); + } + const completeSubComponent: SubComponent = { [component_name[1]]: parsed }; + ref.push(completeSubComponent); + return ref; +} + +function extractPublicTypes(strg: string) { + const getPublicTypes = /type Public([A-Z][\w]*)*[\w\W]*?{([\w|\W]*?)}(;| &)/gm; + const cms = []; + let groups; + while ((groups = getPublicTypes.exec(strg)) !== null) { + const string = groups[2]; + cms.push({ label: groups[1], string }); + } + return cms; +} +function extractComments(strg: string): ParsedProps[] { + const magical_regex = + /^\s*?\/[*]{2}\n?([\w|\W|]*?)\s*[*]{1,2}[/]\n[ ]*([\w|\W]*?): ([\w|\W]*?);?$/gm; + + const cms = []; + let groups; + + while ((groups = magical_regex.exec(strg)) !== null) { + const trimStart = /^ *|(\* *)/g; + const comment = groups[1].replaceAll(trimStart, ''); + const prop = groups[2]; + const type = groups[3]; + cms.push({ comment, prop, type }); + } + return cms; +} +function writeToDocs(fullPath: string, componentName: string, api: ComponentParts) { + if (fullPath.includes('kit-headless')) { + const relDocPath = `../website/src/routes//docs/headless/${componentName}`; + const fullDocPath = resolve(__dirname, relDocPath); + const dirPath = fullDocPath.concat('/auto-api'); + + if (!fs.existsSync(dirPath)) { + fs.mkdirSync(dirPath); + } + const json = JSON.stringify(api, null, 2); + const hacky = `export const api=${json}`; + + try { + fs.writeFileSync(dirPath.concat('/api.ts'), hacky); + console.log('auto-api: succesfully genereated new json!!! :)'); + } catch (err) { + return; + } + } +} +function loopOnAllChildFiles(filePath: string) { + const childComponentRegex = /\/([\w-]*).tsx$/.exec(filePath); + if (childComponentRegex === null) { + return; + } + const parentDir = filePath.replace(childComponentRegex[0], ''); + const componentRegex = /\/(\w*)$/.exec(parentDir); + if (!fs.existsSync(parentDir) || componentRegex == null) { + return; + } + const componentName = componentRegex[1]; + const allParts: SubComponents = []; + const store: ComponentParts = { [componentName]: allParts }; + fs.readdirSync(parentDir).forEach((fileName) => { + if (/tsx$/.test(fileName)) { + const fullPath = parentDir + '/' + fileName; + parseSingleComponentFromDir(fullPath, store[componentName]); + } + }); + + writeToDocs(filePath, componentName, store); +} diff --git a/apps/website/src/components/api-table/api-table.tsx b/apps/website/src/components/api-table/api-table.tsx index d5dbfdd06..65f1fe672 100644 --- a/apps/website/src/components/api-table/api-table.tsx +++ b/apps/website/src/components/api-table/api-table.tsx @@ -1,9 +1,9 @@ import { component$ } from '@builder.io/qwik'; import { InfoPopup } from '../info-popup/info-popup'; -type APITableProps = { +export type APITableProps = { propDescriptors: { name: string; - info: string; + info?: string; type: string; description: string; }[]; diff --git a/apps/website/src/components/api-table/auto-api.tsx b/apps/website/src/components/api-table/auto-api.tsx new file mode 100644 index 000000000..526b6b33c --- /dev/null +++ b/apps/website/src/components/api-table/auto-api.tsx @@ -0,0 +1,134 @@ +import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik'; +import { APITable, type APITableProps } from './api-table'; +import { packages } from '../install-snippet/install-snippet'; + +//This is a workaround for not being able to export across packages due to nx rule: +// https://nx.dev/features/enforce-module-boundaries#enforce-module-boundaries +type ComponentParts = Record; +type SubComponents = SubComponent[]; +type SubComponent = Record; +type PublicType = Record; +type ParsedProps = { + comment: string; + prop: string; + type: string; +}; +type AutoAPIConfig = { + topHeader?: QRL<(text: string) => JSXOutput>; + subHeader?: QRL<(text: string) => JSXOutput>; + props?: QRL<(text: string) => string>; +}; + +type AnatomyTableProps = { + api?: ComponentParts; + config: AutoAPIConfig; +}; + +type SubComponentProps = { + subComponent: SubComponent; + config: AutoAPIConfig; +}; +type ParsedCommentsProps = { + parsedProps: PublicType; + config: AutoAPIConfig; +}; +const currentHeader = $((_: string) => { + //cannot send h2 from here because current TOC can only read md + return null; +}); + +const currentSubHeader = $((text: string) => { + let subHeader = text.replace(/(p|P)rops/, ''); + const hasCapital = /[a-z][A-Z]/.exec(subHeader)?.index; + if (hasCapital != undefined) { + subHeader = + subHeader.slice(0, hasCapital + 1) + '.' + subHeader.slice(hasCapital + 1); + } + return ( + <> +

      {subHeader}

      + + ); +}); + +const removeQuestionMarkFromProp = $((text: string) => { + return text.replace('?', ''); +}); +const defaultConfig: AutoAPIConfig = { + topHeader: currentHeader, + subHeader: currentSubHeader, + props: removeQuestionMarkFromProp, +}; +export const AutoAPI = component$( + ({ api, config = defaultConfig }) => { + if (api === undefined) { + return null; + } + const key = Object.keys(api)[0]; + const topHeaderSig = useSignal(key); + const subComponents = api[key].filter((e) => e[Object.keys(e)[0]].length > 0); + useTask$(async () => { + if (config.topHeader) { + topHeaderSig.value = await config.topHeader(key as string); + } + }); + return ( + <> + {topHeaderSig.value} + {subComponents.map((e) => ( + + ))} + + ); + }, +); + +const SubComponent = component$(({ subComponent, config }) => { + const subComponentKey = Object.keys(subComponent)[0]; + const comments = subComponent[subComponentKey]; + return ( + <> + {comments.map((e) => ( + <> + + + ))} + + ); +}); + +const ParsedComments = component$(({ parsedProps, config }) => { + const key = Object.keys(parsedProps)[0]; + const subHeaderSig = useSignal(key); + useTask$(async () => { + if (config.subHeader) { + subHeaderSig.value = await config.subHeader(key as string); + } + }); + const appliedPropsSig = useSignal(null); + useTask$(async () => { + const translation: APITableProps = { + propDescriptors: parsedProps[key].map((e) => { + return { + name: e.prop, + type: e.type, + description: e.comment, + }; + }), + }; + if (config.props) { + for (const props of translation.propDescriptors) { + props.name = await config.props(props.name); + } + } + appliedPropsSig.value = translation; + }); + return ( + <> + {subHeaderSig.value} + {appliedPropsSig.value?.propDescriptors && ( + + )} + + ); +}); diff --git a/apps/website/src/components/mdx-components/index.tsx b/apps/website/src/components/mdx-components/index.tsx index 3a1d9e7ee..603655d39 100644 --- a/apps/website/src/components/mdx-components/index.tsx +++ b/apps/website/src/components/mdx-components/index.tsx @@ -2,6 +2,7 @@ import { Component, PropsOf, Slot, component$ } from '@builder.io/qwik'; import { cn } from '@qwik-ui/utils'; import { AnatomyTable } from '../anatomy-table/anatomy-table'; import { APITable } from '../api-table/api-table'; +import { AutoAPI } from '../api-table/auto-api'; import { CodeCopy } from '../code-copy/code-copy'; import { CodeSnippet } from '../code-snippet/code-snippet'; import { FeatureList } from '../feature-list/feature-list'; @@ -132,4 +133,5 @@ export const components: Record = { Note, StatusBanner, Showcase, + AutoAPI, }; diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx index d42ead181..d92d0c4bc 100644 --- a/apps/website/src/routes/docs/headless/select/index.mdx +++ b/apps/website/src/routes/docs/headless/select/index.mdx @@ -2,6 +2,7 @@ title: Qwik UI | Select --- +import { api } from './auto-api/api'; import { FeatureList } from '~/components/feature-list/feature-list'; import { statusByComponent } from '~/_state/component-statuses'; diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts index 702ab3aeb..57617084c 100644 --- a/apps/website/vite.config.ts +++ b/apps/website/vite.config.ts @@ -3,6 +3,7 @@ import { qwikVite } from '@builder.io/qwik/optimizer'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; import { recmaProvideComponents } from './recma-provide-components'; +import autoAPI from './auto-api'; export default defineConfig(async () => { const { default: rehypePrettyCode } = await import('rehype-pretty-code'); @@ -29,6 +30,7 @@ export default defineConfig(async () => { return { plugins: [ + autoAPI(), qwikCity({ mdxPlugins: { rehypeSyntaxHighlight: false, diff --git a/packages/kit-headless/src/components/select/select-root.tsx b/packages/kit-headless/src/components/select/select-root.tsx index d0af4308a..449c9d812 100644 --- a/packages/kit-headless/src/components/select/select-root.tsx +++ b/packages/kit-headless/src/components/select/select-root.tsx @@ -44,13 +44,13 @@ type TMultiValue = type TStringOrArray = | { - multiple?: true; - onChange$?: QRL<(value: string[]) => void>; - } + multiple?: true; + onChange$?: QRL<(value: string[]) => void>; + } | { - multiple?: false; - onChange$?: QRL<(value: string) => void>; - }; + multiple?: false; + onChange$?: QRL<(value: string) => void>; + }; export type SelectProps = Omit< PropsOf<'div'>, From 8545cba335fbc0ca793022d75c433e3071ca446c Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Sun, 29 Sep 2024 07:34:48 -0500 Subject: [PATCH 19/27] Site improvements (#973) * feat: carousel now uses auto api * fix: rollup warning to properly export toggle group --- apps/website/auto-api.ts | 1 - .../src/components/api-table/auto-api.tsx | 14 +- .../docs/headless/carousel/auto-api/api.ts | 122 ++++++++++++++++++ .../routes/docs/headless/carousel/index.mdx | 69 +--------- .../src/routes/docs/headless/select/index.mdx | 1 - .../src/components/carousel/inline.tsx | 6 +- .../src/components/carousel/root.tsx | 4 +- .../src/components/toggle-group/index.tsx | 8 +- packages/kit-headless/src/index.ts | 2 +- 9 files changed, 144 insertions(+), 83 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/carousel/auto-api/api.ts diff --git a/apps/website/auto-api.ts b/apps/website/auto-api.ts index d4f2bafe2..0d9442c8d 100644 --- a/apps/website/auto-api.ts +++ b/apps/website/auto-api.ts @@ -1,6 +1,5 @@ import * as fs from 'fs'; import { resolve } from 'path'; -import { inspect } from 'util'; import { ViteDevServer } from 'vite'; export default function autoAPI() { return { diff --git a/apps/website/src/components/api-table/auto-api.tsx b/apps/website/src/components/api-table/auto-api.tsx index 526b6b33c..b216be717 100644 --- a/apps/website/src/components/api-table/auto-api.tsx +++ b/apps/website/src/components/api-table/auto-api.tsx @@ -1,6 +1,5 @@ import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik'; import { APITable, type APITableProps } from './api-table'; -import { packages } from '../install-snippet/install-snippet'; //This is a workaround for not being able to export across packages due to nx rule: // https://nx.dev/features/enforce-module-boundaries#enforce-module-boundaries @@ -32,7 +31,7 @@ type ParsedCommentsProps = { parsedProps: PublicType; config: AutoAPIConfig; }; -const currentHeader = $((_: string) => { +const currentHeader = $(() => { //cannot send h2 from here because current TOC can only read md return null; }); @@ -75,8 +74,8 @@ export const AutoAPI = component$( return ( <> {topHeaderSig.value} - {subComponents.map((e) => ( - + {subComponents.map((e, index) => ( + ))} ); @@ -109,10 +108,15 @@ const ParsedComments = component$(({ parsedProps, config }) useTask$(async () => { const translation: APITableProps = { propDescriptors: parsedProps[key].map((e) => { + const isObject = e.type.includes('{'); + const isUnion = e.type.includes('|'); + const isPopup = isObject || isUnion; + return { name: e.prop, - type: e.type, + type: isObject ? 'object' : isUnion ? 'union' : e.type, description: e.comment, + info: (isPopup && e.type) || undefined, }; }), }; diff --git a/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts b/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts new file mode 100644 index 000000000..473dbd7e0 --- /dev/null +++ b/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts @@ -0,0 +1,122 @@ +export const api = { + carousel: [ + { + bullet: [], + }, + { + inline: [], + }, + { + next: [], + }, + { + pagination: [], + }, + { + player: [], + }, + { + previous: [], + }, + { + root: [ + { + CarouselRootProps: [ + { + comment: 'The gap between slides', + prop: 'gap?', + type: 'number', + }, + { + comment: 'Number of slides to show at once', + prop: 'slidesPerView?', + type: 'number', + }, + { + comment: 'Whether the carousel is draggable', + prop: 'draggable?', + type: 'boolean', + }, + { + comment: 'Alignment of slides within the viewport', + prop: 'align?', + type: "'start' | 'center' | 'end'", + }, + { + comment: 'Whether the carousel should rewind', + prop: 'rewind?', + type: 'boolean', + }, + { + comment: 'Bind the selected index to a signal', + prop: "'bind:selectedIndex'?", + type: 'Signal', + }, + { + comment: 'change the initial index of the carousel on render', + prop: 'startIndex?', + type: 'number', + }, + { + comment: + '@deprecated Use bind:selectedIndex instead\n Bind the current slide index to a signal', + prop: "'bind:currSlideIndex'?", + type: 'Signal', + }, + { + comment: 'Whether the carousel should autoplay', + prop: "'bind:autoplay'?", + type: 'Signal', + }, + { + comment: 'the current progress of the carousel', + prop: "'bind:progress'?", + type: 'Signal', + }, + { + comment: 'Time in milliseconds before the next slide plays during autoplay', + prop: 'autoPlayIntervalMs?', + type: 'number', + }, + { + comment: '@internal Total number of slides', + prop: '_numSlides?', + type: 'number', + }, + { + comment: '@internal Whether this carousel has a title', + prop: '_isTitle?', + type: 'boolean', + }, + { + comment: 'The sensitivity of the carousel dragging', + prop: 'sensitivity?', + type: '{', + }, + ], + }, + ], + }, + { + scroller: [], + }, + { + slide: [], + }, + { + step: [], + }, + { + stepper: [], + }, + { + title: [], + }, + { + 'use-carousel': [], + }, + { + 'use-scroller': [], + }, + ], +}; diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx index a0e32da50..a0449ce6f 100644 --- a/apps/website/src/routes/docs/headless/carousel/index.mdx +++ b/apps/website/src/routes/docs/headless/carousel/index.mdx @@ -4,6 +4,10 @@ import { FeatureList } from '~/components/feature-list/feature-list'; import { Note } from '~/components/note/note'; +import { AutoAPI } from '~/components/api-table/auto-api'; + +import { api } from './auto-api/api'; + # Carousel @@ -327,67 +331,4 @@ In the above example, we also use the headless progress component to show the pr ## API -### Carousel.Root - -', - description: 'Bind the selected index to a signal.', - }, - { - name: 'startIndex', - type: 'number', - description: 'Change the initial index of the carousel on render.', - }, - { - name: 'bind:autoplay', - type: 'Signal', - description: 'Whether the carousel should autoplay.', - }, - { - name: 'autoPlayIntervalMs', - type: 'number', - description: 'Time in milliseconds before the next slide plays during autoplay.', - }, - { - name: 'direction', - type: 'union', - description: - 'Change the direction of the carousel, for it to be veritical define the maxSlideHeight prop as well.', - info: '"row" | "column"', - }, - { - name: 'maxSlideHeight', - type: 'number', - description: 'Write the height of the longest slide.', - }, - ]} -/> + diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx index d92d0c4bc..d42ead181 100644 --- a/apps/website/src/routes/docs/headless/select/index.mdx +++ b/apps/website/src/routes/docs/headless/select/index.mdx @@ -2,7 +2,6 @@ title: Qwik UI | Select --- -import { api } from './auto-api/api'; import { FeatureList } from '~/components/feature-list/feature-list'; import { statusByComponent } from '~/_state/component-statuses'; diff --git a/packages/kit-headless/src/components/carousel/inline.tsx b/packages/kit-headless/src/components/carousel/inline.tsx index 80a804380..8c2d3bdcf 100644 --- a/packages/kit-headless/src/components/carousel/inline.tsx +++ b/packages/kit-headless/src/components/carousel/inline.tsx @@ -1,5 +1,5 @@ import { Component } from '@builder.io/qwik'; -import { CarouselBase, CarouselRootProps } from './root'; +import { CarouselBase, PublicCarouselRootProps } from './root'; import { Carousel } from '@qwik-ui/headless'; import { findComponent, processChildren } from '../../utils/inline-component'; @@ -20,8 +20,8 @@ type InternalProps = { titleComponent?: typeof Carousel.Title; }; -export const CarouselRoot: Component = ( - props: CarouselRootProps & InternalProps, +export const CarouselRoot: Component = ( + props: PublicCarouselRootProps & InternalProps, ) => { const { children, diff --git a/packages/kit-headless/src/components/carousel/root.tsx b/packages/kit-headless/src/components/carousel/root.tsx index 720060dea..7a9209330 100644 --- a/packages/kit-headless/src/components/carousel/root.tsx +++ b/packages/kit-headless/src/components/carousel/root.tsx @@ -13,7 +13,7 @@ import { CarouselContext, carouselContextId } from './context'; import { useBoundSignal } from '../../utils/bound-signal'; import { useAutoplay } from './use-carousel'; -export type CarouselRootProps = PropsOf<'div'> & { +export type PublicCarouselRootProps = PropsOf<'div'> & { /** The gap between slides */ gap?: number; @@ -72,7 +72,7 @@ export type CarouselRootProps = PropsOf<'div'> & { maxSlideHeight?: number; }; -export const CarouselBase = component$((props: CarouselRootProps) => { +export const CarouselBase = component$((props: PublicCarouselRootProps) => { const { align, 'bind:currSlideIndex': givenOldSlideIndexSig, diff --git a/packages/kit-headless/src/components/toggle-group/index.tsx b/packages/kit-headless/src/components/toggle-group/index.tsx index fc5b18aa7..0f2ad5e4c 100644 --- a/packages/kit-headless/src/components/toggle-group/index.tsx +++ b/packages/kit-headless/src/components/toggle-group/index.tsx @@ -1,6 +1,2 @@ -import { HToggleGroupItem } from './toggle-group-item'; -import { HToggleGroupRoot } from './toggle-group-root'; -export const ToggleGroup = { - Root: HToggleGroupRoot, - Item: HToggleGroupItem, -}; +export { HToggleGroupItem as Item } from './toggle-group-item'; +export { HToggleGroupRoot as Root } from './toggle-group-root'; diff --git a/packages/kit-headless/src/index.ts b/packages/kit-headless/src/index.ts index 77c2e051a..86198fa29 100644 --- a/packages/kit-headless/src/index.ts +++ b/packages/kit-headless/src/index.ts @@ -13,7 +13,7 @@ export * as Progress from './components/progress'; export * from './components/separator'; export * as Tabs from './components/tabs'; export { Toggle } from './components/toggle'; -export { ToggleGroup } from './components/toggle-group'; +export * as ToggleGroup from './components/toggle-group'; export * from './utils/visually-hidden'; export * as Tooltip from './components/tooltip'; export * as Dropdown from './components/dropdown'; From 9cb3c96879e3429bbc78f85fc261fe60a192bbf5 Mon Sep 17 00:00:00 2001 From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com> Date: Sun, 29 Sep 2024 10:59:30 -0500 Subject: [PATCH 20/27] Update component statuses (#975) * feat: carousel now uses auto api * fix: rollup warning to properly export toggle group * update shiki to latest * component status changes + popover styles fix * separator is stable --- apps/website/src/_state/component-statuses.ts | 11 +- .../status-banner/status-banner.tsx | 2 +- apps/website/src/routes/docs/headless/menu.md | 2 +- .../docs/headless/popover/examples/styles.tsx | 8 ++ .../routes/docs/headless/popover/index.mdx | 6 +- .../docs/headless/toggle-group/index.mdx | 2 +- .../routes/docs/headless/tooltip/index.mdx | 2 - package.json | 3 +- pnpm-lock.yaml | 101 ++++++++++++++---- 9 files changed, 101 insertions(+), 36 deletions(-) create mode 100644 apps/website/src/routes/docs/headless/popover/examples/styles.tsx diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts index d1fdf99d7..5894906dd 100644 --- a/apps/website/src/_state/component-statuses.ts +++ b/apps/website/src/_state/component-statuses.ts @@ -37,22 +37,17 @@ export const statusByComponent: ComponentKitsStatuses = { Textarea: ComponentStatus.Draft, }, headless: { - Accordion: ComponentStatus.Beta, Carousel: ComponentStatus.Beta, - Collapsible: ComponentStatus.Beta, Combobox: ComponentStatus.Beta, Checkbox: ComponentStatus.Draft, Dropdown: ComponentStatus.Draft, - Label: ComponentStatus.Draft, - Modal: ComponentStatus.Beta, + Label: ComponentStatus.Beta, Pagination: ComponentStatus.Draft, - Popover: ComponentStatus.Beta, Progress: ComponentStatus.Beta, Select: ComponentStatus.Beta, - Separator: ComponentStatus.Beta, Tabs: ComponentStatus.Beta, - Toggle: ComponentStatus.Draft, - ToggleGroup: ComponentStatus.Draft, + Toggle: ComponentStatus.Beta, + 'Toggle Group': ComponentStatus.Beta, Tooltip: ComponentStatus.Beta, }, }; diff --git a/apps/website/src/components/status-banner/status-banner.tsx b/apps/website/src/components/status-banner/status-banner.tsx index bcbb67824..e45c5b744 100644 --- a/apps/website/src/components/status-banner/status-banner.tsx +++ b/apps/website/src/components/status-banner/status-banner.tsx @@ -77,7 +77,7 @@ export const StatusBanner = component$(({ status }: StatusBannerProps) => { <>
      • ); @@ -39,7 +37,7 @@ export const FeatureList = component$((props: FeatureListProps) => { key={descriptor} class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800" > - + {descriptor} @@ -56,7 +54,7 @@ export const FeatureList = component$((props: FeatureListProps) => { key={descriptor} class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800" > - + {descriptor} diff --git a/apps/website/src/components/header/header.tsx b/apps/website/src/components/header/header.tsx index 5f4ed469a..5cabf5922 100644 --- a/apps/website/src/components/header/header.tsx +++ b/apps/website/src/components/header/header.tsx @@ -13,18 +13,14 @@ import { useLocation } from '@builder.io/qwik-city'; // eslint-disable-next-line @nx/enforce-module-boundaries // eslint-disable-next-line @nx/enforce-module-boundaries import { version as styledKitVersion } from '../../../../../packages/kit-styled/package.json'; -import { CloseIcon } from '../icons/CloseIcon'; import { GitHubIcon } from '../icons/GitHubIcon'; -import { MenuIcon } from '../icons/MenuIcon'; -import { MoonIcon } from '../icons/MoonIcon'; -import { SunIcon } from '../icons/SunIcon'; import { LogoIcon, LogoWithBorders } from '../icons/logo'; import { useTheme } from '@qwik-ui/themes'; import { Modal } from '@qwik-ui/headless'; import { useAppState } from '~/_state/use-app-state'; -import { LuX } from '@qwikest/icons/lucide'; +import { LuMenu, LuMoon, LuSun, LuX } from '@qwikest/icons/lucide'; import { DocsNavigation } from '../navigation-docs/navigation-docs'; import { useKitMenuItems } from '~/routes/layout'; import { cn } from '@qwik-ui/utils'; @@ -193,7 +189,7 @@ export default component$(({ showVersion = false }: HeaderProps) => { look="ghost" class="flex lg:hidden" > - {isSidebarOpenedSig.value ? : } +
@@ -243,10 +239,10 @@ const DarkModeToggle = component$>(({ ...props }) => { } >
- +
); diff --git a/apps/website/src/components/icons/Check.tsx b/apps/website/src/components/icons/Check.tsx deleted file mode 100644 index 26f069908..000000000 --- a/apps/website/src/components/icons/Check.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { PropsOf } from '@builder.io/qwik'; - -export function CheckIcon(props: PropsOf<'svg'>, key: string) { - return ( - - - - - - - ); -} diff --git a/apps/website/src/components/icons/ClipboardCheck.tsx b/apps/website/src/components/icons/ClipboardCheck.tsx deleted file mode 100644 index cfa50978c..000000000 --- a/apps/website/src/components/icons/ClipboardCheck.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export const ClipboardCheck = () => ( - - - - - -); diff --git a/apps/website/src/components/icons/CloseIcon.tsx b/apps/website/src/components/icons/CloseIcon.tsx deleted file mode 100644 index 050bf4922..000000000 --- a/apps/website/src/components/icons/CloseIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export const CloseIcon = () => ( - -); diff --git a/apps/website/src/components/icons/CollapsibleIcon.tsx b/apps/website/src/components/icons/CollapsibleIcon.tsx deleted file mode 100644 index d651be6aa..000000000 --- a/apps/website/src/components/icons/CollapsibleIcon.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { PropsOf } from '@builder.io/qwik'; - -export function CollapsibleIcon(props: PropsOf<'svg'>) { - return ( - - - - ); -} diff --git a/apps/website/src/components/icons/CopyIcon.tsx b/apps/website/src/components/icons/CopyIcon.tsx deleted file mode 100644 index f5f67caea..000000000 --- a/apps/website/src/components/icons/CopyIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export const CopyIcon = () => ( - - - -); diff --git a/apps/website/src/components/icons/Issues.tsx b/apps/website/src/components/icons/Issues.tsx deleted file mode 100644 index fe51305e2..000000000 --- a/apps/website/src/components/icons/Issues.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { PropsOf } from '@builder.io/qwik'; - -export function IssueIcon(props: PropsOf<'svg'>, key: string) { - return ( - - - - - - - ); -} diff --git a/apps/website/src/components/icons/MenuIcon.tsx b/apps/website/src/components/icons/MenuIcon.tsx deleted file mode 100644 index e7d762c42..000000000 --- a/apps/website/src/components/icons/MenuIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export const MenuIcon = () => ( - -); diff --git a/apps/website/src/components/icons/MoonIcon.tsx b/apps/website/src/components/icons/MoonIcon.tsx deleted file mode 100644 index 8427abb8a..000000000 --- a/apps/website/src/components/icons/MoonIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const MoonIcon = () => ( - -); diff --git a/apps/website/src/components/icons/Roadmap.tsx b/apps/website/src/components/icons/Roadmap.tsx deleted file mode 100644 index caff63818..000000000 --- a/apps/website/src/components/icons/Roadmap.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { QwikIntrinsicElements } from '@builder.io/qwik'; - -export function Roadmap(props: QwikIntrinsicElements['svg'], key: string) { - return ( - - - - - - - ); -} -export default Roadmap; diff --git a/apps/website/src/components/icons/SunIcon.tsx b/apps/website/src/components/icons/SunIcon.tsx deleted file mode 100644 index d8cb3f0d1..000000000 --- a/apps/website/src/components/icons/SunIcon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export const SunIcon = () => ( - -); diff --git a/apps/website/src/components/icons/ThemeIcon.tsx b/apps/website/src/components/icons/ThemeIcon.tsx deleted file mode 100644 index beb404364..000000000 --- a/apps/website/src/components/icons/ThemeIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export const ThemeIcon = () => ( - - - -); diff --git a/apps/website/src/components/icons/double-chevron.tsx b/apps/website/src/components/icons/double-chevron.tsx deleted file mode 100644 index 0ea9f5570..000000000 --- a/apps/website/src/components/icons/double-chevron.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { PropsOf } from '@builder.io/qwik'; - -export function DoubleChevron(props: PropsOf<'svg'>, key: string) { - return ( - - - - ); -} From 0254c4f0a4e9bdf5896d5d588036ec975549ceff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=AFeul?= <45822175+maiieul@users.noreply.github.com> Date: Fri, 11 Oct 2024 21:50:12 +0200 Subject: [PATCH 27/27] chore(robot.txt): add aloglia crawler (#989) --- apps/website/public/robots.txt | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/website/public/robots.txt b/apps/website/public/robots.txt index e69de29bb..63fa97ae7 100644 --- a/apps/website/public/robots.txt +++ b/apps/website/public/robots.txt @@ -0,0 +1,6 @@ +User-agent: * +Allow: / + +# Algolia-Crawler-Verif: B07EC35A2AC0DA67 + +Sitemap: https://qwikui.com/sitemap.xml \ No newline at end of file