Merge branch 'main' into open-interactions

.changeset/giant-cycles-clap.md

@@ -0,0 +1,57 @@
+---
+"@salt-ds/date-adapters": patch
+"@salt-ds/lab": patch
+---
+
+Refine peer dependency management for DatePicker adapters by splitting them into sub-packages. You now import only the specific date framework adapter you need, simplifying dependency handling.
+
+- **For `date-fns`:**
+
+  ```diff
+  - import { AdapterDateFns } from "@salt-ds/date-adapters";
+  + import { AdapterDateFns } from "@salt-ds/date-adapters/date-fns";
+  ```
+
+- **For `dayjs`:**
+
+  ```diff
+  - import { AdapterDayjs } from "@salt-ds/date-adapters";
+  + import { AdapterDayjs } from "@salt-ds/date-adapters/dayjs";
+  ```
+
+- **For `luxon`:**
+
+  ```diff
+  - import { AdapterLuxon } from "@salt-ds/date-adapters";
+  + import { AdapterLuxon } from "@salt-ds/date-adapters/luxon";
+  ```
+
+- **For `moment`:**
+
+  ```diff
+  - import { AdapterMoment } from "@salt-ds/date-adapters";
+  + import { AdapterMoment } from "@salt-ds/date-adapters/moment";
+  ```
+
+Additionally, `DateDetailErrorEnum` is now a simpler `DateDetailError` of type `DateDetailErrorType`.
+
+```diff
+- import { DateDetailErrorEnum } from "@salt-ds/date-adapters";
++ import { DateDetailError } from "@salt-ds/date-adapters/moment";
+```
+
+### Instructions
+
+1. Modify your import statements to use the specific sub-package for the date adapter you require.
+
+2. Ensure your `package.json` includes the necessary date framework as a dependency. For example, if using `date-fns`:
+
+   ```json
+   {
+     "dependencies": {
+       "date-fns": "^x.x.x"
+     }
+   }
+   ```
+
+This change helps streamline the integration of date frameworks with the DatePicker component by ensuring only the necessary adapters and dependencies are included.

.changeset/poor-scissors-chew.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+Overlay and Dialog headers fix alignment for titles spanning into multiple lines, wrap preheader and headers in H2.

.changeset/silent-dots-run.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": minor
+---
+
+Added `render` prop to `Link`. The `render` prop enables the substitution of the default anchor tag with an alternate link, such as React Router, facilitating integration with routing libraries.

.changeset/ten-lies-explode.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+Add border box to skip link container to ensure height is correctly measured.

.changeset/wet-swans-wave.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed Toast icon alignment.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,7 +1,7 @@
 name: Bug report 🪲
 description: Something is broken and you have a reproduction? Let us know so we can fix it!
+type: "bug"
 labels:
-  - "type: bug 🪲"
   - "status: awaiting triage"
 body:
   - type: markdown

cypress.config.ts

@@ -56,10 +56,6 @@ async function getViteConfig(config: UserConfig) {
             __dirname,
             "./dist/salt-ds-countries",
           ),
-          "@salt-ds/date-adapters": path.resolve(
-            __dirname,
-            "./dist/salt-ds-date-adapters",
-          ),
           "@salt-ds/data-grid": path.resolve(
             __dirname,
             "./dist/salt-ds-data-grid",
@@ -73,7 +69,6 @@ async function getViteConfig(config: UserConfig) {
       optimizeDeps: {
         include: [
           "@salt-ds/core",
-          "@salt-ds/data-adapters",
           "@salt-ds/data-grid",
           "@salt-ds/lab",
           "@salt-ds/icons",

docs/decorators/withLocalization.tsx

@@ -1,9 +1,9 @@
 import type { Decorator } from "@storybook/react";
 import "dayjs/locale/en";
-import { AdapterDateFns } from "@salt-ds/date-adapters";
-import { AdapterDayjs } from "@salt-ds/date-adapters";
-import { AdapterLuxon } from "@salt-ds/date-adapters";
-import { AdapterMoment } from "@salt-ds/date-adapters";
+import { AdapterDateFns } from "@salt-ds/date-adapters/date-fns";
+import { AdapterDayjs } from "@salt-ds/date-adapters/dayjs";
+import { AdapterLuxon } from "@salt-ds/date-adapters/luxon";
+import { AdapterMoment } from "@salt-ds/date-adapters/moment";
 import { LocalizationProvider } from "@salt-ds/lab";
 import { enUS as dateFnsEnUs } from "date-fns/locale";
 

package.json

@@ -101,7 +101,7 @@
     "vite": "^6.0.0",
     "vite-plugin-istanbul": "^6.0.0",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^2.0.0",
+    "vitest": "^3.0.0",
     "yup": "^1.0.2"
   },
   "resolutions": {
@@ -143,6 +143,7 @@
     "get-tsconfig": "^4.7.5",
     "rollup": "^4.24.2",
     "rollup-plugin-esbuild": "^6.1.1",
-    "rollup-plugin-postcss": "^4.0.2"
+    "rollup-plugin-postcss": "^4.0.2",
+    "vite-tsconfig-paths": "^4.2.0"
   }
 }

packages/core/src/__tests__/__e2e__/link/Link.cy.tsx

@@ -42,4 +42,40 @@ describe("GIVEN a link", () => {
 
     cy.findByTestId(/TearOutIcon/i).should("not.exist");
   });
+
+  it("WHEN `render` is passed a render function, THEN should call `render` to create the element", () => {
+    const testId = "link-testid";
+
+    const mockRender = cy
+      .stub()
+      .as("render")
+      .returns(
+        <a href="#root" data-testid={testId}>
+          Action
+        </a>,
+      );
+
+    cy.mount(<Link href="#root" render={mockRender} />);
+
+    cy.findByTestId(testId).should("exist");
+
+    cy.get("@render").should("have.been.calledWithMatch", {
+      className: Cypress.sinon.match.string,
+      children: Cypress.sinon.match.any,
+    });
+  });
+
+  it("WHEN `render` is given a JSX element, THEN should merge the props and render the JSX element", () => {
+    const testId = "link-testid";
+
+    const mockRender = (
+      <a href="#root" data-testid={testId}>
+        Action
+      </a>
+    );
+
+    cy.mount(<Link href="#root" render={mockRender} />);
+
+    cy.findByTestId(testId).should("exist");
+  });
 });

packages/core/src/link/Link.tsx

@@ -2,11 +2,17 @@ import type { IconProps } from "@salt-ds/icons";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
-import { type ComponentType, type ReactElement, forwardRef } from "react";
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type ReactElement,
+  forwardRef,
+} from "react";
 import { useIcon } from "../semantic-icon-provider";
 import { Text, type TextProps } from "../text";
-import { makePrefixer } from "../utils";
+import { type RenderPropsType, makePrefixer } from "../utils";
 import linkCss from "./Link.css";
+import { LinkAction } from "./LinkAction";
 
 const withBaseName = makePrefixer("saltLink");
 
@@ -16,8 +22,14 @@ const withBaseName = makePrefixer("saltLink");
  * @example
  * <LinkExample to="#link">Action</LinkExample>
  */
-export interface LinkProps extends Omit<TextProps<"a">, "as" | "disabled"> {
+export interface LinkProps
+  extends Omit<ComponentPropsWithoutRef<"a">, "color">,
+    Pick<TextProps<"a">, "maxRows" | "styleAs" | "color" | "variant"> {
   IconComponent?: ComponentType<IconProps> | null;
+  /**
+   * Render prop to enable customisation of anchor element.
+   */
+  render?: RenderPropsType["render"];
 }
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
@@ -47,7 +59,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
 
   return (
     <Text
-      as="a"
+      as={LinkAction}
       className={clsx(withBaseName(), className)}
       href={href}
       ref={ref}

packages/core/src/link/LinkAction.tsx

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { renderProps } from "../utils";
+
+interface LinkActionProps extends ComponentPropsWithoutRef<"a"> {}
+
+export const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(
+  function LinkAction(props, ref) {
+    return renderProps("a", { ...props, ref });
+  },
+);

packages/core/src/toast/Toast.css

@@ -30,7 +30,7 @@
 
 /* Styles applied to icon */
 .saltToast-iconContainer > .saltIcon {
-  margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;
+  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));
   color: var(--toast-iconColor);
 }
 

packages/core/stories/link/link.stories.tsx

@@ -101,3 +101,22 @@ export const Truncation: StoryFn<typeof Link> = () => {
 //     </div>
 //   );
 // };
+
+const CustomLinkImplementation = (props: any) => (
+  <a href="#root" aria-label={"overridden-label"} {...props}>
+    Your own Link implementation
+  </a>
+);
+
+export const RenderElement: StoryFn<typeof Link> = () => {
+  return <Link href="#root" render={<CustomLinkImplementation />} />;
+};
+
+export const RenderProp: StoryFn<typeof Link> = () => {
+  return (
+    <Link
+      href="#root"
+      render={(props) => <CustomLinkImplementation {...props} />}
+    />
+  );
+};

packages/date-adapters/package.json

@@ -38,6 +38,6 @@
     "provenance": true
   },
   "scripts": {
-    "build": "yarn node ../../scripts/build.mjs"
+    "build": "yarn node ./scripts/build.mjs"
   }
 }