Merge branch 'main' into global-focus-varsglobal-focus-vars

6 files changed, 116 insertions, 215 deletions

diff --git a/build/build-plugins.js b/build/build-plugins.js
index d1930b855..15a537845 100644
--- a/build/build-plugins.js
+++ b/build/build-plugins.js
@@ -35,6 +35,7 @@ const bsPlugins = {
   Collapse: path.resolve(__dirname, '../js/src/collapse.js'),
   Dropdown: path.resolve(__dirname, '../js/src/dropdown.js'),
   Modal: path.resolve(__dirname, '../js/src/modal.js'),
+  Offcanvas: path.resolve(__dirname, '../js/src/offcanvas.js'),
   Popover: path.resolve(__dirname, '../js/src/popover.js'),
   ScrollSpy: path.resolve(__dirname, '../js/src/scrollspy.js'),
   Tab: path.resolve(__dirname, '../js/src/tab.js'),
@@ -58,81 +59,74 @@ const defaultPluginConfig = {
 }
 
 const getConfigByPluginKey = pluginKey => {
-  if (
-    pluginKey === 'Data' ||
-    pluginKey === 'Manipulator' ||
-    pluginKey === 'EventHandler' ||
-    pluginKey === 'SelectorEngine' ||
-    pluginKey === 'Util' ||
-    pluginKey === 'Sanitizer'
-  ) {
-    return {
-      external: []
+  switch (pluginKey) {
+    case 'Alert':
+    case 'Offcanvas':
+    case 'Tab':
+      return defaultPluginConfig
+
+    case 'Base':
+    case 'Button':
+    case 'Carousel':
+    case 'Collapse':
+    case 'Modal':
+    case 'ScrollSpy': {
+      const config = Object.assign(defaultPluginConfig)
+      config.external.push(bsPlugins.Manipulator)
+      config.globals[bsPlugins.Manipulator] = 'Manipulator'
+      return config
     }
-  }
-
-  if (pluginKey === 'Alert' || pluginKey === 'Tab') {
-    return defaultPluginConfig
-  }
 
-  if (
-    pluginKey === 'Base' ||
-    pluginKey === 'Button' ||
-    pluginKey === 'Carousel' ||
-    pluginKey === 'Collapse' ||
-    pluginKey === 'Modal' ||
-    pluginKey === 'ScrollSpy'
-  ) {
-    const config = Object.assign(defaultPluginConfig)
-    config.external.push(bsPlugins.Manipulator)
-    config.globals[bsPlugins.Manipulator] = 'Manipulator'
-    return config
-  }
+    case 'Dropdown':
+    case 'Tooltip': {
+      const config = Object.assign(defaultPluginConfig)
+      config.external.push(bsPlugins.Manipulator, '@popperjs/core')
+      config.globals[bsPlugins.Manipulator] = 'Manipulator'
+      config.globals['@popperjs/core'] = 'Popper'
+      return config
+    }
 
-  if (pluginKey === 'Dropdown' || pluginKey === 'Tooltip') {
-    const config = Object.assign(defaultPluginConfig)
-    config.external.push(bsPlugins.Manipulator, '@popperjs/core')
-    config.globals[bsPlugins.Manipulator] = 'Manipulator'
-    config.globals['@popperjs/core'] = 'Popper'
-    return config
-  }
+    case 'Popover':
+      return {
+        external: [
+          bsPlugins.Data,
+          bsPlugins.SelectorEngine,
+          bsPlugins.Tooltip
+        ],
+        globals: {
+          [bsPlugins.Data]: 'Data',
+          [bsPlugins.SelectorEngine]: 'SelectorEngine',
+          [bsPlugins.Tooltip]: 'Tooltip'
+        }
+      }
 
-  if (pluginKey === 'Popover') {
-    return {
-      external: [
-        bsPlugins.Data,
-        bsPlugins.SelectorEngine,
-        bsPlugins.Tooltip
-      ],
-      globals: {
-        [bsPlugins.Data]: 'Data',
-        [bsPlugins.SelectorEngine]: 'SelectorEngine',
-        [bsPlugins.Tooltip]: 'Tooltip'
+    case 'Toast':
+      return {
+        external: [
+          bsPlugins.Data,
+          bsPlugins.Base,
+          bsPlugins.EventHandler,
+          bsPlugins.Manipulator
+        ],
+        globals: {
+          [bsPlugins.Data]: 'Data',
+          [bsPlugins.Base]: 'Base',
+          [bsPlugins.EventHandler]: 'EventHandler',
+          [bsPlugins.Manipulator]: 'Manipulator'
+        }
       }
-    }
-  }
 
-  if (pluginKey === 'Toast') {
-    return {
-      external: [
-        bsPlugins.Data,
-        bsPlugins.Base,
-        bsPlugins.EventHandler,
-        bsPlugins.Manipulator
-      ],
-      globals: {
-        [bsPlugins.Data]: 'Data',
-        [bsPlugins.Base]: 'Base',
-        [bsPlugins.EventHandler]: 'EventHandler',
-        [bsPlugins.Manipulator]: 'Manipulator'
+    default:
+      return {
+        external: []
       }
-    }
   }
 }
 
 const utilObjects = new Set([
   'Util',
-  'Sanitizer'
+  'Sanitizer',
+  'Backdrop'
 ])
 
 const domObjects = new Set([
diff --git a/build/change-version.js b/build/change-version.js
index f41f25383..63f231ea2 100644
--- a/build/change-version.js
+++ b/build/change-version.js
@@ -9,11 +9,21 @@
 
 'use strict'
 
-const fs = require('fs')
+const fs = require('fs').promises
 const path = require('path')
-const sh = require('shelljs')
-
-sh.config.fatal = true
+const globby = require('globby')
+
+const VERBOSE = process.argv.includes('--verbose')
+const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run')
+
+// These are the filetypes we only care about replacing the version
+const GLOB = [
+  '**/*.{css,html,js,json,md,scss,txt,yml}'
+]
+const GLOBBY_OPTIONS = {
+  cwd: path.join(__dirname, '..'),
+  gitignore: true
+}
 
 // Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
 function regExpQuote(string) {
@@ -24,89 +34,48 @@ function regExpQuoteReplacement(string) {
   return string.replace(/\$/g, '$$')
 }
 
-const DRY_RUN = false
+async function replaceRecursively(file, oldVersion, newVersion) {
+  const originalString = await fs.readFile(file, 'utf8')
+  const newString = originalString.replace(
+    new RegExp(regExpQuote(oldVersion), 'g'), regExpQuoteReplacement(newVersion)
+  )
 
-function walkAsync(directory, excludedDirectories, fileCallback, errback) {
-  if (excludedDirectories.has(path.parse(directory).base)) {
+  // No need to move any further if the strings are identical
+  if (originalString === newString) {
     return
   }
 
-  fs.readdir(directory, (err, names) => {
-    if (err) {
-      errback(err)
-      return
-    }
-
-    names.forEach(name => {
-      const filepath = path.join(directory, name)
-      fs.lstat(filepath, (err, stats) => {
-        if (err) {
-          process.nextTick(errback, err)
-          return
-        }
-
-        if (stats.isDirectory()) {
-          process.nextTick(walkAsync, filepath, excludedDirectories, fileCallback, errback)
-        } else if (stats.isFile()) {
-          process.nextTick(fileCallback, filepath)
-        }
-      })
-    })
-  })
-}
+  if (VERBOSE) {
+    console.log(`FILE: ${file}`)
+  }
 
-function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) {
-  original = new RegExp(regExpQuote(original), 'g')
-  replacement = regExpQuoteReplacement(replacement)
-  const updateFile = DRY_RUN ?
-    filepath => {
-      if (allowedExtensions.has(path.parse(filepath).ext)) {
-        console.log(`FILE: ${filepath}`)
-      } else {
-        console.log(`EXCLUDED:${filepath}`)
-      }
-    } :
-    filepath => {
-      if (allowedExtensions.has(path.parse(filepath).ext)) {
-        sh.sed('-i', original, replacement, filepath)
-      }
-    }
-
-  walkAsync(directory, excludedDirectories, updateFile, err => {
-    console.error('ERROR while traversing directory!:')
-    console.error(err)
-    process.exit(1)
-  })
+  if (DRY_RUN) {
+    return
+  }
+
+  await fs.writeFile(file, newString, 'utf8')
 }
 
-function main(args) {
-  if (args.length !== 2) {
-    console.error('USAGE: change-version old_version new_version')
+async function main(args) {
+  const [oldVersion, newVersion] = args
+
+  if (!oldVersion || !newVersion) {
+    console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]')
     console.error('Got arguments:', args)
     process.exit(1)
   }
 
-  const oldVersion = args[0]
-  const newVersion = args[1]
-  const EXCLUDED_DIRS = new Set([
-    '.git',
-    '_gh_pages',
-    'node_modules',
-    'resources'
-  ])
-  const INCLUDED_EXTENSIONS = new Set([
-    // This extension allowlist is how we avoid modifying binary files
-    '',
-    '.css',
-    '.html',
-    '.js',
-    '.json',
-    '.md',
-    '.scss',
-    '.txt',
-    '.yml'
-  ])
-  replaceRecursively('.', EXCLUDED_DIRS, INCLUDED_EXTENSIONS, oldVersion, newVersion)
+  // Strip any leading `v` from arguments because otherwise we will end up with duplicate `v`s
+  [oldVersion, newVersion].map(arg => arg.startsWith('v') ? arg.slice(1) : arg)
+
+  try {
+    const files = await globby(GLOB, GLOBBY_OPTIONS)
+
+    await Promise.all(files.map(file => replaceRecursively(file, oldVersion, newVersion)))
+  } catch (error) {
+    console.error(error)
+    process.exit(1)
+  }
 }
 
 main(process.argv.slice(2))
diff --git a/build/rollup.config.js b/build/rollup.config.js
index 7f9c1c7e1..8cecec9aa 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -28,7 +28,13 @@ if (BUNDLE) {
   // Remove last entry in external array to bundle Popper
   external.pop()
   delete globals['@popperjs/core']
-  plugins.push(replace({ 'process.env.NODE_ENV': '"production"' }), nodeResolve())
+  plugins.push(
+    replace({
+      'process.env.NODE_ENV': '"production"',
+      preventAssignment: true
+    }),
+    nodeResolve()
+  )
 }
 
 const rollupConfig = {
diff --git a/build/ship.sh b/build/ship.sh
deleted file mode 100644
index da5a03bcd..000000000
--- a/build/ship.sh
+++ /dev/null
@@ -1,55 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-#
-# Usage
-# ---------------
-# 1. Clone second version of Bootstrap in sibling directory named `bs-docs`.
-# 2. Within `bs-docs` copy, switch to `gh-pages` branch.
-# 3. Pull latest, re-bundle, re-npm.
-# 4. Run script.
-
-red=$'\e[1;31m'
-green=$'\e[1;32m'
-#blue=$'\e[1;34m'
-magenta=$'\e[1;35m'
-#cyan=$'\e[1;36m'
-end=$'\e[0m'
-
-# Get current version from package.json
-current_version=$(node -p "require('./package.json').version")
-
-if [[ $# -lt 1 ]]; then
-  printf "\n%s⚠️  Shipping aborted. You must specify a version.\n%s" "$red" "$end"
-  exit 1
-fi
-
-# Pulling latest changes, just to be sure
-printf "\n%s=======================================================%s" "$magenta" "$end"
-printf "\n%sPulling latest changes...%s" "$magenta" "$end"
-printf "\n%s=======================================================\n\n%s" "$magenta" "$end"
-git pull origin main
-
-# Update version number
-printf "\n%s=======================================================%s" "$magenta" "$end"
-printf "\n%sUpdating version number...%s" "$magenta" "$end"
-printf "\n%s=======================================================\n%s" "$magenta" "$end"
-npm run release-version "$current_version" "$1"
-
-# Build release
-printf "\n%s=======================================================%s" "$magenta" "$end"
-printf "\n%sBuilding release...%s" "$magenta" "$end"
-printf "\n%s=======================================================\n%s" "$magenta" "$end"
-npm run release
-
-# Copy the contents of the built docs site over to `bs-docs` repo
-printf "\n%s=======================================================%s" "$magenta" "$end"
-printf "\n%sCopy it over...%s" "$magenta" "$end"
-printf "\n%s=======================================================\n%s" "$magenta" "$end"
-cp -rf _gh_pages/. ../bs-docs/
-printf "\nDone!\n"
-
-printf "\n%s=======================================================%s" "$green" "$end"
-printf "\n%sSuccess, $1 is ready to review and publish.%s" "$green" "$end"
-printf "\n%s=======================================================\n\n%s" "$green" "$end"
diff --git a/build/vnu-jar.js b/build/vnu-jar.js
index 0296d140f..6c3517ca5 100644
--- a/build/vnu-jar.js
+++ b/build/vnu-jar.js
@@ -9,10 +9,10 @@
 
 'use strict'
 
-const childProcess = require('child_process')
+const { execFile, spawn } = require('child_process')
 const vnu = require('vnu-jar')
 
-childProcess.exec('java -version', (error, stdout, stderr) => {
+execFile('java', ['-version'], (error, stdout, stderr) => {
   if (error) {
     console.error('Skipping vnu-jar test; Java is missing.')
     return
@@ -21,23 +21,12 @@ childProcess.exec('java -version', (error, stdout, stderr) => {
   const is32bitJava = !/64-Bit/.test(stderr)
 
   // vnu-jar accepts multiple ignores joined with a `|`.
-  // Also note that the ignores are regular expressions.
+  // Also note that the ignores are string regular expressions.
   const ignores = [
     // "autocomplete" is included in <button> and checkboxes and radio <input>s due to
     // Firefox's non-standard autocomplete behavior - see https://bugzilla.mozilla.org/show_bug.cgi?id=654072
     'Attribute “autocomplete” is only allowed when the input type is.*',
-    'Attribute “autocomplete” not allowed on element “button” at this point.',
-    // Markup used in Components → Forms → Layout → Form grid → Horizontal form is currently invalid,
-    // but used this way due to lack of support for flexbox layout on <fieldset> element in most browsers
-    'Element “legend” not allowed as child of element “div” in this context.*',
-    // Content → Reboot uses various date/time inputs as a visual example.
-    // Documentation does not rely on them being usable.
-    'The “date” input type is not supported in all browsers.*',
-    'The “week” input type is not supported in all browsers.*',
-    'The “month” input type is not supported in all browsers.*',
-    'The “color” input type is not supported in all browsers.*',
-    'The “datetime-local” input type is not supported in all browsers.*',
-    'The “time” input type is not supported in all browsers.*'
+    'Attribute “autocomplete” not allowed on element “button” at this point.'
   ].join('|')
 
   const args = [
@@ -45,11 +34,9 @@ childProcess.exec('java -version', (error, stdout, stderr) => {
     `"${vnu}"`,
     '--asciiquotes',
     '--skip-non-html',
-    // Ignore the language code warnings
-    '--no-langdetect',
     '--Werror',
     `--filterpattern "${ignores}"`,
-    '_gh_pages/',
+    '_site/',
     'js/tests/'
   ]
 
@@ -58,7 +45,7 @@ childProcess.exec('java -version', (error, stdout, stderr) => {
     args.splice(0, 0, '-Xss512k')
   }
 
-  return childProcess.spawn('java', args, {
+  return spawn('java', args, {
     shell: true,
     stdio: 'inherit'
   })
diff --git a/build/zip-examples.js b/build/zip-examples.js
index b2f156502..312548e8a 100644
--- a/build/zip-examples.js
+++ b/build/zip-examples.js
@@ -16,7 +16,7 @@ const pkg = require('../package.json')
 
 const versionShort = pkg.config.version_short
 const distFolder = `bootstrap-${pkg.version}-examples`
-const rootDocsDir = '_gh_pages'
+const rootDocsDir = '_site'
 const docsDir = `${rootDocsDir}/docs/${versionShort}/`
 
 // these are the files we need in the examples