Breadcrumb overflow behavior

.github/workflows/aat-reports.yml

@@ -27,6 +27,8 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
+      - name: Build react depencencies
+        run: npm run build -w @primer/dynamic-list-element
       - name: Build storybook
         run: npx storybook build
         working-directory: packages/react

.github/workflows/vrt-reports.yml

@@ -27,6 +27,8 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
+      - name: Build react depencencies
+        run: npm run build -w @primer/dynamic-list-element
       - name: Build storybook
         run: npx storybook build
         working-directory: packages/react

package.json

@@ -8,7 +8,7 @@
   ],
   "scripts": {
     "setup": "./script/setup",
-    "build": "npm run build -w rollup-plugin-import-css -w @primer/react",
+    "build": "npm run build -w @primer/dynamic-list-element -w rollup-plugin-import-css -w @primer/react",
     "clean": "npm run clean -ws --if-present",
     "clean:all": "npm run clean && rimraf node_modules packages/*/node_modules examples/*/node_modules",
     "format": "prettier --cache --write '**/*.{js,css,md,mdx,ts,tsx,yml}'",

packages/dynamic-list-element/README.md

@@ -0,0 +1,42 @@
+# @primer/dynamic-list-element
+
+> A custom element for managing dynamic lists of items.
+
+## Getting started
+
+To install `@primer/dynamic-list-element` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @primer/dynamic-list-element
+```
+
+If you prefer [Yarn](https://yarnpkg.com/), use the following command instead:
+
+```bash
+yarn add @primer/dynamic-list-element
+```
+
+## Usage
+
+The `@primer/dynamic-list-element` package provides a custom element for managing dynamic lists of items. To use the element, import the package in your project:
+
+```tsx
+import '@primer/dynamic-list-element'
+```
+
+This will register the following custom elements for you to use:
+
+- `dynamic-list`: the container for your list of items
+- `dynamic-list-item`: an individual item
+- `dynamic-list-trigger`: a way to trigger the display of the list of hidden
+  items
+
+The `dynamic-list` element will dynamically manage the visibility of each child
+`dynamic-list-item` by adding it to slots in the shadow DOM. By default, items
+will be visible. If there is overflow, they will be added to an overflow slot
+that is a `popover` element.
+
+## 🙌 Contributing
+
+We love collaborating with folks inside and outside of GitHub and welcome contributions! If you're interested, check out our [contributing docs](contributor-docs/CONTRIBUTING.md) for more info on how to get started.

packages/dynamic-list-element/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@primer/dynamic-list-element",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/esm/index.d.ts",
+        "require": "./dist/cjs/index.d.cts"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.cjs"
+      },
+      "node": {
+        "import": "./dist/esm/node/index.js",
+        "require": "./dist/cjs/node/index.cjs"
+      },
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "script/build",
+    "type-check": "tsc --noEmit",
+    "watch": "rollup -c --watch"
+  },
+  "dependencies": {
+    "@lit-labs/ssr-dom-shim": "^1.3.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-inject": "^5.0.5",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^6.0.2",
+    "esbuild": "^0.25.3",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.30.1",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "rollup-plugin-typescript2": "^0.36.0"
+  },
+  "sideEffects": [
+    "./src/define.ts",
+    "./src/index.ts",
+    "./dist/esm/define.js",
+    "./dist/esm/index.js",
+    "./dist/cjs/define.cjs",
+    "./dist/cjs/index.cjs",
+    "./dist/esm/node/define.js",
+    "./dist/esm/node/index.js",
+    "./dist/cjs/node/define.cjs",
+    "./dist/cjs/node/index.cjs"
+  ]
+}

packages/dynamic-list-element/rollup.config.js

@@ -0,0 +1,96 @@
+import inject from '@rollup/plugin-inject'
+import replace from '@rollup/plugin-replace'
+import esbuild from 'rollup-plugin-esbuild'
+import typescript from 'rollup-plugin-typescript2'
+import {nodeResolve} from '@rollup/plugin-node-resolve'
+
+const ESM_ONLY = new Set(['@lit-labs/ssr-dom-shim'])
+const external = ['@lit-labs/ssr-dom-shim']
+
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+const config = [
+  {
+    input: ['./src/index.ts'],
+    external,
+    plugins: [nodeResolve(), typescript({tsconfig: 'tsconfig.build.json'}), esbuild()],
+    output: {
+      dir: './dist/esm',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+  {
+    input: ['./src/index.ts'],
+    external: external.filter(dependency => {
+      return ESM_ONLY.has(dependency) === false
+    }),
+    plugins: [nodeResolve(), typescript({tsconfig: 'tsconfig.build.json'}), esbuild()],
+    output: {
+      dir: './dist/cjs',
+      format: 'commonjs',
+      entryFileNames: '[name].cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+  {
+    input: ['./src/index.ts'],
+    external,
+    plugins: [
+      nodeResolve(),
+      esbuild(),
+      // Reference:
+      // https://github.com/lit/lit/blob/5c8b142552542ffa775b74074b8bd16f427a00fa/rollup-common.js#L260-L276
+      inject({
+        HTMLElement: ['@lit-labs/ssr-dom-shim', 'HTMLElement'],
+        customElements: ['@lit-labs/ssr-dom-shim', 'customElements'],
+      }),
+      replace({
+        preventAssignment: true,
+        values: {
+          'extends HTMLElement': 'extends (globalThis.HTMLElement ?? HTMLElement)',
+        },
+      }),
+    ],
+    output: {
+      dir: './dist/esm/node',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+  {
+    input: ['./src/index.ts'],
+    external: external.filter(dependency => {
+      return ESM_ONLY.has(dependency) === false
+    }),
+    plugins: [
+      nodeResolve(),
+      esbuild(),
+      // Reference:
+      // https://github.com/lit/lit/blob/5c8b142552542ffa775b74074b8bd16f427a00fa/rollup-common.js#L260-L276
+      inject({
+        HTMLElement: ['@lit-labs/ssr-dom-shim', 'HTMLElement'],
+        customElements: ['@lit-labs/ssr-dom-shim', 'customElements'],
+      }),
+      replace({
+        preventAssignment: true,
+        values: {
+          'extends HTMLElement': 'extends (globalThis.HTMLElement ?? HTMLElement)',
+        },
+      }),
+    ],
+    output: {
+      dir: './dist/cjs/node',
+      format: 'commonjs',
+      entryFileNames: '[name].cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+]
+
+export default config

packages/dynamic-list-element/script/build

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+npx rollup -c
+
+files=$(find ./dist/cjs -name '*.d.ts')
+
+# Rename *.d.ts to *.d.cts for CommonJS
+for file in $files; do
+  mv -- "$file" "${file%.d.ts}.d.cts"
+done

packages/dynamic-list-element/src/define.ts

@@ -0,0 +1,26 @@
+/* eslint-disable-next-line eslint-comments/no-use */
+/* eslint-disable ssr-friendly/no-dom-globals-in-module-scope */
+
+import {DynamicListElement} from './dynamic-list-element'
+import {DynamicListItemElement} from './dynamic-list-item-element'
+import {DynamicListTriggerElement} from './dynamic-list-trigger-element'
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dynamic-list': DynamicListElement
+    'dynamic-list-item': DynamicListItemElement
+    'dynamic-list-trigger': DynamicListTriggerElement
+  }
+}
+
+if (!customElements.get('dynamic-list')) {
+  customElements.define('dynamic-list', DynamicListElement)
+}
+
+if (!customElements.get('dynamic-list-item')) {
+  customElements.define('dynamic-list-item', DynamicListItemElement)
+}
+
+if (!customElements.get('dynamic-list-trigger')) {
+  customElements.define('dynamic-list-trigger', DynamicListTriggerElement)
+}