Merge branch 'main' into overlay-button-overflow

.changeset/red-deers-share.md

@@ -0,0 +1,8 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed file drop zone not allowing the same file to be selected via `onChange` of `FileDropZoneTrigger`.
+Updated first argument event type of `onChange` to `ChangeEvent`, to better align with underlying event.
+
+Closes #3591.

.changeset/spicy-tigers-hang.md

@@ -0,0 +1,9 @@
+---
+"@salt-ds/core": minor
+---
+
+- Added `indicatorSide` to `accordion` to allow right alignment.
+- Removed arrow animation in accordion.
+- Changed direction of accordion's arrow to be consistent with salt's expandable components.
+  - Changed direction when `expanded=false` from right to down.
+  - Changed direction when `expanded=true` from down to up.

.changeset/twelve-pets-poke.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed Menu showing behind Drawer (#3636).

.github/workflows/release.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - release-ag-grid-theme-v1
 
 permissions:
   contents: write

.storybook/manager.ts

@@ -1,6 +1,16 @@
-import { addons } from "@storybook/manager-api";
+import { addons, types } from "@storybook/manager-api";
 import saltTheme from "./SaltTheme";
+import { ThemeNextToolbar } from "./toolbar/ThemeNextToolbar";
 
 addons.setConfig({
   theme: saltTheme,
 });
+
+addons.register("theme-next-addon", () => {
+  addons.add("theme-next-addon/toolbar", {
+    title: "Theme next toolbar",
+    //👇 Sets the type of UI element in Storybook
+    type: types.TOOL,
+    render: ThemeNextToolbar,
+  });
+});

.storybook/preview.tsx

@@ -26,6 +26,8 @@ import { SaltProvider } from "@salt-ds/core";
 import { DocsContainer } from "@storybook/addon-docs";
 import { initialize, mswLoader } from "msw-storybook-addon";
 
+import { globalOptions as themeNextGlobals } from "./toolbar/ThemeNextToolbar";
+
 const densities = ["touch", "low", "medium", "high"];
 const DEFAULT_DENSITY = "medium";
 const DEFAULT_MODE = "light";
@@ -107,47 +109,7 @@ export const globalTypes: GlobalTypes = {
       title: "Component Style Injection",
     },
   },
-  themeNext: {
-    name: "Experimental theme next",
-    description: "Turn on/off theme next",
-    defaultValue: "disable",
-    toolbar: {
-      icon: "beaker",
-      items: ["disable", "enable"],
-      title: "Theme Next",
-    },
-  },
-  corner: {
-    name: "Experimental corner",
-    description: "Switch corner to sharp / rounded",
-    defaultValue: "sharp",
-    // if: { global: "themeNext", eq: "enable" }, // todo: why if doesn't work?
-    toolbar: {
-      icon: "beaker",
-      items: ["sharp", "rounded"],
-      title: "Corner",
-    },
-  },
-  headingFont: {
-    name: "Experimental heading font",
-    description: "Switch heading font to open sans / amplitude",
-    defaultValue: "Open Sans",
-    toolbar: {
-      icon: "beaker",
-      items: ["Open Sans", "Amplitude"],
-      title: "Heading font",
-    },
-  },
-  accent: {
-    name: "Experimental accent",
-    description: "Switch accent to blue / teal",
-    defaultValue: "blue",
-    toolbar: {
-      icon: "beaker",
-      items: ["blue", "teal"],
-      title: "Accent",
-    },
-  },
+  ...themeNextGlobals,
 };
 
 export const argTypes: ArgTypes = {

.storybook/toolbar/ThemeNextToolbar.css

@@ -0,0 +1,9 @@
+/* Custom Toolbar */
+.theme-next-toolbar-group-wrapper {
+  cursor: not-allowed;
+}
+
+.theme-next-toolbar-group-wrapper > span > span {
+  font-weight: bold;
+  color: darkgray;
+}

.storybook/toolbar/ThemeNextToolbar.tsx

@@ -0,0 +1,120 @@
+import type { TooltipLinkListLink } from "@storybook/components";
+import {
+  IconButton,
+  Separator,
+  TooltipLinkList,
+  WithTooltip,
+} from "@storybook/components";
+import { BeakerIcon, CheckIcon } from "@storybook/icons";
+import { useGlobals } from "@storybook/manager-api";
+import { clsx } from "clsx";
+import React, { AnchorHTMLAttributes } from "react";
+
+import "./ThemeNextToolbar.css";
+
+const description = "Theme next controls";
+
+const camelCaseToWords = (s: string) => {
+  const result = s.replace(/([A-Z])/g, " $1");
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
+
+export const globalOptions: Record<
+  string,
+  { name: string; description: string; defaultValue: string; items: string[] }
+> = {
+  themeNext: {
+    name: "Experimental theme next",
+    description: "Turn on/off theme next",
+    defaultValue: "disable",
+    items: ["enable", "disable"],
+  },
+  corner: {
+    name: "Experimental corner",
+    description: "Switch corner to sharp / rounded",
+    defaultValue: "sharp",
+    items: ["sharp", "rounded"],
+  },
+  headingFont: {
+    name: "Experimental heading font",
+    description: "Switch heading font to open sans / amplitude",
+    defaultValue: "Open Sans",
+    items: ["Open Sans", "Amplitude"],
+  },
+  accent: {
+    name: "Experimental accent",
+    description: "Switch accent to blue / teal",
+    defaultValue: "blue",
+    items: ["blue", "teal"],
+  },
+  actionFont: {
+    name: "Experimental action font",
+    description: "Switch action font to open sans / amplitude",
+    defaultValue: "Open Sans",
+    items: ["Open Sans", "Amplitude"],
+  },
+};
+
+const GroupWrapper = ({
+  className,
+  children,
+}: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  return (
+    <div
+      className={clsx(className, "theme-next-toolbar-group-wrapper")}
+      children={children}
+    />
+  );
+};
+
+export const ThemeNextToolbar = ({ active }: { active?: boolean }) => {
+  const [globals, updateGlobals] = useGlobals();
+
+  const items: TooltipLinkListLink[] = Object.keys(globalOptions).flatMap(
+    (globalKey) => {
+      return [
+        {
+          id: `theme-next-${globalKey}-header`,
+          title: camelCaseToWords(globalKey),
+          LinkWrapper: GroupWrapper, // Custom wrapper to render group
+          href: "#", // Without href, `LinkWrapper` will not work
+        },
+        ...globalOptions[globalKey].items.map((value) => {
+          const disabled =
+            globalKey === "themeNext"
+              ? false
+              : globals["themeNext"] !== "enable";
+          const active = globals[globalKey] === value;
+
+          return {
+            id: `theme-next-${globalKey}-${value}`,
+            right: active ? (
+              <CheckIcon style={{ fill: "inherit" }} />
+            ) : undefined,
+            active,
+            title: camelCaseToWords(value),
+            onClick: () => {
+              !disabled && updateGlobals({ [globalKey]: value });
+            },
+            disabled,
+          };
+        }),
+      ];
+    }
+  );
+
+  return (
+    <>
+      <Separator />
+      <WithTooltip
+        tooltip={() => <TooltipLinkList links={items} />}
+        trigger="click"
+        closeOnOutsideClick
+      >
+        <IconButton title={description} active={active}>
+          <BeakerIcon /> Theme Next
+        </IconButton>
+      </WithTooltip>
+    </>
+  );
+};

.yarn/patches/@changesets-assemble-release-plan-npm-6.0.2-d74b7b2762.patch

@@ -6,7 +6,7 @@ index 60427457c887f2d72168fecec83d79088c68e3a4..b2f9655ac07d6adbc29b5c7e46c5d7af
    }
 
    let version = semverInc__default["default"](release.oldVersion, release.type);
-+  if (release.name === "@salt-ds/lab" || release.name === "@salt-ds/data-grid") {
++  if (release.name === "@salt-ds/lab") {
 +    version = semverInc__default["default"](release.oldVersion, "prerelease")
 +  }
 
@@ -29,7 +29,7 @@ index f6583cf3f639e1fe4df764a015689dea74127236..318ecb08e2c58e8d3ac4ef11f659a5cd
    }
 
    let version = semverInc(release.oldVersion, release.type);
-+  if (release.name === "@salt-ds/lab" || release.name === "@salt-ds/data-grid") {
++  if (release.name === "@salt-ds/lab") {
 +    version = semverInc(release.oldVersion, "prerelease");
 +  }
 

.yarnrc.yml

@@ -4,6 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-npmRegistryServer: "https://registry.yarnpkg.com"
-
 yarnPath: .yarn/releases/yarn-4.3.0.cjs

docs/decorators/withTheme.tsx

@@ -73,6 +73,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
     corner,
     headingFont,
     accent,
+    actionFont,
   } = context.globals;
 
   const Provider =
@@ -105,6 +106,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
             corner={corner}
             headingFont={headingFont}
             accent={accent}
+            actionFont={actionFont}
           >
             <Panel>
               <StoryFn />
@@ -124,6 +126,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
       corner={corner}
       headingFont={headingFont}
       accent={accent}
+      actionFont={actionFont}
     >
       <SetBackground viewMode={context.viewMode} id={context.id} />
       <StoryFn />