Merge branch 'main' into progress

Author: zaynet

.changeset/little-llamas-brake.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+Enable select item indicator styling by passing down properties

.changeset/rich-windows-admire.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: Only run single modal close step

.github/actions/setup/action.yml

@@ -25,7 +25,7 @@ runs:
     - name: Setup pnpm
       uses: pnpm/[email protected]
       with:
-        version: 8
+        version: 9.3.0
 
     - name: Use Node
       uses: actions/setup-node@v4

.github/workflows/test.yml

@@ -40,6 +40,6 @@ jobs:
         with:
           node_version: 20
       - run: pnpm build.headless
-      - run: pnpx pkg-pr-new publish ./dist/packages/kit-headless
+      - run: pnpx pkg-pr-new publish --compact ./dist/packages/kit-headless
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKEN is provided automatically in any repository

.gitignore

@@ -13,6 +13,7 @@ node_modules
 .rollup.cache
 tsconfig.tsbuildinfo
 .nx/cache
+.nx/workspace-data
 
 # IDE - VSCode
 .vscode/*

.npmignore

@@ -1,3 +1,4 @@
 node_modules
 .nx/cache
+.nx/workspace-data
 coverage

apps/website/src/components/toc/toc.tsx

@@ -1,33 +1,117 @@
-import {
-  $,
-  QwikIntrinsicElements,
-  component$,
-  useSignal,
-  useVisibleTask$,
-} from '@builder.io/qwik';
 import { ContentHeading } from '@builder.io/qwik-city';
 import { cn } from '@qwik-ui/utils';
+import { component$, useSignal, useVisibleTask$, $ } from '@builder.io/qwik';
 
 export const DashboardTableOfContents = component$(
   ({ headings }: { headings: ContentHeading[] }) => {
-    const itemIds = headings.map((item) => item.id);
-    const activeHeading = useActiveItem(itemIds);
-
     if (headings.length === 0) {
       return null;
     }
-
     return (
       <div class="space-y-2">
         <div class="font-medium">On This Page</div>
-        <Tree headings={headings} activeItem={activeHeading.value} />
+        <TableOfContent headings={headings} />
       </div>
     );
   },
 );
 
+type TableOfContentProps = { headings: ContentHeading[] };
+interface Node extends ContentHeading {
+  level: number;
+  children: Array<Node>;
+  activeItem: string;
+}
+type Tree = Array<Node>;
+export const TableOfContent = component$<TableOfContentProps>((props) => {
+  const inifiniteStopper = props.headings.map((heading) => {
+    return { text: heading.text, id: heading.id, level: heading.level };
+  });
+  const itemIds = props.headings.map((item) => item.id);
+  const activeHeading = useActiveItem(itemIds);
+  const tree = getTree(inifiniteStopper);
+  return <RecursiveJSX tree={tree[0]} activeItem={activeHeading.value} />;
+});
+
+function deltaToStrg(
+  currNode: Node,
+  nextNode: Node,
+): 'same level' | 'down one level' | 'up one level' {
+  const delta = currNode.level - nextNode.level;
+  if (delta === 1) {
+    return 'up one level';
+  }
+  if (delta === -1) {
+    return 'down one level';
+  }
+
+  if (delta === 0) {
+    return 'same level';
+  }
+  throw new Error(
+    `bad headings: are not continous from: #${currNode.id} to #${nextNode.id}`,
+  );
+}
+function getTree(nodes: ContentHeading[]) {
+  let currNode = nodes[0] as Node;
+  currNode.children = [];
+  const tree = [currNode];
+  const childrenMap = new Map<number, Tree>();
+  childrenMap.set(currNode.level, currNode.children);
+  for (let index = 1; index < nodes.length; index++) {
+    const nextNode = nodes[index] as Node;
+    nextNode.children = [];
+    childrenMap.set(nextNode.level, nextNode.children);
+    const deltaStrg = deltaToStrg(currNode, nextNode);
+    switch (deltaStrg) {
+      case 'up one level': {
+        const grandParent = childrenMap.get(currNode.level - 2);
+        grandParent?.push(nextNode);
+        break;
+      }
+      case 'same level': {
+        const parent = childrenMap.get(currNode.level - 1);
+        parent?.push(nextNode);
+        break;
+      }
+      case 'down one level': {
+        currNode.children.push(nextNode);
+        break;
+      }
+      default:
+        break;
+    }
+    currNode = nextNode;
+  }
+  return tree;
+}
+type RecursiveJSXProps = {
+  tree: Node;
+  activeItem: string;
+  limit?: number;
+};
+const RecursiveJSX = component$<RecursiveJSXProps>(({ tree, activeItem, limit = 3 }) => {
+  const currNode: Node = tree;
+  return currNode?.children?.length && currNode.level < limit ? (
+    <ul class={cn('m-0 list-none', { 'pl-4': currNode.level !== 1 })}>
+      {currNode.children.map((childNode) => {
+        return (
+          <li key={currNode.id} class={cn('mt-0 list-none pt-2')}>
+            <Anchor node={childNode} activeItem={activeItem} />
+            {childNode.children.length ? (
+              <>
+                <RecursiveJSX tree={childNode} activeItem={activeItem} />
+              </>
+            ) : null}
+          </li>
+        );
+      })}
+    </ul>
+  ) : null;
+});
+
 const useActiveItem = (itemIds: string[]) => {
-  const activeId = useSignal<string>();
+  const activeId = useSignal<string>('');
 
   useVisibleTask$(({ cleanup }) => {
     const observer = new IntersectionObserver(
@@ -60,45 +144,35 @@ const useActiveItem = (itemIds: string[]) => {
 
   return activeId;
 };
-
-type TreeProps = QwikIntrinsicElements['ul'] & {
-  headings: ContentHeading[];
-  level?: number;
-  activeItem?: string;
+type AnchorThingProps = {
+  node: Node;
+  activeItem: string;
 };
-
-const Tree = component$<TreeProps>(({ headings, level = 1, activeItem }) => {
-  return headings.length > 0 && level < 3 ? (
-    <ul class={cn('m-0 list-none', { 'pl-4': level !== 1 })}>
-      {headings.map((heading) => {
-        return (
-          <li key={heading.id} class={cn('mt-0 pt-2')}>
-            <a
-              href={`#${heading.id}`}
-              onClick$={[
-                $(() => {
-                  const element = document.getElementById(heading.id);
-                  if (element) {
-                    const navbarHeight = 90;
-                    const elementPosition =
-                      element.getBoundingClientRect().top + window.scrollY - navbarHeight;
-                    window.scrollTo({ top: elementPosition, behavior: 'auto' });
-                  }
-                }),
-              ]}
-              class={cn(
-                heading.level > 2 ? 'ml-4' : null,
-                'inline-block no-underline transition-colors hover:text-foreground',
-                heading.id === `${activeItem}`
-                  ? 'font-medium text-foreground'
-                  : 'text-muted-foreground',
-              )}
-            >
-              {heading.text}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  ) : null;
+export const Anchor = component$<AnchorThingProps>((props) => {
+  const currNode = props.node;
+  const activeItem = props.activeItem;
+  const isActiveItem = currNode.id === `${activeItem}`;
+  return (
+    <a
+      href={`#${currNode.id}`}
+      onClick$={[
+        $(() => {
+          const element = document.getElementById(currNode.id);
+          if (element) {
+            const navbarHeight = 90;
+            const elementPosition =
+              element.getBoundingClientRect().top + window.scrollY - navbarHeight;
+            window.scrollTo({ top: elementPosition, behavior: 'auto' });
+          }
+        }),
+      ]}
+      class={cn(
+        currNode.level > 2 ? 'ml-4' : null,
+        'inline-block no-underline transition-colors hover:text-foreground',
+        isActiveItem ? 'font-medium text-foreground' : 'text-muted-foreground',
+      )}
+    >
+      {currNode.text}
+    </a>
+  );
 });

apps/website/src/routes/docs/headless/separator/index.mdx

@@ -14,7 +14,7 @@ A separator separates and distinguishes sections of content or groups of menuite
 
 Qwik UI's Separator implementation follows [WAI-Aria separator role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator). This separator is static and should not be used for interactivity.
 
-##### ✨ Features
+## ✨ Features
 
 - Supports both horizontal and vertical orientation
 

apps/website/src/routes/docs/styled/alert/index.mdx

@@ -87,7 +87,7 @@ import { Alert } from '~/components/ui';
 
 ```tsx
 <Alert.Root>
-  <Terminal className="h-4 w-4" />
+  <Terminal class="h-4 w-4" />
   <Alert.Title>Heads up!</Alert.Title>
   <Alert.Description>
     You can add components and dependencies to your app using the cli.

apps/website/src/routes/docs/styled/skeleton/index.mdx

@@ -38,7 +38,7 @@ import { Skeleton } from '~/components/ui';
 ```
 
 ```tsx
-<Skeleton className="h-6 w-24 rounded-full" />
+<Skeleton class="h-6 w-24 rounded-full" />
 ```
 
 ## Examples