@docusaurus/theme-classic 0.0.0-4243 → 0.0.0-4248

package/lib/theme/Toggle/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = _default;
+exports.default = Toggle;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -27,32 +27,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function Dark({
-  icon,
-  style
-}) {
-  return <span className={(0, _clsx.default)(_stylesModule.default.toggleIcon, _stylesModule.default.dark)} style={style}>
-      {icon}
-    </span>;
-}
-
-function Light({
-  icon,
-  style
-}) {
-  return <span className={(0, _clsx.default)(_stylesModule.default.toggleIcon, _stylesModule.default.light)} style={style}>
-      {icon}
-    </span>;
-} // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-
-
-const Toggle = (0, _react.memo)(({
+// Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
+const ToggleComponent = (0, _react.memo)(({
   className,
-  icons,
+  switchConfig,
   checked: defaultChecked,
   disabled,
   onChange
 }) => {
+  const {
+    darkIcon,
+    darkIconStyle,
+    lightIcon,
+    lightIconStyle
+  } = switchConfig;
   const [checked, setChecked] = (0, _react.useState)(defaultChecked);
   const [focused, setFocused] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
@@ -69,8 +57,16 @@ const Toggle = (0, _react.memo)(({
 
       return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
     }}>
-          <div className={_stylesModule.default.toggleTrackCheck}>{icons.checked}</div>
-          <div className={_stylesModule.default.toggleTrackX}>{icons.unchecked}</div>
+          <div className={_stylesModule.default.toggleTrackCheck}>
+            <span className={_stylesModule.default.toggleIcon} style={darkIconStyle}>
+              {darkIcon}
+            </span>
+          </div>
+          <div className={_stylesModule.default.toggleTrackX}>
+            <span className={_stylesModule.default.toggleIcon} style={lightIconStyle}>
+              {lightIcon}
+            </span>
+          </div>
           <div className={_stylesModule.default.toggleTrackThumb} />
         </div>
 
@@ -84,20 +80,12 @@ const Toggle = (0, _react.memo)(({
       </div>;
 });
 
-function _default(props) {
+function Toggle(props) {
   const {
     colorMode: {
-      switchConfig: {
-        darkIcon,
-        darkIconStyle,
-        lightIcon,
-        lightIconStyle
-      }
+      switchConfig
     }
   } = (0, _themeCommon.useThemeConfig)();
   const isBrowser = (0, _useIsBrowser.default)();
-  return <Toggle disabled={!isBrowser} icons={{
-    checked: <Dark icon={darkIcon} style={darkIconStyle} />,
-    unchecked: <Light icon={lightIcon} style={lightIconStyle} />
-  }} {...props} />;
+  return <ToggleComponent switchConfig={switchConfig} disabled={!isBrowser} {...props} />;
 }

package/lib/theme/Toggle/styles.module.css

@@ -103,6 +103,3 @@
   justify-content: center;
   width: 10px;
 }
-.toggle::before {
-  position: absolute;
-}

package/lib-next/theme/Toggle/index.js

@@ -8,26 +8,11 @@ import React, {useState, useRef, memo} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import clsx from 'clsx';
-import styles from './styles.module.css';
+import styles from './styles.module.css'; // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
 
-function Dark({icon, style}) {
-  return (
-    <span className={clsx(styles.toggleIcon, styles.dark)} style={style}>
-      {icon}
-    </span>
-  );
-}
-
-function Light({icon, style}) {
-  return (
-    <span className={clsx(styles.toggleIcon, styles.light)} style={style}>
-      {icon}
-    </span>
-  );
-} // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-
-const Toggle = memo(
-  ({className, icons, checked: defaultChecked, disabled, onChange}) => {
+const ToggleComponent = memo(
+  ({className, switchConfig, checked: defaultChecked, disabled, onChange}) => {
+    const {darkIcon, darkIconStyle, lightIcon, lightIconStyle} = switchConfig;
     const [checked, setChecked] = useState(defaultChecked);
     const [focused, setFocused] = useState(false);
     const inputRef = useRef(null);
@@ -44,8 +29,16 @@ const Toggle = memo(
           role="button"
           tabIndex={-1}
           onClick={() => inputRef.current?.click()}>
-          <div className={styles.toggleTrackCheck}>{icons.checked}</div>
-          <div className={styles.toggleTrackX}>{icons.unchecked}</div>
+          <div className={styles.toggleTrackCheck}>
+            <span className={styles.toggleIcon} style={darkIconStyle}>
+              {darkIcon}
+            </span>
+          </div>
+          <div className={styles.toggleTrackX}>
+            <span className={styles.toggleIcon} style={lightIconStyle}>
+              {lightIcon}
+            </span>
+          </div>
           <div className={styles.toggleTrackThumb} />
         </div>
 
@@ -69,20 +62,15 @@ const Toggle = memo(
     );
   },
 );
-export default function (props) {
+export default function Toggle(props) {
   const {
-    colorMode: {
-      switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},
-    },
+    colorMode: {switchConfig},
   } = useThemeConfig();
   const isBrowser = useIsBrowser();
   return (
-    <Toggle
+    <ToggleComponent
+      switchConfig={switchConfig}
       disabled={!isBrowser}
-      icons={{
-        checked: <Dark icon={darkIcon} style={darkIconStyle} />,
-        unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
-      }}
       {...props}
     />
   );

package/lib-next/theme/Toggle/styles.module.css

@@ -103,6 +103,3 @@
   justify-content: center;
   width: 10px;
 }
-.toggle::before {
-  position: absolute;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4243",
+  "version": "0.0.0-4248",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4243",
-    "@docusaurus/plugin-content-blog": "0.0.0-4243",
-    "@docusaurus/plugin-content-docs": "0.0.0-4243",
-    "@docusaurus/plugin-content-pages": "0.0.0-4243",
-    "@docusaurus/theme-common": "0.0.0-4243",
-    "@docusaurus/theme-translations": "0.0.0-4243",
-    "@docusaurus/utils": "0.0.0-4243",
-    "@docusaurus/utils-validation": "0.0.0-4243",
+    "@docusaurus/core": "0.0.0-4248",
+    "@docusaurus/plugin-content-blog": "0.0.0-4248",
+    "@docusaurus/plugin-content-docs": "0.0.0-4248",
+    "@docusaurus/plugin-content-pages": "0.0.0-4248",
+    "@docusaurus/theme-common": "0.0.0-4248",
+    "@docusaurus/theme-translations": "0.0.0-4248",
+    "@docusaurus/utils": "0.0.0-4248",
+    "@docusaurus/utils-validation": "0.0.0-4248",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "chalk": "^4.1.2",
@@ -46,8 +46,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4243",
-    "@docusaurus/types": "0.0.0-4243",
+    "@docusaurus/module-type-aliases": "0.0.0-4248",
+    "@docusaurus/types": "0.0.0-4248",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "9ff41c223c3422e3483bc1049ee9ec703d11e0cd"
+  "gitHead": "8e90c0997091505e1992605827901633ba301c1b"
 }

package/src/theme/Toggle/index.tsx

@@ -5,46 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, useRef, memo, CSSProperties} from 'react';
+import React, {useState, useRef, memo} from 'react';
 import type {Props} from '@theme/Toggle';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig, ColorModeConfig} from '@docusaurus/theme-common';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
-interface IconProps {
-  icon: string;
-  style: CSSProperties;
-}
-
-function Dark({icon, style}: IconProps): JSX.Element {
-  return (
-    <span className={clsx(styles.toggleIcon, styles.dark)} style={style}>
-      {icon}
-    </span>
-  );
-}
-function Light({icon, style}: IconProps): JSX.Element {
-  return (
-    <span className={clsx(styles.toggleIcon, styles.light)} style={style}>
-      {icon}
-    </span>
-  );
-}
-
 // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-const Toggle = memo(
+const ToggleComponent = memo(
   ({
     className,
-    icons,
+    switchConfig,
     checked: defaultChecked,
     disabled,
     onChange,
   }: Props & {
-    icons: {checked: JSX.Element; unchecked: JSX.Element};
+    switchConfig: ColorModeConfig['switchConfig'];
     disabled: boolean;
   }): JSX.Element => {
+    const {darkIcon, darkIconStyle, lightIcon, lightIconStyle} = switchConfig;
     const [checked, setChecked] = useState(defaultChecked);
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -62,8 +43,16 @@ const Toggle = memo(
           role="button"
           tabIndex={-1}
           onClick={() => inputRef.current?.click()}>
-          <div className={styles.toggleTrackCheck}>{icons.checked}</div>
-          <div className={styles.toggleTrackX}>{icons.unchecked}</div>
+          <div className={styles.toggleTrackCheck}>
+            <span className={styles.toggleIcon} style={darkIconStyle}>
+              {darkIcon}
+            </span>
+          </div>
+          <div className={styles.toggleTrackX}>
+            <span className={styles.toggleIcon} style={lightIconStyle}>
+              {lightIcon}
+            </span>
+          </div>
           <div className={styles.toggleTrackThumb} />
         </div>
 
@@ -88,21 +77,16 @@ const Toggle = memo(
   },
 );
 
-export default function (props: Props): JSX.Element {
+export default function Toggle(props: Props): JSX.Element {
   const {
-    colorMode: {
-      switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},
-    },
+    colorMode: {switchConfig},
   } = useThemeConfig();
   const isBrowser = useIsBrowser();
 
   return (
-    <Toggle
+    <ToggleComponent
+      switchConfig={switchConfig}
       disabled={!isBrowser}
-      icons={{
-        checked: <Dark icon={darkIcon} style={darkIconStyle} />,
-        unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
-      }}
       {...props}
     />
   );

package/src/theme/Toggle/styles.module.css

@@ -103,6 +103,3 @@
   justify-content: center;
   width: 10px;
 }
-.toggle::before {
-  position: absolute;
-}