From bc09d3c5f2e48895d686f550a21af6c8155f2485 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Wed, 22 Apr 2026 13:31:14 +0200
Subject: [PATCH] Removes React Toggle library (#38771)

Co-authored-by: diondiondion <mail@diondiondion.com>
---
 .../components/form_fields/toggle.module.css  | 19 +++++++-------
 .../components/form_fields/toggle_field.tsx   | 13 ++++------
 .../components/column_settings.jsx            |  2 +-
 .../mastodon/features/lists/new.tsx           |  8 +++---
 .../components/checkbox_with_label.tsx        |  2 +-
 .../components/setting_toggle.jsx             |  4 +--
 .../mastodon/features/onboarding/profile.tsx  |  8 +++---
 .../mastodon/features/report/comment.tsx      |  3 +--
 package.json                                  |  2 --
 yarn.lock                                     | 26 +------------------
 10 files changed, 31 insertions(+), 56 deletions(-)

diff --git a/app/javascript/mastodon/components/form_fields/toggle.module.css b/app/javascript/mastodon/components/form_fields/toggle.module.css
index 997434f336..b1f7e71b9f 100644
--- a/app/javascript/mastodon/components/form_fields/toggle.module.css
+++ b/app/javascript/mastodon/components/form_fields/toggle.module.css
@@ -1,3 +1,13 @@
+.wrapper {
+  --diameter: 20px;
+  --padding: 2px;
+  --transition: 0.2s ease-in-out;
+
+  display: inline-block;
+  position: relative;
+  height: calc(var(--diameter) + var(--padding) * 2);
+}
+
 .input {
   position: absolute;
   opacity: 0;
@@ -9,10 +19,6 @@
 }
 
 .toggle {
-  --diameter: 20px;
-  --padding: 2px;
-  --transition: 0.2s ease-in-out;
-
   display: inline-flex;
   align-items: center;
   border-radius: 9999px;
@@ -68,8 +74,3 @@
 :global([dir='rtl']) .input:checked + .toggle::before {
   transform: translateX(calc(-1 * (var(--diameter) - (var(--padding) * 2))));
 }
-
-.wrapper {
-  display: inline-block;
-  position: relative;
-}
diff --git a/app/javascript/mastodon/components/form_fields/toggle_field.tsx b/app/javascript/mastodon/components/form_fields/toggle_field.tsx
index 75fdb8f21b..3de09823d3 100644
--- a/app/javascript/mastodon/components/form_fields/toggle_field.tsx
+++ b/app/javascript/mastodon/components/form_fields/toggle_field.tsx
@@ -31,20 +31,17 @@ ToggleField.displayName = 'ToggleField';
 
 export const Toggle = forwardRef<HTMLInputElement, Props>(
   ({ className, size, ...otherProps }, ref) => (
-    <span className={classes.wrapper}>
+    <span
+      className={classes.wrapper}
+      style={{ '--diameter': size ? `${size}px` : undefined } as CSSProperties}
+    >
       <input
         {...otherProps}
         type='checkbox'
         className={classes.input}
         ref={ref}
       />
-      <span
-        className={classNames(classes.toggle, className)}
-        style={
-          { '--diameter': size ? `${size}px` : undefined } as CSSProperties
-        }
-        hidden
-      />
+      <span className={classNames(classes.toggle, className)} hidden />
     </span>
   ),
 );
diff --git a/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.jsx b/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.jsx
index 9d1dde7f73..18222a44ff 100644
--- a/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.jsx
+++ b/app/javascript/mastodon/features/hashtag_timeline/components/column_settings.jsx
@@ -7,8 +7,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { NonceProvider } from 'react-select';
 import AsyncSelect from 'react-select/async';
-import Toggle from 'react-toggle';
 
+import { Toggle } from '@/mastodon/components/form_fields/toggle_field';
 import { injectIntl } from '@/mastodon/components/intl';
 
 import SettingToggle from '../../notifications/components/setting_toggle';
diff --git a/app/javascript/mastodon/features/lists/new.tsx b/app/javascript/mastodon/features/lists/new.tsx
index 53084fb568..67a79fae4a 100644
--- a/app/javascript/mastodon/features/lists/new.tsx
+++ b/app/javascript/mastodon/features/lists/new.tsx
@@ -7,8 +7,6 @@ import { useParams, useHistory, Link } from 'react-router-dom';
 
 import { isFulfilled } from '@reduxjs/toolkit';
 
-import Toggle from 'react-toggle';
-
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { fetchList } from 'mastodon/actions/lists';
@@ -20,7 +18,11 @@ import { Avatar } from 'mastodon/components/avatar';
 import { AvatarGroup } from 'mastodon/components/avatar_group';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
-import { SelectField, TextInputField } from 'mastodon/components/form_fields';
+import {
+  SelectField,
+  TextInputField,
+  Toggle,
+} from 'mastodon/components/form_fields';
 import { Icon } from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import type { List } from 'mastodon/models/list';
diff --git a/app/javascript/mastodon/features/notifications/components/checkbox_with_label.tsx b/app/javascript/mastodon/features/notifications/components/checkbox_with_label.tsx
index 9922bc6c7c..d4b6e07fb7 100644
--- a/app/javascript/mastodon/features/notifications/components/checkbox_with_label.tsx
+++ b/app/javascript/mastodon/features/notifications/components/checkbox_with_label.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 
-import Toggle from 'react-toggle';
+import { Toggle } from '@/mastodon/components/form_fields/toggle_field';
 
 interface Props {
   checked: boolean;
diff --git a/app/javascript/mastodon/features/notifications/components/setting_toggle.jsx b/app/javascript/mastodon/features/notifications/components/setting_toggle.jsx
index 9bf4b147a9..748e51ab9d 100644
--- a/app/javascript/mastodon/features/notifications/components/setting_toggle.jsx
+++ b/app/javascript/mastodon/features/notifications/components/setting_toggle.jsx
@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import Toggle from 'react-toggle';
+import { Toggle } from '@/mastodon/components/form_fields/toggle_field';
 
 export default class SettingToggle extends PureComponent {
 
@@ -27,7 +27,7 @@ export default class SettingToggle extends PureComponent {
 
     return (
       <div className='setting-toggle'>
-        <Toggle disabled={disabled} id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
+        <Toggle disabled={disabled} id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} size={16} />
         <label htmlFor={id} className='setting-toggle__label'>{label}</label>
       </div>
     );
diff --git a/app/javascript/mastodon/features/onboarding/profile.tsx b/app/javascript/mastodon/features/onboarding/profile.tsx
index fe8efba695..961c5f9872 100644
--- a/app/javascript/mastodon/features/onboarding/profile.tsx
+++ b/app/javascript/mastodon/features/onboarding/profile.tsx
@@ -6,8 +6,6 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
 
-import Toggle from 'react-toggle';
-
 import AddPhotoAlternateIcon from '@/material-icons/400-24px/add_photo_alternate.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person.svg?react';
@@ -16,7 +14,11 @@ import { closeOnboarding } from 'mastodon/actions/onboarding';
 import { Button } from 'mastodon/components/button';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
-import { TextAreaField, TextInputField } from 'mastodon/components/form_fields';
+import {
+  TextAreaField,
+  TextInputField,
+  Toggle,
+} from 'mastodon/components/form_fields';
 import { Icon } from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { me } from 'mastodon/initial_state';
diff --git a/app/javascript/mastodon/features/report/comment.tsx b/app/javascript/mastodon/features/report/comment.tsx
index f65d38470e..d6d4d94b43 100644
--- a/app/javascript/mastodon/features/report/comment.tsx
+++ b/app/javascript/mastodon/features/report/comment.tsx
@@ -6,8 +6,7 @@ import type { Map } from 'immutable';
 import { OrderedSet } from 'immutable';
 import { shallowEqual } from 'react-redux';
 
-import Toggle from 'react-toggle';
-
+import { Toggle } from '@/mastodon/components/form_fields/toggle_field';
 import { fetchAccount } from 'mastodon/actions/accounts';
 import { Button } from 'mastodon/components/button';
 import type { Status } from 'mastodon/models/status';
diff --git a/package.json b/package.json
index aabc43e9ff..a75ef025db 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,6 @@
     "react-select": "^5.7.3",
     "react-sparklines": "^1.7.0",
     "react-textarea-autosize": "^8.4.1",
-    "react-toggle": "^4.1.3",
     "redux-immutable": "^4.0.0",
     "regenerator-runtime": "^0.14.0",
     "requestidlecallback": "^0.3.0",
@@ -158,7 +157,6 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-sparklines": "^1.7.2",
     "@types/react-test-renderer": "^18.0.0",
-    "@types/react-toggle": "^4.0.3",
     "@types/redux-immutable": "^4.0.3",
     "@types/requestidlecallback": "^0.3.5",
     "@vitest/browser": "^4.1.0",
diff --git a/yarn.lock b/yarn.lock
index df1f4db459..89b98b98d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2885,7 +2885,6 @@ __metadata:
     "@types/react-router-dom": "npm:^5.3.3"
     "@types/react-sparklines": "npm:^1.7.2"
     "@types/react-test-renderer": "npm:^18.0.0"
-    "@types/react-toggle": "npm:^4.0.3"
     "@types/redux-immutable": "npm:^4.0.3"
     "@types/requestidlecallback": "npm:^0.3.5"
     "@use-gesture/react": "npm:^10.3.1"
@@ -2964,7 +2963,6 @@ __metadata:
     react-sparklines: "npm:^1.7.0"
     react-test-renderer: "npm:^18.2.0"
     react-textarea-autosize: "npm:^8.4.1"
-    react-toggle: "npm:^4.1.3"
     redux-immutable: "npm:^4.0.0"
     regenerator-runtime: "npm:^0.14.0"
     requestidlecallback: "npm:^0.3.0"
@@ -4789,15 +4787,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-toggle@npm:^4.0.3":
-  version: 4.0.5
-  resolution: "@types/react-toggle@npm:4.0.5"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/f557b85c96715b145bcc3beb2903f88ee3a6045ef85da0f80561c7cc2ecdc531e2d4ae121ed8ec3a1761264de25b8410653744093f37abf042201587add7ffa6
-  languageName: node
-  linkType: hard
-
 "@types/react-transition-group@npm:^4.4.0":
   version: 4.4.8
   resolution: "@types/react-transition-group@npm:4.4.8"
@@ -6236,7 +6225,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.5, classnames@npm:^2.3.2":
+"classnames@npm:^2.3.2":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
@@ -12274,19 +12263,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-toggle@npm:^4.1.3":
-  version: 4.1.3
-  resolution: "react-toggle@npm:4.1.3"
-  dependencies:
-    classnames: "npm:^2.2.5"
-  peerDependencies:
-    prop-types: ">= 15.3.0 < 19"
-    react: ">= 15.3.0 < 19"
-    react-dom: ">= 15.3.0 < 19"
-  checksum: 10c0/afae643981d6fb922d66830ec0e9c793e729d7a55e3974edf212965acc8dc51f0d098ae6e409461d3ff2f87fe027dc3556a1a746f8472ed3a79c8878bf338fee
-  languageName: node
-  linkType: hard
-
 "react-transition-group@npm:^4.3.0":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"