POC: feat: add mode updater to SaltTheme

packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx

@@ -5,11 +5,13 @@
   useAriaAnnouncer,
   useDensity,
   useTheme,
+  ModeValues,
 } from "@salt-ds/core";
 import { WindowProvider } from "@salt-ds/window";
 import { mount } from "cypress/react18";
 import { type ReactNode, useCallback, useState } from "react";
 import { createPortal } from "react-dom";
+import { Mode } from "fs";
 
 const TestComponent = ({
   id = "test-1",
@@ -316,6 +318,93 @@
 
     cy.get("@consoleSpy").should("not.have.been.called");
   });
+
+  describe("when the mode is set", () => {
+    const ThemeToggle = () => {
+      const { setMode } = useTheme();
+
+      const handleClick = () => {
+        setMode((prevState) =>
+          prevState === ModeValues[0] ? ModeValues[1] : ModeValues[0]
+        );
+      };
+      return <button onClick={handleClick}>Set Mode</button>;
+    };
+
+    it("should update the mode", () => {
+      mount(
+        <SaltProvider>
+          <ThemeToggle />
+          <TestComponent />
+        </SaltProvider>
+      );
+      cy.get("#test-1").should("exist").and("have.attr", "data-mode", "light");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "dark");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "light");
+    });
+  });
+
+  describe("when the mode is controlled by consumers", () => {
+    const ControlledModeSaltProvider = ({
+      children,
+    }: {
+      children: ReactNode;
+    }) => {
+      const [mode, setMode] = useState<Mode>(ModeValues[0]);
+
+      const handleClick = () => {
+        setMode((prevState) =>
+          prevState === ModeValues[0] ? ModeValues[1] : ModeValues[0]
+        );
+      };
+      return (
+        <SaltProvider mode={mode}>
+          <button onClick={handleClick}>Set Mode</button>
+          {children}
+        </SaltProvider>
+      );
+    };
+
+    it("should update the mode", () => {
+      mount(
+        <ControlledModeSaltProvider>
+          <TestComponent />
+        </ControlledModeSaltProvider>
+      );
+      cy.get("#test-1").should("exist").and("have.attr", "data-mode", "light");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "dark");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "light");
+    });
+  });
+
+  describe("when the mode is inverted", () => {
+    const ThemeToggle = () => {
+      const { invertMode } = useTheme();
+
+      const handleClick = () => {
+        invertMode();
+      };
+      return <button onClick={handleClick}>Invert Mode</button>;
+    };
+
+    it("should update the mode", () => {
+      mount(
+        <SaltProvider>
+          <ThemeToggle />
+          <TestComponent />
+        </SaltProvider>
+      );
+      cy.get("#test-1").should("exist").and("have.attr", "data-mode", "light");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "dark");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "light");
+    });
+  });
 });
 
 describe("Given a SaltProviderNext", () => {

packages/core/src/salt-provider/SaltProvider.tsx

@@ -6,13 +6,16 @@
 import { clsx } from "clsx";
 import {
   type HTMLAttributes,
+  type Dispatch,
+  type SetStateAction,
   type ReactElement,
   type ReactNode,
   cloneElement,
   createContext,
   isValidElement,
   useContext,
   useMemo,
+  useState,
 } from "react";
 import { AriaAnnouncerProvider } from "../aria-announcer";
 import {
@@ -64,6 +67,14 @@
   UNSTABLE_actionFont: ActionFont;
 }
 
+export const invertMode = (mode: string): "light" | "dark" =>
+  mode === "light" ? "dark" : "light";
+
+export interface ThemeContextValue extends ThemeContextProps {
+  setMode: Dispatch<SetStateAction<Mode>>;
+  invertMode: () => void;
+}
+
 export const DensityContext = createContext<Density>(DEFAULT_DENSITY);
 
 export const ThemeContext = createContext<ThemeContextProps>({
@@ -262,14 +273,18 @@
   const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;
   const themeName =
     themeProp ?? (inheritedTheme === "" ? DEFAULT_THEME_NAME : inheritedTheme);
-  const mode = modeProp ?? inheritedMode;
   const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;
   const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;
   const headingFont =
     headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;
   const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;
   const actionFont =
     actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;
+  const [modeFromState, setMode] = useState<Mode>(
+    modeProp ?? (inheritedMode ?? DEFAULT_MODE)
+  );
+
+  const mode = modeProp || modeFromState;
 
   const applyClassesTo =
     applyClassesToProp ?? (isRootProvider ? "root" : "scope");
@@ -281,7 +296,7 @@
     window: targetWindow,
   });
 
-  const themeContextValue = useMemo(
+  const themeContextValue = useMemo<ThemeContextValue>(
     () => ({
       theme: themeName,
       mode,
@@ -291,6 +306,8 @@
       headingFont: headingFont,
       accent: accent,
       actionFont: actionFont,
+      setMode,
+      invertMode: () => setMode((prevState) => invertMode(prevState)),
       // Backward compatibility
       UNSTABLE_corner: corner,
       UNSTABLE_headingFont: headingFont,
@@ -454,10 +471,10 @@
 /** @deprecated use `SaltProviderNext` */
 export const UNSTABLE_SaltProviderNext = SaltProviderNext;
 
-export const useTheme = (): ThemeContextProps => {
+export const useTheme = (): Omit<ThemeContextValue, "window"> => {
   const { window, ...contextWithoutWindow } = useContext(ThemeContext);
 
   return contextWithoutWindow;
 };
 
 /**

packages/core/stories/salt-provider/salt-provider.stories.tsx

@@ -7,6 +7,7 @@ import {
   SaltProvider,
   ToggleButton,
   ToggleButtonGroup,
+  useTheme,
 } from "@salt-ds/core";
 import { type SyntheticEvent, useState } from "react";
 
@@ -31,7 +32,7 @@ export const Default = () => {
 };
 
 export const ToggleTheme = () => {
-  const [mode, setMode] = useState<Mode>("light");
+  const { mode, setMode } = useTheme();
 
   const handleChangeTheme = (event: SyntheticEvent<HTMLButtonElement>) => {
     setMode(event.currentTarget.value as Mode);