feat(live-region): add support for <live-region> element

package.json

@@ -6,22 +6,48 @@
   "module": "lib-esm/index.js",
   "exports": {
     ".": {
+      "node": {
+        "import": "./lib-esm/node/index.js",
+        "require": "./lib/node/index.js"
+      },
       "import": "./lib-esm/index.js",
       "require": "./lib/index.js"
     },
     "./experimental": {
+      "node": {
+        "import": "./lib-esm/node/experimental/index.js",
+        "require": "./lib/node/experimental/index.js"
+      },
       "import": "./lib-esm/experimental/index.js",
       "require": "./lib/experimental/index.js"
     },
     "./drafts": {
+      "node": {
+        "import": "./lib-esm/node/drafts/index.js",
+        "require": "./lib/node/drafts/index.js"
+      },
       "import": "./lib-esm/drafts/index.js",
       "require": "./lib/drafts/index.js"
     },
     "./deprecated": {
+      "node": {
+        "import": "./lib-esm/node/deprecated/index.js",
+        "require": "./lib/node/deprecated/index.js"
+      },
       "import": "./lib-esm/deprecated/index.js",
       "require": "./lib/deprecated/index.js"
     },
     "./lib-esm/*": {
+      "node": {
+        "import": [
+          "./lib-esm/node/*.js",
+          "./lib-esm/node/*/index.js"
+        ],
+        "require": [
+          "./lib/node/*.js",
+          "./lib/node/*/index.js"
+        ]
+      },
       "import": [
         "./lib-esm/*.js",
         "./lib-esm/*/index.js"
@@ -34,7 +60,13 @@
     "./lib-esm/internal/*": null
   },
   "typings": "lib/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/internal/components/LiveRegion/live-region-element/define.ts",
+    "./lib-esm/internal/components/LiveRegion/live-region-element/define.js",
+    "./lib-esm/node/internal/components/LiveRegion/live-region-element/define.js",
+    "./lib/internal/components/LiveRegion/live-region-element/define.js",
+    "./lib/node/internal/components/LiveRegion/live-region-element/define.js"
+  ],
   "scripts": {
     "setup": "./script/setup",
     "build": "./script/build",
@@ -99,6 +131,7 @@
     "@github/paste-markdown": "^1.4.0",
     "@github/relative-time-element": "^4.1.2",
     "@lit-labs/react": "^1.1.1",
+    "@lit-labs/ssr-dom-shim": "1.1.2",
     "@oddbird/popover-polyfill": "^0.3.1",
     "@primer/behaviors": "^1.5.1",
     "@primer/octicons-react": "^19.8.0",
@@ -144,6 +177,7 @@
     "@primer/css": "^21.0.1",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.4",
+    "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-replace": "5.0.2",
     "@rollup/plugin-terser": "0.4.3",

rollup.config.js

@@ -8,6 +8,7 @@ import {visualizer} from 'rollup-plugin-visualizer'
 import postcss from 'rollup-plugin-postcss'
 import MagicString from 'magic-string'
 import packageJson from './package.json'
+import inject from '@rollup/plugin-inject'
 
 const input = new Set([
   // "exports"
@@ -236,6 +237,34 @@ export default [
       preserveModulesRoot: 'src',
     },
   },
+  // ESM + Node.js
+  {
+    ...baseConfig,
+    external: dependencies.map(createPackageRegex),
+    plugins: [
+      ...baseConfig.plugins,
+      // 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({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+        preventAssignment: true,
+        values: {
+          'extends HTMLElement': 'extends (globalThis.HTMLElement ?? HTMLElement)',
+        },
+      }),
+    ],
+    output: {
+      interop: 'auto',
+      dir: 'lib-esm/node',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
 
   // CommonJS
   {
@@ -250,6 +279,35 @@ export default [
       exports: 'auto',
     },
   },
+  // CommonJS + Node.js
+  {
+    ...baseConfig,
+    external: dependencies.filter(name => !ESM_ONLY.has(name)).map(createPackageRegex),
+    plugins: [
+      ...baseConfig.plugins,
+      // 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({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+        preventAssignment: true,
+        values: {
+          'extends HTMLElement': 'extends (globalThis.HTMLElement ?? HTMLElement)',
+        },
+      }),
+    ],
+    output: {
+      interop: 'auto',
+      dir: 'lib/node',
+      format: 'commonjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+      exports: 'auto',
+    },
+  },
 
   // Bundles
   {

src/DataTable/Pagination.tsx

@@ -3,7 +3,7 @@ import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {get} from '../constants'
 import {Button} from '../internal/components/ButtonReset'
-import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
+import {LiveRegionProvider, LiveRegion, Message} from '../internal/components/LiveRegion'
 import {VisuallyHidden} from '../internal/components/VisuallyHidden'
 import {warning} from '../utils/warning'
 import {ResponsiveValue, viewportRanges} from '../hooks/useResponsiveValue'
@@ -211,8 +211,8 @@ export function Pagination({
   }, [showPages])
 
   return (
-    <LiveRegion>
-      <LiveRegionOutlet />
+    <LiveRegionProvider>
+      <LiveRegion />
       <StyledPagination aria-label={label} className="TablePagination" id={id}>
         <Range pageStart={pageStart} pageEnd={pageEnd} totalCount={totalCount} />
         <ol className="TablePaginationSteps" data-hidden-viewport-ranges={getViewportRangesToHidePages().join(' ')}>
@@ -323,7 +323,7 @@ export function Pagination({
           </Step>
         </ol>
       </StyledPagination>
-    </LiveRegion>
+    </LiveRegionProvider>
   )
 }
 

src/SelectPanel/SelectPanel.tsx

@@ -14,7 +14,7 @@ import {useProvidedRefOrCreate} from '../hooks'
 import {FocusZoneHookSettings} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
-import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
+import {LiveRegionProvider, LiveRegion, Message} from '../internal/components/LiveRegion'
 
 interface SelectPanelSingleSelection {
   selected: ItemInput | undefined
@@ -171,7 +171,7 @@ export function SelectPanel({
   }, [inputLabel, textInputProps])
 
   return (
-    <LiveRegion>
+    <LiveRegionProvider>
       <AnchoredOverlay
         renderAnchor={renderMenuAnchor}
         anchorRef={anchorRef}
@@ -187,7 +187,7 @@ export function SelectPanel({
         focusTrapSettings={focusTrapSettings}
         focusZoneSettings={focusZoneSettings}
       >
-        <LiveRegionOutlet />
+        <LiveRegion />
         <Message
           value={
             filterValue === ''
@@ -225,7 +225,7 @@ export function SelectPanel({
           />
         </Box>
       </AnchoredOverlay>
-    </LiveRegion>
+    </LiveRegionProvider>
   )
 }
 

src/Spinner/Spinner.features.stories.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import {ComponentMeta} from '@storybook/react'
 import Spinner from './Spinner'
+import {Button} from '../Button'
+import {useAnnounce} from '../internal/components/LiveRegion'
 
 export default {
   title: 'Components/Spinner/Features',
@@ -10,3 +12,37 @@ export default {
 export const Small = () => <Spinner size="small" />
 
 export const Large = () => <Spinner size="large" />
+
+export const WithLoadingMessage = () => {
+  const [loading, setLoading] = React.useState(false)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const timeoutId = React.useRef<number | null>(null)
+  const announce = useAnnounce()
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutId.current !== null) {
+        clearTimeout(timeoutId.current)
+      }
+    }
+  }, [])
+
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        onClick={() => {
+          setLoading(true)
+          timeoutId.current = window.setTimeout(() => {
+            setLoading(false)
+            buttonRef.current?.focus()
+            announce('Spinner example complete')
+          }, 2500)
+        }}
+      >
+        Start loading
+      </Button>
+      {loading ? <Spinner loadingMessage="Spinner example loading" /> : null}
+    </>
+  )
+}