use <sl-copy-button>

* remove extra react wrapper, upgrade to v2 of @lit-labs/react, call define in module.

* add changelog entry

* prettier

docs/_utilities/copy-code-buttons.cjs

@@ -1,3 +1,5 @@
+let codeBlockId = 0;
+
 /**
  * Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
  * document will be returned with the appropriate DOM manipulations.
@@ -5,19 +7,14 @@
 module.exports = function (doc) {
   doc.querySelectorAll('pre > code').forEach(code => {
     const pre = code.closest('pre');
-    const button = doc.createElement('button');
-    button.setAttribute('type', 'button');
-    button.classList.add('copy-code-button');
-    button.setAttribute('aria-label', 'Copy');
-    button.innerHTML = `
-      <svg class="copy-code-button__copy-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16" part="svg">
-        <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"></path>
-      </svg>
+    const button = doc.createElement('sl-copy-button');
 
-      <svg class="copy-code-button__copied-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16" part="svg">
-        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
-      </svg>
-    `;
+    if (!code.id) {
+      code.id = `code-block-${++codeBlockId}`;
+    }
+
+    button.classList.add('copy-code-button');
+    button.setAttribute('from', code.id);
 
     pre.append(button);
   });

docs/assets/scripts/docs.js

@@ -163,32 +163,6 @@
   });
 })();
 
-//
-// Copy code buttons
-//
-(() => {
-  document.addEventListener('click', event => {
-    const button = event.target.closest('.copy-code-button');
-    const pre = button?.closest('pre');
-    const code = pre?.querySelector('code');
-    const copyIcon = button?.querySelector('.copy-code-button__copy-icon');
-    const copiedIcon = button?.querySelector('.copy-code-button__copied-icon');
-
-    if (button && code) {
-      navigator.clipboard.writeText(code.innerText);
-      copyIcon.style.display = 'none';
-      copiedIcon.style.display = 'inline';
-      button.classList.add('copy-code-button--copied');
-
-      setTimeout(() => {
-        copyIcon.style.display = 'inline';
-        copiedIcon.style.display = 'none';
-        button.classList.remove('copy-code-button--copied');
-      }, 1000);
-    }
-  });
-})();
-
 //
 // Smooth links
 //

docs/assets/styles/docs.css

@@ -506,31 +506,31 @@ pre .token.italic {
 
 /* Copy code button */
 .copy-code-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  background: var(--sl-color-neutral-0);
-  border-radius: calc(var(--docs-border-radius) * 0.875);
-  border: solid 1px var(--sl-color-neutral-200);
+  top: 0;
+  right: 0;
+  white-space: normal;
   color: var(--sl-color-neutral-800);
-  text-transform: uppercase;
-  padding: 0.5rem;
-  margin: 0;
-  cursor: pointer;
-  transition: 100ms opacity, 100ms scale;
+  transition: 150ms opacity, 150ms scale;
 }
 
-.copy-code-button svg {
-  width: 1rem;
-  height: 1rem;
+.copy-code-button::part(button) {
+  background-color: var(--sl-color-neutral-50);
+  border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
+  padding: 0.75rem;
+}
+
+.copy-code-button::part(button):hover {
+  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);
+}
+
+.copy-code-button::part(button):active {
+  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);
 }
 
 pre .copy-code-button {
   opacity: 0;
-  scale: 0.9;
+  scale: 0.75;
 }
 
 pre:hover .copy-code-button,
@@ -539,13 +539,6 @@ pre:hover .copy-code-button,
   scale: 1;
 }
 
-pre:hover .copy-code-button:hover,
-pre:hover .copy-code-button--copied {
-  background: var(--sl-color-neutral-200);
-  border-color: var(--sl-color-neutral-300);
-  color: var(--sl-color-neutral-900);
-}
-
 /* Callouts */
 .callout {
   position: relative;

docs/pages/resources/changelog.md

@@ -20,6 +20,8 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a regression that caused `<sl-radio-button>` to render incorrectly with gaps [#1523]
 - Improved expand/collapse behavior of `<sl-tree>` to work more like users expect [#1521]
 - Improved `<sl-menu-item>` so labels truncate properly instead of getting chopped and overflowing
+- Removed the extra `React.Component` around `@lit-labs/react` wrapper. [#1531]
+- Upgrade `@lit-labs/react` to v2.0.1. [#1531]
 
 ## 2.7.0
 

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@ctrl/tinycolor": "^3.5.0",
         "@floating-ui/dom": "^1.2.1",
-        "@lit-labs/react": "^1.2.1",
+        "@lit-labs/react": "^2.0.1",
         "@shoelace-style/animations": "^1.1.0",
         "@shoelace-style/localize": "^3.1.1",
         "composed-offset-position": "^0.0.4",
@@ -1474,9 +1474,12 @@
       }
     },
     "node_modules/@lit-labs/react": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
-      "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
+      "peerDependencies": {
+        "@types/react": "17 || 18"
+      }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
       "version": "1.1.1",
@@ -2270,8 +2273,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.7",
@@ -2289,7 +2291,6 @@
       "version": "18.0.26",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
       "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2317,8 +2318,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.0",
@@ -5685,8 +5685,7 @@
     "node_modules/csstype": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
     },
     "node_modules/custom-element-jet-brains-integration": {
       "version": "1.1.0",
@@ -18291,9 +18290,10 @@
       }
     },
     "@lit-labs/react": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
-      "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
+      "requires": {}
     },
     "@lit-labs/ssr-dom-shim": {
       "version": "1.1.1",
@@ -18998,8 +18998,7 @@
     "@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
     "@types/qs": {
       "version": "6.9.7",
@@ -19017,7 +19016,6 @@
       "version": "18.0.26",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
       "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -19045,8 +19043,7 @@
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "@types/semver": {
       "version": "7.5.0",
@@ -21514,8 +21511,7 @@
     "csstype": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
     },
     "custom-element-jet-brains-integration": {
       "version": "1.1.0",

package.json

@@ -62,7 +62,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^3.5.0",
     "@floating-ui/dom": "^1.2.1",
-    "@lit-labs/react": "^1.2.1",
+    "@lit-labs/react": "^2.0.1",
     "@shoelace-style/animations": "^1.1.0",
     "@shoelace-style/localize": "^3.1.1",
     "composed-offset-position": "^0.0.4",

scripts/make-react.js

@@ -51,18 +51,11 @@ components.map(component => {
       ${eventImports}
       ${eventExports}
 
-      export type ForwardComponent<
-        Element extends HTMLElement,
-        ReactComponent extends React.ElementType
-      > = React.JSXElementConstructor<
-        React.ComponentPropsWithoutRef<ReactComponent> & {
-          ref?: React.ForwardedRef<Element>;
-        }
-      > & { displayName?: string }
-
       const tagName = '${component.tagName}'
+      Component.define('${component.tagName}')
 
-      const component = createComponent({
+      ${jsDoc}
+      const reactWrapper = createComponent({
         tagName,
         elementClass: Component,
         react: React,
@@ -72,20 +65,7 @@ components.map(component => {
         displayName: "${component.name}"
       })
 
-      ${jsDoc}
-      class SlComponent extends React.Component<Parameters<typeof component>[0]> {
-        constructor (...args: Parameters<typeof component>) {
-          super(...args)
-          Component.define(tagName)
-        }
-
-        render () {
-          const { children, ...props } = this.props
-          return React.createElement(component, props, children)
-        }
-      }
-
-      export default SlComponent as ForwardComponent<Component, typeof SlComponent>;
+      export default reactWrapper
     `,
     Object.assign(prettierConfig, {
       parser: 'babel-ts'