Update dependencies and fix links

Author: jakeboone02

docs/api/import.mdx

@@ -13,7 +13,7 @@ Use the `parseSQL` function to convert SQL `SELECT` statements into a format sui
 function parseSQL(sql: string, options?: ParseSQLOptions): RuleGroupTypeAny;
 ```
 
-`parseSQL` takes a SQL `SELECT` statement (either the full statement or the `WHERE` clause by itself). Try it out in the [demo](https://react-querybuilder.github.io/react-querybuilder/) by clicking the "Load from SQL" button.
+`parseSQL` takes a SQL `SELECT` statement (either the full statement or the `WHERE` clause by itself). Try it out in the [demo](https://react-querybuilder.js.org/react-querybuilder/) by clicking the "Load from SQL" button.
 
 The optional second parameter to `parseSQL` is an options object that configures how the function handles named or anonymous bind variables within the SQL string.
 

docs/api/misc.mdx

@@ -20,7 +20,7 @@ function defaultValidator(query: RuleGroupType): {
 
 Pass `validator={defaultValidator}` to automatically validate groups (rules will be ignored). A group will be marked invalid if either 1) it has no child rules or groups (`query.rules.length === 0`), or 2) it has a missing/invalid `combinator` and more than one child rule or group (`rules.length >= 2`).
 
-You can see an example of the default validator in action in the [demo](https://react-querybuilder.github.io/react-querybuilder/) if you check the ["Use validation" option](https://react-querybuilder.github.io/react-querybuilder/#validateQuery=true). Empty groups will have bold text on their "+Rule" button and a description of the situation where the rules normally appear.
+You can see an example of the default validator in action in the [demo](https://react-querybuilder.js.org/react-querybuilder/) if you check the ["Use validation" option](https://react-querybuilder.js.org/react-querybuilder/#validateQuery=true). Empty groups will have bold text on their "+Rule" button and a description of the situation where the rules normally appear.
 
 ### `findPath`
 

docs/api/querybuilder.mdx

@@ -661,35 +661,35 @@ The `translations` prop is optional, and each top-level property in the `transla
 
 ### `showCombinatorsBetweenRules`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#showCombinatorsBetweenRules=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#showCombinatorsBetweenRules=true)
 
 Pass `true` to show the combinators (and/or) between rules and rule groups instead of at the top of rule groups. This can make some queries easier to understand as it encourages a more natural style of reading.
 
 ### `showNotToggle`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#showNotToggle=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#showNotToggle=true)
 
 Pass `true` to show the "Not" (aka inversion) toggle switch for each rule group.
 
 ### `showCloneButtons`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#showCloneButtons=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#showCloneButtons=true)
 
 ### `showLockButtons`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#showLockButtons=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#showLockButtons=true)
 
 Pass `true` to show the "Lock rule" and "Lock group" buttons. When a rule is locked, all elements within the rule will be disabled (except for the lock button, so the user can unlock it). When a group is locked, all elements within the group header (except the lock button), as well as all child rule/group elements, will be disabled.
 
 ### `resetOnFieldChange`
 
-`boolean` (default `true`) [_Click for demo with this feature disabled_](https://react-querybuilder.github.io/react-querybuilder/#resetOnFieldChange=false)
+`boolean` (default `true`) [_Click for demo with this feature disabled_](https://react-querybuilder.js.org/react-querybuilder/#resetOnFieldChange=false)
 
 Pass `false` to avoid resetting the operator and value when the field changes.
 
 ### `resetOnOperatorChange`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#resetOnOperatorChange=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#resetOnOperatorChange=true)
 
 Pass `true` to reset the value when the operator changes.
 
@@ -701,25 +701,25 @@ Pass `false` to disable the `onQueryChange` call on mount of the component which
 
 ### `autoSelectField`
 
-`boolean` (default `true`) [_Click for demo with this feature disabled_](https://react-querybuilder.github.io/react-querybuilder/#autoSelectField=false)
+`boolean` (default `true`) [_Click for demo with this feature disabled_](https://react-querybuilder.js.org/react-querybuilder/#autoSelectField=false)
 
 Pass `false` to add an empty option (`"------"`) to the `fields` array as the first element (which will be selected by default for new rules). When the empty field option is selected, the operator and value components will not display for that rule.
 
 ### `addRuleToNewGroups`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#addRuleToNewGroups=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#addRuleToNewGroups=true)
 
 Pass `true` to automatically add a rule to new groups. If a `query` prop is not passed in, a rule will be added to the root group when the component is mounted. If a `query` prop is passed in with an empty `rules` array, no rule will be added automatically.
 
 ### `independentCombinators`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#independentCombinators=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#independentCombinators=true)
 
 Pass `true` to insert an independent combinator selector between each rule/group in a rule group. The combinator selector at the group level will not be available. Visually, this is similar to the [`showCombinatorsBetweenRules`](#showcombinatorsbetweenrules) option, except that each combinator selector is independently controlled. You may find that users take to this configuration more easily, as it can allow them to express queries more like they would in natural language.
 
 ### `enableDragAndDrop`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#enableDragAndDrop=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#enableDragAndDrop=true)
 
 Pass `true` to display a drag handle to the left of each group header and rule. Clicking and dragging the handle element allows visual reordering of rules and groups.
 
@@ -731,18 +731,18 @@ Pass `true` to display a drag handle to the left of each group header and rule.
 
 ### `disabled`
 
-`boolean | number[][]` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#disabled=true)
+`boolean | number[][]` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#disabled=true)
 
 Pass `true` to disable all subcomponents and prevent changes to the query. Pass an array of paths to disable specific rules and/or groups, e.g. `disabled={[[0]]}` will disable the first rule and its subcomponents but nothing else.
 
 ### `debugMode`
 
-`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#debugMode=true)
+`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#debugMode=true)
 
 Pass `true` to log debugging information to the console.
 
 ### `validator`
 
-`QueryValidator` [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#validateQuery=true)
+`QueryValidator` [_Click for demo_](https://react-querybuilder.js.org/react-querybuilder/#validateQuery=true)
 
 This is a callback function that is executed each time `QueryBuilder` renders. The return value should be a boolean (`true` for valid queries, `false` for invalid) or an object whose keys are the `id`s of each rule and group in the query tree. If such an object is returned, the values associated to each key should be a boolean (`true` for valid rules/groups, `false` for invalid) or an object with a `valid` boolean property and an optional `reasons` array. The full object will be passed to each rule and group component, and all sub-components of each rule/group will receive the value associated with the rule's or group's `id`. See the [Validation](./validation) documentation for more information.

docs/api/validation.mdx

@@ -110,7 +110,7 @@ If you provide a query- or field-level validator function then the wrapper `<div
 
 :::tip See it in action
 
-In the [demo](https://react-querybuilder.github.io/react-querybuilder/), check the "Use validation" option and create an empty group or a text input without a value. Empty groups will show a message where the rules usually appear (using the `:after` pseudo-selector), and text fields without values will have a [purple](https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/) outline.
+In the [demo](https://react-querybuilder.js.org/react-querybuilder/), check the "Use validation" option and create an empty group or a text input without a value. Empty groups will show a message where the rules usually appear (using the `:after` pseudo-selector), and text fields without values will have a [purple](https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/) outline.
 
 :::
 
@@ -120,4 +120,4 @@ See the [validation section on the Export page](./export#validation) for more in
 
 ## Default validator
 
-You can pass the provided [`defaultValidator`](./misc#defaultvalidator) to the `validator` prop to check for invalid combinators, empty groups, or (if `independentCombinators` is true) out-of-sequence `rules` arrays. The [demo](https://react-querybuilder.github.io/react-querybuilder/) uses the default validator.
+You can pass the provided [`defaultValidator`](./misc#defaultvalidator) to the `validator` prop to check for invalid combinators, empty groups, or (if `independentCombinators` is true) out-of-sequence `rules` arrays. The [demo](https://react-querybuilder.js.org/react-querybuilder/) uses the default validator.

docs/api/valueeditor.mdx

@@ -16,7 +16,7 @@ This query builder has been specially configured in two ways:
 
 :::tip
 
-The [compatibility packages](../compat) also implement these options using appropriate components from the associated style library ([see the demo](https://react-querybuilder.github.io/react-querybuilder/)).
+The [compatibility packages](../compat) also implement these options using appropriate components from the associated style library ([see the demo](https://react-querybuilder.js.org/react-querybuilder/)).
 
 :::
 

package.json

@@ -16,25 +16,25 @@
     "pretty-print": "prettier --write docs/* docs/**/* src/**/*"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.10.6",
-    "@docusaurus/core": "^2.0.0-beta.14",
-    "@docusaurus/preset-classic": "^2.0.0-beta.14",
-    "@docusaurus/theme-search-algolia": "^2.0.0-beta.14",
+    "@codesandbox/sandpack-react": "^0.19.6",
+    "@docusaurus/core": "2.0.0-beta.20",
+    "@docusaurus/preset-classic": "2.0.0-beta.20",
+    "@docusaurus/theme-search-algolia": "2.0.0-beta.20",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^6.1.2",
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.1",
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-querybuilder": "^4.0.0",
     "remark-typescript-tools": "^1.0.10",
     "sass": "^1.43.4",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.0.0-beta.14",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.20",
     "@tsconfig/docusaurus": "^1.0.4",
     "typescript": "^4.4.4"
   },

src/components/SandpackRQB.tsx

@@ -3,7 +3,11 @@ import { useColorMode } from '@docusaurus/theme-common';
 import * as React from 'react';
 import './SandpackRQB.scss';
 
-export const SandpackRQB: React.FC<SandpackProps> = ({ children, customSetup, options }) => {
+interface SandpackRQBProps extends SandpackProps {
+  children: React.ReactNode;
+}
+
+export const SandpackRQB = ({ children, customSetup, options }: SandpackRQBProps) => {
   const { isDarkTheme } = useColorMode();
   const codeSnippets = React.Children.toArray(children) as React.ReactElement[];
   const bkgdColor = isDarkTheme ? '#343a46' : '#ffffff';
@@ -64,7 +68,7 @@ export const SandpackRQB: React.FC<SandpackProps> = ({ children, customSetup, op
   )
     ? ''
     : `@import 'react-querybuilder/dist/query-builder.css';`;
-  const sandboxStyle = `body { background-color: ${bkgdColor}; }`;
+  const sandboxStyle = `body { background-color: ${bkgdColor}; } pre { padding: 1rem; background-color: white; border: 1px solid lightgray; border-radius: 4px; white-space: pre-wrap; }`;
 
   files['/styles.css'] = {
     code: [rqbCSSimport, sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),

src/pages/index.tsx

@@ -19,7 +19,7 @@ function HomepageHeader() {
           </Link>
           <Link
             className="button button--secondary button--lg"
-            href="https://react-querybuilder.github.io/react-querybuilder">
+            href="https://react-querybuilder.js.org/react-querybuilder">
             Try it out
           </Link>
         </div>