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}
+ </>
+ )
+}