Merge pull request #26 from solidjs-community/develop

chore: release menu package

.github/workflows/release.yml

@@ -0,0 +1,41 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 7.0.0-rc.2
+
+      - name: Setup Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: pnpm
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,6 +1,9 @@
 # Created by https://www.toptal.com/developers/gitignore/api/macos,node
 # Edit at https://www.toptal.com/developers/gitignore?templates=macos,node
 
+# IntelliJ
+.idea/**
+
 # Turborepo
 .turbo
 build/**

README.md

@@ -6,6 +6,8 @@
 
 A library of high-quality primitives that help you build accessible user interfaces with SolidJS.
 
+> ⚠️ Solid Aria is in early stage and **not ready** for production ⚠️
+
 ## Primitives
 
 - [@solid-aria/primitives](./packages/primitives/) - Export all Solid Aria primitives in a single convenient package.
@@ -17,8 +19,10 @@ A library of high-quality primitives that help you build accessible user interfa
 ### Collections
 
 - [collection](./packages/collection/) - Primitives for dealing with collection of items.
+- [list](./packages/list/) - Primitives for managing list collections.
 - [listbox](./packages/listbox/) - Provides the behavior and accessibility implementation for listbox component.
 - [selection](./packages/selection/) - Primitives for managing selection in collections.
+- [tree](./packages/tree/) - Primitives for managing tree collections.
 
 ### Interactions
 
@@ -41,6 +45,7 @@ A library of high-quality primitives that help you build accessible user interfa
 ### Overlays
 
 - [dialog](./packages/dialog/) - Provides the behavior and accessibility implementation for a dialog component.
+- [menu](./packages/menu/) - Provides the behavior and accessibility implementation for a menu component.
 - [overlays](./packages/overlays/) - Provides the behavior and accessibility implementation for overlay components such as dialogs, popovers, and menus.
 
 ### Utilities
@@ -64,7 +69,7 @@ A library of high-quality primitives that help you build accessible user interfa
 - [ ] List
 - [x] Listbox
 - [ ] LiveAnnouncer
-- [ ] Menu
+- [x] Menu
 - [ ] Meter
 - [ ] NumberField
 - [x] Overlays

package.json

@@ -47,8 +47,9 @@
     "@commitlint/cli": "16.2.3",
     "@commitlint/config-conventional": "16.2.1",
     "@commitlint/cz-commitlint": "16.2.3",
-    "@solid-primitives/props": "2.1.2",
-    "@solid-primitives/refs": "0.2.0",
+    "@solid-primitives/event-listener": "2.1.0",
+    "@solid-primitives/keyed": "1.0.0",
+    "@solid-primitives/props": "2.1.4",
     "@solid-primitives/utils": "2.0.3",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.4",
@@ -58,7 +59,7 @@
     "@types/testing-library__jest-dom": "5.14.3",
     "@typescript-eslint/eslint-plugin": "5.20.0",
     "@typescript-eslint/parser": "5.20.0",
-    "babel-preset-solid": "1.3.13",
+    "babel-preset-solid": "1.4.4",
     "commitizen": "4.2.4",
     "eslint": "8.12.0",
     "eslint-config-prettier": "8.5.0",
@@ -67,15 +68,15 @@
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "eslint-plugin-solid": "0.4.6",
+    "eslint-plugin-solid": "0.6.1",
     "husky": "7.0.4",
     "inquirer": "8.2.2",
     "jest": "27.5.1",
     "lint-staged": "12.3.7",
     "prettier": "2.6.2",
-    "rollup": "2.73.0",
+    "rollup": "2.75.6",
     "rollup-preset-solid": "1.4.0",
-    "solid-js": "1.4.3",
+    "solid-js": "1.4.4",
     "solid-testing-library": "0.3.0",
     "sort-package-json": "1.55.0",
     "ts-jest": "27.1.4",

packages/breadcrumbs/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @solid-aria/breadcrumbs
 
+## 0.1.0
+
+### Minor Changes
+
+- dcfaa90: Release menu package, breaking change all primitves return plain object props instead of memoized value
+
+### Patch Changes
+
+- Updated dependencies [dcfaa90]
+  - @solid-aria/link@0.1.0
+  - @solid-aria/types@0.1.0
+  - @solid-aria/utils@0.1.0
+
 ## 0.0.5
 
 ### Patch Changes

packages/breadcrumbs/README.md

@@ -58,7 +58,7 @@ function Breadcrumbs(props: AriaBreadcrumbsProps) {
   const { navProps } = createBreadcrumbs(props);
 
   return (
-    <nav {...navProps()}>
+    <nav {...navProps}>
       <ol style={{ display: "flex", "list-style": "none", margin: 0, padding: 0 }}>
         {props.children}
       </ol>
@@ -71,12 +71,12 @@ function BreadcrumbItem(props: AriaBreadcrumbItemProps) {
 
   props = mergeProps({ elementType: "span" }, props);
 
-  const { itemProps } = createBreadcrumbItem<"span", HTMLSpanElement>(props, () => ref);
+  const { itemProps } = createBreadcrumbItem<HTMLSpanElement>(props, () => ref);
 
   return (
     <li>
       <span
-        {...itemProps()}
+        {...itemProps}
         ref={ref}
         style={{
           color: "blue",
@@ -124,7 +124,7 @@ function Breadcrumbs(props: AriaBreadcrumbsProps) {
   const { navProps } = createBreadcrumbs(props);
 
   return (
-    <nav {...navProps()}>
+    <nav {...navProps}>
       <ol style={{ display: "flex", "list-style": "none", margin: 0, padding: 0 }}>
         {props.children}
       </ol>
@@ -142,7 +142,7 @@ function BreadcrumbItem(props: BreadcrumbItemProps) {
   return (
     <li>
       <a
-        {...itemProps()}
+        {...itemProps}
         ref={ref}
         href={props.href}
         style={{
@@ -190,7 +190,7 @@ function Breadcrumbs(props: AriaBreadcrumbsProps) {
   const { navProps } = createBreadcrumbs(props);
 
   return (
-    <nav {...navProps()}>
+    <nav {...navProps}>
       <ol style={{ display: "flex", "list-style": "none", margin: 0, padding: 0 }}>
         {props.children}
       </ol>
@@ -220,7 +220,7 @@ function BreadcrumbItem(props: BreadcrumbItemProps) {
         fallback={
           <>
             <a
-              {...itemProps()}
+              {...itemProps}
               ref={ref}
               href={props.href}
               style={{
@@ -238,7 +238,7 @@ function BreadcrumbItem(props: BreadcrumbItemProps) {
         }
       >
         <h3
-          {...itemProps()}
+          {...itemProps}
           ref={ref}
           style={{
             margin: 0,

packages/breadcrumbs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solid-aria/breadcrumbs",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "private": false,
   "description": "Primitives for building accessible breadcrumbs component.",
   "keywords": [
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@solid-primitives/utils": "^2.0.1",
-    "solid-js": "^1.4.3"
+    "solid-js": "^1.4.4"
   },
   "publishConfig": {
     "access": "public"

packages/breadcrumbs/src/createBreadcrumbItem.ts

@@ -16,7 +16,7 @@
  */
 
 import { AriaLinkProps, createLink } from "@solid-aria/link";
-import { DOMElements, DOMProps } from "@solid-aria/types";
+import { DOMProps } from "@solid-aria/types";
 import { Accessor, createMemo, JSX, mergeProps, splitProps } from "solid-js";
 
 export interface AriaBreadcrumbItemProps extends AriaLinkProps, DOMProps {
@@ -48,21 +48,21 @@ export interface AriaBreadcrumbItemProps extends AriaLinkProps, DOMProps {
   children?: JSX.Element;
 }
 
-interface BreadcrumbItemAria<T extends DOMElements> {
+interface BreadcrumbItemAria<T extends HTMLElement> {
   /**
    * Props for the breadcrumb item link element.
    */
-  itemProps: Accessor<JSX.IntrinsicElements[T]>;
+  itemProps: JSX.HTMLAttributes<T>;
 }
 
 /**
  * Provides the behavior and accessibility implementation for an in a breadcrumbs component.
  * See `useBreadcrumbs` for details about breadcrumbs.
  */
-export function createBreadcrumbItem<
-  T extends DOMElements = "a",
-  RefElement extends HTMLElement = HTMLAnchorElement
->(props: AriaBreadcrumbItemProps, ref: Accessor<RefElement | undefined>): BreadcrumbItemAria<T> {
+export function createBreadcrumbItem<T extends HTMLElement = HTMLAnchorElement>(
+  props: AriaBreadcrumbItemProps,
+  ref: Accessor<T | undefined>
+): BreadcrumbItemAria<T> {
   const defaultProps: AriaBreadcrumbItemProps = {
     elementType: "a"
   };
@@ -88,32 +88,30 @@ export function createBreadcrumbItem<
 
   const { linkProps } = createLink(createLinkProps, ref);
 
-  const isHeading = createMemo(() => /^h[1-6]$/.test(local.elementType ?? ""));
+  const isHeading = () => /^h[1-6]$/.test(local.elementType ?? "");
 
-  const itemProps = createMemo(() => {
-    let itemProps: JSX.IntrinsicElements[T] = {
-      "aria-disabled": local.isDisabled
-    };
-
-    if (!isHeading()) {
-      itemProps = {
-        ...itemProps,
-        ...linkProps()
-      };
-    }
-
-    if (local.isCurrent) {
-      itemProps = {
-        ...itemProps,
-        "aria-current": local["aria-current"] || "page",
+  const baseItemProps: JSX.HTMLAttributes<T> = {
+    get "aria-disabled"() {
+      return local.isDisabled;
+    },
+    get "aria-current"() {
+      return local.isCurrent ? local["aria-current"] || "page" : undefined;
+    },
+    get tabIndex() {
+      if (local.isCurrent) {
         // isCurrent sets isDisabled === true for the current item,
         // so we have to restore the tabIndex in order to support autoFocus.
-        tabIndex: props.autoFocus ? -1 : undefined
-      };
+        return props.autoFocus ? -1 : undefined;
+      }
+
+      return !isHeading() ? linkProps.tabIndex : undefined;
     }
+  };
 
-    return itemProps;
-  });
+  const itemProps = mergeProps(
+    createMemo(() => (!isHeading() ? linkProps : {})),
+    baseItemProps
+  );
 
   return { itemProps };
 }

packages/breadcrumbs/src/createBreadcrumbs.ts

@@ -17,7 +17,7 @@
 
 import { AriaLabelingProps, DOMProps } from "@solid-aria/types";
 import { filterDOMProps } from "@solid-aria/utils";
-import { Accessor, createMemo, JSX, splitProps } from "solid-js";
+import { createMemo, JSX, mergeProps } from "solid-js";
 
 export interface AriaBreadcrumbsProps extends DOMProps, AriaLabelingProps {
   /**
@@ -35,20 +35,18 @@ interface BreadcrumbsAria {
   /**
    * Props for the breadcrumbs navigation element.
    */
-  navProps: Accessor<JSX.HTMLAttributes<HTMLElement>>;
+  navProps: JSX.HTMLAttributes<any>;
 }
 
 /**
  * Provides the behavior and accessibility implementation for a breadcrumbs component.
  * Breadcrumbs display a heirarchy of links to the current page or resource in an application.
  */
 export function createBreadcrumbs(props: AriaBreadcrumbsProps): BreadcrumbsAria {
-  const [local, others] = splitProps(props, ["aria-label"]);
+  // eslint-disable-next-line solid/reactivity
+  props = mergeProps({ "aria-label": "Breadcrumbs" }, props);
 
-  const navProps = createMemo(() => ({
-    ...filterDOMProps(others, { labelable: true }),
-    "aria-label": local["aria-label"] || "Breadcrumbs"
-  }));
+  const navProps = mergeProps(createMemo(() => filterDOMProps(props, { labelable: true })));
 
   return { navProps };
 }

packages/breadcrumbs/test/createBreadcrumbItem.test.ts

@@ -8,10 +8,10 @@ describe("createBreadcrumbItem", () => {
       const ref = document.createElement("span");
       const { itemProps } = createBreadcrumbItem({ elementType: "span" }, () => ref);
 
-      expect(itemProps().tabIndex).toBe(0);
-      expect(itemProps().role).toBe("link");
-      expect(itemProps()["aria-disabled"]).toBeUndefined();
-      expect(typeof itemProps().onKeyDown).toBe("function");
+      expect(itemProps.tabIndex).toBe(0);
+      expect(itemProps.role).toBe("link");
+      expect(itemProps["aria-disabled"]).toBeUndefined();
+      expect(typeof itemProps.onKeyDown).toBe("function");
 
       dispose();
     });
@@ -25,9 +25,9 @@ describe("createBreadcrumbItem", () => {
         () => ref
       );
 
-      expect(itemProps().tabIndex).toBeUndefined();
-      expect(itemProps().role).toBe("link");
-      expect(itemProps()["aria-current"]).toBe("page");
+      expect(itemProps.tabIndex).toBeUndefined();
+      expect(itemProps.role).toBe("link");
+      expect(itemProps["aria-current"]).toBe("page");
 
       dispose();
     });
@@ -41,9 +41,9 @@ describe("createBreadcrumbItem", () => {
         () => ref
       );
 
-      expect(itemProps().tabIndex).toBeUndefined();
-      expect(itemProps().role).toBe("link");
-      expect(itemProps()["aria-disabled"]).toBe(true);
+      expect(itemProps.tabIndex).toBeUndefined();
+      expect(itemProps.role).toBe("link");
+      expect(itemProps["aria-disabled"]).toBe(true);
 
       dispose();
     });