palantir · ggdouglas · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -80,9 +80,8 @@
         "karma": "^6.4.2",
         "mocha": "^10.2.0",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
-        "react-test-renderer": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "typescript": "~5.3.3",
         "webpack-cli": "^5.1.4"
     },

diff --git a/packages/core/src/components/button/buttons.md b/packages/core/src/components/button/buttons.md
@@ -5,6 +5,10 @@ using the `<Button>` and `<AnchorButton>` components, respectively.
 
 @reactExample ButtonsExample
 
+@## Sandpack Example
+
+@reactExample SandpackButtonsExample
+
 @## AnchorButton vs Button
 
 The two button components generate different HTML tags. They each look the same, but they have different semantic
@@ -15,7 +19,7 @@ behaviors according to the HTML spec.
 ```
 
 ```html
-<a class="@ns-button" role="button" tabindex={0}>Click</a>
+<a class="@ns-button" role="button" tabindex="{0}">Click</a>
 ```
 
 ---
@@ -31,20 +35,21 @@ behaviors according to the HTML spec.
 <div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
     <h5 class="@ns-heading">
 
-Disabled __Button__ elements prevent all interaction
+Disabled **Button** elements prevent all interaction
+
 </h5>
 
-Use __AnchorButton__ if you need mouse interaction events (such as hovering) on a disabled button.
+Use **AnchorButton** if you need mouse interaction events (such as hovering) on a disabled button.
 
-__Button__ uses the native `disabled` attribute on the `<button>` tag so the browser disables all interactions.
-__AnchorButton__ uses the class `.@ns-disabled` because `<a>` tags do not support the `disabled` attribute. As a result,
-the __AnchorButton__ component will prevent *only* the `onClick` handler when disabled but permit other events.
+**Button** uses the native `disabled` attribute on the `<button>` tag so the browser disables all interactions.
+**AnchorButton** uses the class `.@ns-disabled` because `<a>` tags do not support the `disabled` attribute. As a result,
+the **AnchorButton** component will prevent _only_ the `onClick` handler when disabled but permit other events.
 
 </div>
 
 @## Adding icons
 
-__Button__ and __AnchorButton__ support `icon` and `rightIcon` props to place an icon on either end of their text/children.
+**Button** and **AnchorButton** support `icon` and `rightIcon` props to place an icon on either end of their text/children.
 These icons can either be specified as string identifiers (e.g. `"arrow-right"`), dynamically-loaded
 [`<Icon>` components](https://blueprintjs.com/docs/#core/components/icon),
 [static icon components](#core/components/icon.static-components) (e.g. `<ArrowRight />`), or any custom JSX element.
@@ -76,12 +81,12 @@ often fall out of sync as the design system is updated. You should use the React
 Use the `@ns-button` class to access button styles. You should implement buttons using the
 `<button>` or `<a>` tags rather than `<div>` for accessibility.
 
-* Make sure to include `type="button"` on `<button>` tags (use `type="submit"` to submit a
-  `<form>`) and `role="button"` on `<a>` tags for accessibility.
-* Add the attribute `tabindex="0"` to make `<a>` tags focusable. `<button>` elements are
-  focusable by default.
-* For buttons implemented with `<a>` tags, add `tabindex="-1"` to disabled buttons to prevent the
-  user from focusing them by pressing <kbd>tab</kbd> on the keyboard. (This does not happen in the example below.)
-* Note that `<a>` tags do not respond to the `:disabled` attribute; use `.@ns-disabled` instead.
+-   Make sure to include `type="button"` on `<button>` tags (use `type="submit"` to submit a
+    `<form>`) and `role="button"` on `<a>` tags for accessibility.
+-   Add the attribute `tabindex="0"` to make `<a>` tags focusable. `<button>` elements are
+    focusable by default.
+-   For buttons implemented with `<a>` tags, add `tabindex="-1"` to disabled buttons to prevent the
+    user from focusing them by pressing <kbd>tab</kbd> on the keyboard. (This does not happen in the example below.)
+-   Note that `<a>` tags do not respond to the `:disabled` attribute; use `.@ns-disabled` instead.
 
 @css button
diff --git a/packages/datetime/package.json b/packages/datetime/package.json
@@ -68,8 +68,8 @@
         "karma": "^6.4.2",
         "mocha": "^10.2.0",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-test-renderer": "^16.14.0",
         "typescript": "~5.3.3",
         "webpack-cli": "^5.1.4"

diff --git a/packages/datetime2/package.json b/packages/datetime2/package.json
@@ -65,8 +65,8 @@
         "karma": "^6.4.2",
         "mocha": "^10.2.0",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "typescript": "~5.3.3",
         "webpack-cli": "^5.1.4"
     },

diff --git a/packages/demo-app/package.json b/packages/demo-app/package.json
@@ -26,8 +26,8 @@
         "classnames": "^2.3.1",
         "lodash": "^4.17.21",
         "normalize.css": "^8.0.1",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-transition-group": "^4.4.5",
         "tslib": "~2.6.2"
     },

diff --git a/packages/docs-app/package.json b/packages/docs-app/package.json
@@ -27,6 +27,7 @@
         "@blueprintjs/select": "workspace:^",
         "@blueprintjs/table": "workspace:^",
         "@blueprintjs/test-commons": "workspace:^",
+        "@codesandbox/sandpack-react": "^2.19.9",
         "@documentalist/client": "^5.0.0",
         "chroma-js": "^2.4.2",
         "classnames": "^2.3.1",
@@ -38,8 +39,8 @@
         "monaco-editor": "^0.45.0",
         "normalize.css": "^8.0.1",
         "popper.js": "^1.16.1",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-transition-group": "^4.4.5",
         "tslib": "~2.6.2"
     },
@@ -49,6 +50,8 @@
         "@types/chroma-js": "~2.4.3",
         "@types/downloadjs": "~1.4.6",
         "@types/lodash": "~4.14.202",
+        "@types/react": "^18.3.11",
+        "@types/react-dom": "^18.3.0",
         "copy-webpack-plugin": "^12.0.2",
         "monaco-editor-webpack-plugin": "^7.1.0",
         "npm-run-all": "^4.1.5",

diff --git a/packages/docs-app/src/examples/core-examples/index.ts b/packages/docs-app/src/examples/core-examples/index.ts
@@ -17,6 +17,7 @@
 export * from "./alertExample";
 export * from "./breadcrumbsExample";
 export * from "./buttonsExample";
+export * from "./sandpackButtonsExample";
 export * from "./buttonsIconsExample";
 export * from "./buttonGroupExample";
 export * from "./buttonGroupPopoverExample";

diff --git a/packages/docs-app/src/examples/core-examples/sandpackButtonsExample.tsx b/packages/docs-app/src/examples/core-examples/sandpackButtonsExample.tsx
@@ -0,0 +1,106 @@
+/* !
+ * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
+ */
+
+import {
+    SandpackCodeEditor,
+    SandpackLayout,
+    SandpackPreview,
+    SandpackProvider,
+    type SandpackTheme,
+} from "@codesandbox/sandpack-react";
+import * as React from "react";
+
+import { Colors } from "@blueprintjs/core";
+
+const app = `import { Button } from '@blueprintjs/core'
+
+export default function App() {
+  return (
+    <Button intent="primary">
+      Hello World
+    </Button>
+  );
+}`;
+
+const index = `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { FocusStyleManager } from "@blueprintjs/core";
+import "./styles.css";
+
+import App from "./App";
+import React from "react";
+
+import "@blueprintjs/core/lib/css/blueprint.css";
+
+FocusStyleManager.onlyShowFocusOnTabs();
+
+const root = createRoot(document.getElementById("root") as HTMLElement);
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+`;
+
+const styles = `body {
+  background-color: #1C2127;
+}
+`;
+
+const theme: SandpackTheme = {
+    colors: {
+        accent: Colors.BLUE5,
+        base: Colors.GRAY3,
+        clickable: Colors.GRAY2,
+        disabled: Colors.DARK_GRAY4,
+        error: Colors.RED5,
+        errorSurface: Colors.RED1,
+        hover: Colors.GRAY5,
+        surface1: Colors.BLACK,
+        surface2: Colors.DARK_GRAY2,
+        surface3: Colors.DARK_GRAY5,
+    },
+    font: {
+        body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", blueprint-icons-16, sans-serif',
+        lineHeight: "20px",
+        mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
+        size: "13px",
+    },
+    syntax: {
+        comment: { color: Colors.GRAY2, fontStyle: "italic" },
+        definition: Colors.GOLD5,
+        keyword: Colors.VIOLET4,
+        plain: Colors.GOLD5,
+        property: Colors.TURQUOISE3,
+        punctuation: Colors.WHITE,
+        static: Colors.RED3,
+        string: Colors.LIME4,
+        tag: Colors.FOREST3,
+    },
+};
+
+export function SandpackButtonsExample() {
+    return (
+        <SandpackProvider
+            template="react-ts"
+            theme={theme}
+            options={{ visibleFiles: ["/App.tsx"] }}
+            customSetup={{
+                dependencies: {
+                    "@blueprintjs/core": "^5.13.1",
+                },
+            }}
+            files={{
+                "/App.tsx": app,
+                "/index.tsx": index,
+                "/styles.css": styles,
+            }}
+        >
+            <SandpackLayout className="layout">
+                <SandpackCodeEditor className="editor" />
+                <SandpackPreview className="preview" />
+            </SandpackLayout>
+        </SandpackProvider>
+    );
+}
diff --git a/packages/docs-theme/package.json b/packages/docs-theme/package.json
@@ -57,8 +57,8 @@
         "@blueprintjs/node-build-scripts": "workspace:^",
         "@types/fuzzaldrin-plus": "~0.6.5",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "typescript": "~5.3.3",
         "webpack-cli": "^5.1.4"
     },

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -65,8 +65,8 @@
         "handlebars": "^4.7.8",
         "mocha": "^10.2.0",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-test-renderer": "^16.14.0",
         "svg-parser": "^2.0.4",
         "typescript": "~5.3.3",

diff --git a/packages/landing-app/package.json b/packages/landing-app/package.json
@@ -19,8 +19,8 @@
         "@blueprintjs/core": "workspace:^",
         "@blueprintjs/icons": "workspace:^",
         "classnames": "^2.3.1",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0"
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
     },
     "devDependencies": {
         "@blueprintjs/webpack-build-scripts": "workspace:^",

diff --git a/packages/popover2/package.json b/packages/popover2/package.json
@@ -50,8 +50,8 @@
     "devDependencies": {
         "@blueprintjs/node-build-scripts": "workspace:^",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "typescript": "~5.3.3"
     },
     "repository": {

diff --git a/packages/select/package.json b/packages/select/package.json
@@ -62,8 +62,8 @@
         "karma": "^6.4.2",
         "mocha": "^10.2.0",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-test-renderer": "^16.14.0",
         "typescript": "~5.3.3",
         "webpack-cli": "^5.1.4"

diff --git a/packages/table-dev-app/package.json b/packages/table-dev-app/package.json
@@ -21,8 +21,8 @@
         "classnames": "^2.3.1",
         "lodash": "^4.17.21",
         "normalize.css": "^8.0.1",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0"
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
     },
     "devDependencies": {
         "@blueprintjs/webpack-build-scripts": "workspace:^",

diff --git a/packages/table/package.json b/packages/table/package.json
@@ -63,8 +63,8 @@
         "karma": "^6.4.2",
         "mocha": "^10.2.0",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-test-renderer": "^16.14.0",
         "typescript": "~5.3.3",
         "webpack": "^5.90.0"

diff --git a/packages/test-commons/package.json b/packages/test-commons/package.json
@@ -23,14 +23,14 @@
         "enzyme-adapter-react-16": "^1.15.7"
     },
     "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
+        "react": "^16.8 || 17 || 18",
+        "react-dom": "^16.8 || 17 || 18"
     },
     "devDependencies": {
         "@blueprintjs/node-build-scripts": "workspace:^",
         "npm-run-all": "^4.1.5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "typescript": "~5.3.3"
     },
     "repository": {