(
role="progressbar"
aria-valuemax={max}
aria-valuemin={min}
- aria-valuenow={Math.round(value)}
+ aria-valuenow={value === undefined ? undefined : Math.round(value)}
{...rest}
>
- {`${Math.round(progress)} %`}
+ {isIndeterminate ? `— %` : `${Math.round(progress)} %`}
)}
diff --git a/packages/core/stories/progress/linear-progress.stories.tsx b/packages/core/stories/progress/linear-progress.stories.tsx
index 08c7d0b92e..c0fc6d7b9e 100644
--- a/packages/core/stories/progress/linear-progress.stories.tsx
+++ b/packages/core/stories/progress/linear-progress.stories.tsx
@@ -1,11 +1,11 @@
-import { Meta, StoryFn } from "@storybook/react";
import {
Button,
- FlowLayout,
- StackLayout,
CircularProgress,
+ FlowLayout,
LinearProgress,
+ StackLayout,
} from "@salt-ds/core";
+import { Meta, StoryFn } from "@storybook/react";
import { useProgressingValue } from "./useProgressingValue";
import "./progress.stories.css";
@@ -91,3 +91,5 @@ export const ProgressingValue: StoryFn
-
- {bufferValue > 0 ? (
+
+ {bufferValue && bufferValue > 0 ? (
) : null}
{!hideLabel && (
+
+ File uploading
+
+ File upload to shared drive in progress.
+
+ value = 38, buffer value = 60
-max = 500, value = 250
-{`max = ${max}, min = ${min}, value = ${value}`}
-
+ {children}
+
);
};
@@ -81,9 +80,7 @@ export const ThemeNextToolbar = ({ active }: { active?: boolean }) => {
},
...globalOptions[globalKey].items.map((value) => {
const disabled =
- globalKey === "themeNext"
- ? false
- : globals["themeNext"] !== "enable";
+ globalKey === "themeNext" ? false : globals.themeNext !== "enable";
const active = globals[globalKey] === value;
return {
@@ -100,7 +97,7 @@ export const ThemeNextToolbar = ({ active }: { active?: boolean }) => {
};
}),
];
- }
+ },
);
return (
diff --git a/biome.jsonc b/biome.jsonc
new file mode 100644
index 0000000000..27f1abf41e
--- /dev/null
+++ b/biome.jsonc
@@ -0,0 +1,153 @@
+{
+ "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+ "vcs": {
+ "enabled": true,
+ "clientKind": "git",
+ "useIgnoreFile": true,
+ "defaultBranch": "main"
+ },
+ "files": {
+ "ignore": [".next", "mockServiceWorker.js", "*-props.json", ".tmp"]
+ },
+ "organizeImports": {
+ "enabled": true
+ },
+ "formatter": {
+ "enabled": true,
+ "indentStyle": "space"
+ },
+ "linter": {
+ "enabled": true,
+ "rules": {
+ "recommended": true,
+ "style": {
+ // Changed to warn because we have a lot of non-null assertions.
+ "noNonNullAssertion": "warn"
+ },
+ "complexity": {
+ // Changed to warn because it is useful to keep this in mind, but it doesn't need to be a strict requirement.
+ "noForEach": "warn"
+ },
+ "a11y": {
+ // Disabled because autofocus is necessary in some cases.
+ "noAutofocus": "off",
+ // Disabled because we write a lot of custom components.
+ "noNoninteractiveElementToInteractiveRole": "off",
+ "noNoninteractiveTabindex": "off",
+ // Disabled until biome doesn't flag hidden SVGs.
+ "noSvgWithoutTitle": "off",
+ // Changed to warn because biome has some false positives.
+ "useAriaPropsForRole": "warn"
+ },
+ "correctness": {
+ "useExhaustiveDependencies": {
+ "level": "warn",
+ "options": {
+ "hooks": [
+ {
+ "name": "useIsomorphicLayoutEffect",
+ "closureIndex": 0,
+ "dependenciesIndex": 1
+ },
+ {
+ "name": "useControlled",
+ "stableResult": [1]
+ }
+ ]
+ }
+ }
+ },
+ "suspicious": {
+ // Changed to warn because it is useful to keep this in mind, but it doesn't need to be a strict requirement.
+ "noArrayIndexKey": "warn",
+ // Changed to warn because it is useful to keep this in mind, but it doesn't need to be a strict requirement.
+ "noExplicitAny": "warn"
+ }
+ }
+ },
+ "css": {
+ "formatter": {
+ "enabled": true,
+ "lineWidth": 200
+ },
+ "linter": {
+ "enabled": true
+ },
+ "parser": {
+ "cssModules": true
+ }
+ },
+ "overrides": [
+ {
+ // Disable some rules for tests and stories, because they are not production code.
+ "include": ["__tests__/**", "stories/**"],
+ "linter": {
+ "rules": {
+ "a11y": {
+ "useButtonType": "off"
+ },
+ "complexity": {
+ "noForEach": "off"
+ },
+ "suspicious": {
+ "noImplicitAnyLet": "off"
+ }
+ }
+ }
+ },
+ {
+ // Disable some rules for legacy code, because it is not worth fixing.
+ "include": [
+ "lab/src/responsive/**",
+ "packages/data-grid/**",
+ "lab/src/common-hooks/**"
+ ],
+ "linter": {
+ "rules": {
+ "style": {
+ "noParameterAssign": "off"
+ },
+ "suspicious": {
+ "noAssignInExpressions": "off"
+ }
+ }
+ }
+ },
+ {
+ // Disable noExplicitAny for utils, because any is useful in some cases.
+ "include": ["utils/**"],
+ "linter": {
+ "rules": {
+ "suspicious": {
+ "noExplicitAny": "off"
+ }
+ }
+ }
+ },
+ {
+ // Disable noArrayIndexKey for layout examples because array indexes are useful in this case.
+ "include": [
+ "packages/*/stories/*-layout/**",
+ "site/src/examples/*-layout/**"
+ ],
+ "linter": {
+ "rules": {
+ "suspicious": {
+ "noArrayIndexKey": "off"
+ }
+ }
+ }
+ },
+ {
+ // Disable noShadowRestrictedNames for examples and stories because it is useful to shadow restricted names for example names.
+ "include": ["site/src/examples/**", "packages/*/stories/**"],
+ "linter": {
+ "rules": {
+ "suspicious": {
+ "noShadowRestrictedNames": "off"
+ }
+ }
+ }
+ }
+ ]
+}
diff --git a/cypress.config.ts b/cypress.config.ts
index 31246955d3..f7c9887154 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,14 +1,14 @@
-import { defineConfig } from "cypress";
-import react from "@vitejs/plugin-react";
-import tsconfigPaths from "vite-tsconfig-paths";
-import IstanbulPlugin from "vite-plugin-istanbul";
-import { isCI } from "ci-info";
-import path from "path";
-import { UserConfig } from "vite";
-import { version as reactVersion } from "react";
+import path from "node:path";
// @ts-ignore
import installCoverageTask from "@cypress/code-coverage/task";
+import react from "@vitejs/plugin-react";
+import { isCI } from "ci-info";
import { cssInline } from "css-inline-plugin";
+import { defineConfig } from "cypress";
+import { version as reactVersion } from "react";
+import type { UserConfig } from "vite";
+import IstanbulPlugin from "vite-plugin-istanbul";
+import tsconfigPaths from "vite-tsconfig-paths";
async function getViteConfig(config: UserConfig) {
const { mergeConfig } = await import("vite");
@@ -52,7 +52,7 @@ async function getViteConfig(config: UserConfig) {
"@salt-ds/core": path.resolve(__dirname, "./dist/salt-ds-core"),
"@salt-ds/data-grid": path.resolve(
__dirname,
- "./dist/salt-ds-data-grid"
+ "./dist/salt-ds-data-grid",
),
"@salt-ds/lab": path.resolve(__dirname, "./dist/salt-ds-lab"),
"@salt-ds/icons": path.resolve(__dirname, "./dist/salt-ds-icons"),
diff --git a/cypress/support/AnnouncementListener.tsx b/cypress/support/AnnouncementListener.tsx
index 2d40b5ff26..30289002f8 100644
--- a/cypress/support/AnnouncementListener.tsx
+++ b/cypress/support/AnnouncementListener.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useEffect, useRef } from "react";
const positiveLookUp = [
'[aria-live="polite"]',
@@ -14,7 +14,7 @@ const walkTheDOM = (node: Element, handler: (node: Element) => void) => {
if (node.nodeType === 1) {
handler(node);
if (node.children.length) {
- for (let childNode of node.children) {
+ for (const childNode of node.children) {
walkTheDOM(childNode, handler);
}
}
@@ -26,9 +26,9 @@ export function AnnouncementListener(props: {
}) {
const { onAnnouncement } = props;
const handleAnnouncement: MutationCallback = (mutations) => {
- for (let mutation of mutations) {
+ for (const mutation of mutations) {
if (mutation.type !== "attributes") {
- let regionNode = mutation.target as HTMLElement;
+ const regionNode = mutation.target as HTMLElement;
// if (regionNode.innerText) {
onAnnouncement?.(regionNode.innerText);
// }
diff --git a/cypress/support/PerformanceTester.tsx b/cypress/support/PerformanceTester.tsx
index 1ed6a326d8..f4ac637db4 100644
--- a/cypress/support/PerformanceTester.tsx
+++ b/cypress/support/PerformanceTester.tsx
@@ -1,7 +1,7 @@
import {
Profiler,
- ProfilerOnRenderCallback,
- PropsWithChildren,
+ type ProfilerOnRenderCallback,
+ type PropsWithChildren,
useRef,
} from "react";
@@ -20,7 +20,7 @@ export function PerformanceTester({
const handleRender: ProfilerOnRenderCallback = (
id,
phase,
- actualDuration
+ actualDuration,
) => {
if (phase === "mount") {
cumulativeDuration.current = 0;
@@ -29,14 +29,13 @@ export function PerformanceTester({
renderCount.current = renderCount.current + 1;
cumulativeDuration.current = Number(
- (cumulativeDuration.current + actualDuration).toFixed(2)
+ (cumulativeDuration.current + actualDuration).toFixed(2),
);
- onRender &&
- onRender({
- renderCount: renderCount.current,
- renderTime: cumulativeDuration.current,
- });
+ onRender?.({
+ renderCount: renderCount.current,
+ renderTime: cumulativeDuration.current,
+ });
};
return (
@@ -45,5 +44,3 @@ export function PerformanceTester({
);
}
-
-export {};
diff --git a/cypress/support/assertions.ts b/cypress/support/assertions.ts
index fccf330d5b..c6279da379 100644
--- a/cypress/support/assertions.ts
+++ b/cypress/support/assertions.ts
@@ -1,10 +1,10 @@
import AssertionStatic = Chai.AssertionStatic;
import ChaiPlugin = Chai.ChaiPlugin;
+import { prettyDOM } from "@testing-library/dom";
import {
computeAccessibleDescription,
computeAccessibleName,
} from "dom-accessibility-api";
-import { prettyDOM } from "@testing-library/dom";
function elementToString(element: Element | null | undefined) {
if (typeof element?.nodeType === "number") {
@@ -184,13 +184,13 @@ declare global {
const hasAccessibleName: ChaiPlugin = (_chai, utils) => {
function assertHasAccessibleName(
this: AssertionStatic,
- expectedName: string
+ expectedName: string,
) {
const root = this._obj.get(0);
// make sure it's an Element
new _chai.Assertion(
root.nodeType,
- `Expected an Element but got '${String(root)}'`
+ `Expected an Element but got '${String(root)}'`,
).to.equal(1);
const actualName = computeAccessibleName(root, {
@@ -200,11 +200,11 @@ const hasAccessibleName: ChaiPlugin = (_chai, utils) => {
this.assert(
actualName === expectedName,
`expected \n${elementToString(
- root
+ root,
)} to have accessible name #{exp} but got #{act} instead.`,
`expected \n${elementToString(root)} not to have accessible name #{exp}.`,
expectedName,
- actualName
+ actualName,
);
}
@@ -223,13 +223,13 @@ chai.use(hasAccessibleName);
const hasAccessibleDescription: ChaiPlugin = (_chai, utils) => {
function assertHasAccessibleDescription(
this: AssertionStatic,
- expectedDescription: string
+ expectedDescription: string,
) {
const root = this._obj.get(0);
// make sure it's an Element
new _chai.Assertion(
root.nodeType,
- `Expected an Element but got '${String(root)}'`
+ `Expected an Element but got '${String(root)}'`,
).to.equal(1);
const actualDescription = computeAccessibleDescription(root, {
@@ -239,19 +239,19 @@ const hasAccessibleDescription: ChaiPlugin = (_chai, utils) => {
this.assert(
actualDescription === expectedDescription,
`expected \n${elementToString(
- root
+ root,
)} to have accessible description #{exp} but got #{act} instead.`,
`expected \n${elementToString(
- root
+ root,
)} not to have accessible description #{exp}.`,
expectedDescription,
- actualDescription
+ actualDescription,
);
}
_chai.Assertion.addMethod(
"accessibleDescription",
- assertHasAccessibleDescription
+ assertHasAccessibleDescription,
);
};
@@ -260,7 +260,7 @@ chai.use(hasAccessibleDescription);
const announces: ChaiPlugin = (_chai, utils) => {
function assertAnnounces(
this: AssertionStatic,
- msgMatcher?: string | RegExp
+ msgMatcher?: string | RegExp,
) {
// @ts-ignore
const announcement = cy.state("announcement") as string | null;
@@ -271,7 +271,7 @@ const announces: ChaiPlugin = (_chai, utils) => {
announcement !== null,
"expected to announce message",
"expected to not announce message but #{act} was announced",
- announcement
+ announcement,
);
}
@@ -285,12 +285,10 @@ const announces: ChaiPlugin = (_chai, utils) => {
const isCompatibleMessage = checkMessage(announcement, msgMatcher);
this.assert(
isCompatibleMessage,
- "expected to announce message " +
- placeholder +
- " #{exp} but got #{act}",
- "expected to not announce message " + placeholder + " #{exp}",
+ `expected to announce message ${placeholder} #{exp} but got #{act}`,
+ `expected to not announce message ${placeholder} #{exp}`,
msgMatcher,
- announcement
+ announcement,
);
}
@@ -300,7 +298,7 @@ const announces: ChaiPlugin = (_chai, utils) => {
"expected to announce #{exp}",
"expected to not announce #{exp}",
msgMatcher,
- announcement
+ announcement,
);
}
@@ -325,7 +323,7 @@ const isHighlighted: ChaiPlugin = (_chai, utils) => {
// make sure it's an Element
new _chai.Assertion(
root.nodeType,
- `Expected an Element but got '${String(root)}'`
+ `Expected an Element but got '${String(root)}'`,
).to.equal(1);
const className = this._obj.attr("class");
@@ -333,11 +331,11 @@ const isHighlighted: ChaiPlugin = (_chai, utils) => {
this.assert(
className.match(/saltHighlighted/),
`expected \n${elementToString(
- root
+ root,
)} to include CSS class #{exp}, got #{act} instead.`,
`expected \n${elementToString(root)} not to have class #{exp}.`,
"saltHighlighted",
- className
+ className,
);
}
@@ -359,7 +357,7 @@ const hasFocusVisible: ChaiPlugin = (_chai, utils) => {
// make sure it's an Element
new _chai.Assertion(
root.nodeType,
- `Expected an Element but got '${String(root)}'`
+ `Expected an Element but got '${String(root)}'`,
).to.equal(1);
const className = this._obj.attr("class");
@@ -367,11 +365,11 @@ const hasFocusVisible: ChaiPlugin = (_chai, utils) => {
this.assert(
className.match(/saltFocusVisible/),
`expected \n${elementToString(
- root
+ root,
)} to include CSS class #{exp}, got #{act} instead.`,
`expected \n${elementToString(root)} not to have class #{exp}.`,
"saltFocusVisible",
- className
+ className,
);
}
@@ -393,7 +391,7 @@ const hasAriaSelected: ChaiPlugin = (_chai, utils) => {
// make sure it's an Element
new _chai.Assertion(
root.nodeType,
- `Expected an Element but got '${String(root)}'`
+ `Expected an Element but got '${String(root)}'`,
).to.equal(1);
const ariaSelected = this._obj.attr("aria-selected");
@@ -401,13 +399,13 @@ const hasAriaSelected: ChaiPlugin = (_chai, utils) => {
this.assert(
ariaSelected === "true",
`expected \n${elementToString(
- root
+ root,
)} to have aria-selected #{exp}, got #{act} instead.`,
`expected \n${elementToString(
- root
+ root,
)} to have aria-selected = #{exp}, got #{act} instead`,
"true",
- ariaSelected
+ ariaSelected,
);
}
@@ -429,17 +427,17 @@ const isInTheViewport: ChaiPlugin = (_chai, utils) => {
// make sure it's an Element
new _chai.Assertion(
root.nodeType,
- `Expected an Element but got '${String(root)}'`
+ `Expected an Element but got '${String(root)}'`,
).to.equal(1);
- const viewportHeight = Cypress.config(`viewportHeight`);
+ const viewportHeight = Cypress.config("viewportHeight");
const rect = root.getBoundingClientRect();
this.assert(
!(rect.bottom < 0 || rect.top - viewportHeight >= 0),
`expected \n${elementToString(root)} to be in the viewport.`,
`expected \n${elementToString(root)} to not be in the viewport`,
- null
+ null,
);
}
@@ -462,7 +460,7 @@ const isActiveDescendant: ChaiPlugin = (_chai) => {
// make sure it's an Element
new _chai.Assertion(
root.nodeType,
- `Expected an Element but got '${String(root)}'`
+ `Expected an Element but got '${String(root)}'`,
).to.equal(1);
const id = root.id;
@@ -471,7 +469,7 @@ const isActiveDescendant: ChaiPlugin = (_chai) => {
$focused.attr("aria-activedescendant") === id,
"expected #{this} to be #{exp}",
"expected #{this} not to be #{exp}",
- "active descendant"
+ "active descendant",
);
});
}
@@ -481,5 +479,3 @@ const isActiveDescendant: ChaiPlugin = (_chai) => {
// registers our assertion function "isFocused" with Chai
chai.use(isActiveDescendant);
-
-export {};
diff --git a/cypress/support/commands.tsx b/cypress/support/commands.tsx
index 7d42a491ec..9c430808f5 100644
--- a/cypress/support/commands.tsx
+++ b/cypress/support/commands.tsx
@@ -1,12 +1,12 @@
import "@testing-library/cypress/add-commands";
-import { mount as cypressMount } from "cypress/react18";
import type { MountOptions, MountReturn } from "cypress/react";
+import { mount as cypressMount } from "cypress/react18";
import "cypress-axe";
-import { Options } from "cypress-axe";
-import { PerformanceResult, PerformanceTester } from "./PerformanceTester";
-import { ReactNode } from "react";
import { SaltProvider } from "@salt-ds/core";
+import type { Options } from "cypress-axe";
+import type { ReactNode } from "react";
import { AnnouncementListener } from "./AnnouncementListener";
+import { type PerformanceResult, PerformanceTester } from "./PerformanceTester";
const SupportedThemeModeValues = ["light", "dark"] as const;
type SupportedThemeMode = (typeof SupportedThemeModeValues)[number];
@@ -16,8 +16,6 @@ type SupportedDensity = (typeof SupportedDensityValues)[number];
// Must be declared global to be detected by typescript (allows import/export)
declare global {
namespace Cypress {
- // unsure why this Subject is unused, nor what to do with it...
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Chainable{colorVar}}
diff --git a/docs/components/ColorContainer.tsx b/docs/components/ColorContainer.tsx
index 4f7f0b221c..1c9794c334 100644
--- a/docs/components/ColorContainer.tsx
+++ b/docs/components/ColorContainer.tsx
@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
import { clsx } from "clsx";
+import type { ReactNode } from "react";
import "./ColorContainer.css";
diff --git a/docs/components/CornerBlock.tsx b/docs/components/CornerBlock.tsx
index 6c506f2fb2..83bb779ef9 100644
--- a/docs/components/CornerBlock.tsx
+++ b/docs/components/CornerBlock.tsx
@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
import { clsx } from "clsx";
+import type { ReactNode } from "react";
import "./CornerBlock.css";
diff --git a/docs/components/CursorBlock.tsx b/docs/components/CursorBlock.tsx
index d400ee9483..8c7d947a71 100644
--- a/docs/components/CursorBlock.tsx
+++ b/docs/components/CursorBlock.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
import "./CursorBlock.css";
diff --git a/docs/components/DocGrid.tsx b/docs/components/DocGrid.tsx
index b5b06c5fed..9db6cd2ee8 100644
--- a/docs/components/DocGrid.tsx
+++ b/docs/components/DocGrid.tsx
@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
import { clsx } from "clsx";
+import type { ReactNode } from "react";
import "./DocGrid.css";
@@ -17,8 +17,8 @@ export const DocGrid = ({
return (
{children}
diff --git a/docs/components/DraggableSnapshot.tsx b/docs/components/DraggableSnapshot.tsx
index 7e5ae9fa6a..cfe6d8ab7a 100644
--- a/docs/components/DraggableSnapshot.tsx
+++ b/docs/components/DraggableSnapshot.tsx
@@ -1,13 +1,13 @@
+import { Button } from "@salt-ds/core";
+import { clsx } from "clsx";
import {
+ type CSSProperties,
+ type KeyboardEvent,
+ type MouseEvent as ReactMouseEvent,
useCallback,
useRef,
useState,
- CSSProperties,
- MouseEvent as ReactMouseEvent,
- KeyboardEvent,
} from "react";
-import { clsx } from "clsx";
-import { Button } from "@salt-ds/core";
import "./DraggableSnapshot.css";
@@ -64,7 +64,7 @@ export const DraggableImg = ({
lastMousePos.current[1] = screenY;
moveSnapshot(xDiff, yDiff);
},
- [moveSnapshot]
+ [moveSnapshot],
);
const handleMouseUp = useCallback(() => {
@@ -78,7 +78,7 @@ export const DraggableImg = ({
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
},
- [handleMouseMove, handleMouseUp]
+ [handleMouseMove, handleMouseUp],
);
const handleKeyDown = useCallback(
@@ -92,7 +92,7 @@ export const DraggableImg = ({
moveSnapshot(...moveBy);
}
},
- [moveSnapshot]
+ [moveSnapshot],
);
const alignImages = useCallback(() => {
diff --git a/docs/components/FontSizeBlock.tsx b/docs/components/FontSizeBlock.tsx
index e5cf665571..bda1b1fd65 100644
--- a/docs/components/FontSizeBlock.tsx
+++ b/docs/components/FontSizeBlock.tsx
@@ -1,5 +1,5 @@
import { clsx } from "clsx";
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
import "./FontBlock.css";
diff --git a/docs/components/FontWeightBlock.tsx b/docs/components/FontWeightBlock.tsx
index ac5b36f85a..e0eb1d28e4 100644
--- a/docs/components/FontWeightBlock.tsx
+++ b/docs/components/FontWeightBlock.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
import { ReplacementToken } from "./ReplacementToken";
import "./FontBlock.css";
diff --git a/docs/components/LetterSpacingBlock.tsx b/docs/components/LetterSpacingBlock.tsx
index 9174ce68b2..5707f8dc7c 100644
--- a/docs/components/LetterSpacingBlock.tsx
+++ b/docs/components/LetterSpacingBlock.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
import "./LetterSpacingBlock.css";
diff --git a/docs/components/LineBlock.tsx b/docs/components/LineBlock.tsx
index de59643ed9..52aa273677 100644
--- a/docs/components/LineBlock.tsx
+++ b/docs/components/LineBlock.tsx
@@ -1,22 +1,8 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
import { ReplacementToken } from "./ReplacementToken";
import "./LineBlock.css";
-export const LineBlockCell = () => {
- return (
-
- {DensityValues.map((d, i) => (
-
+ {DensityValues.map((d) => (
+
))}
@@ -125,8 +125,8 @@ export const QAContainer = ({
))}
) : (
- DensityValues.map((d, i) => (
-
+ DensityValues.map((d) => (
+
{
@@ -36,7 +28,7 @@ export interface QAContainerNoStyleInjectionProps extends QAContainerProps {
}
export const QAContainerNoStyleInjection = (
- props: QAContainerNoStyleInjectionProps
+ props: QAContainerNoStyleInjectionProps,
) => {
// order is important!
useDynamicStyleSheet(String(iconCss), "salt-icon-css");
diff --git a/docs/components/ResponsiveContainer.tsx b/docs/components/ResponsiveContainer.tsx
index d51b51f649..0bb9afd6ba 100644
--- a/docs/components/ResponsiveContainer.tsx
+++ b/docs/components/ResponsiveContainer.tsx
@@ -1,7 +1,7 @@
-import { useState, ReactNode, SyntheticEvent } from "react";
+import { type ReactNode, type SyntheticEvent, useState } from "react";
import "./ResponsiveContainer.css";
+import { ToggleButton, ToggleButtonGroup, Tooltip } from "@salt-ds/core";
import { Slider, StepperInput } from "@salt-ds/lab";
-import { Tooltip, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
export const ResponsiveContainer = ({ children }: { children?: ReactNode }) => {
const [containerWidth, setWidth] = useState(90);
diff --git a/docs/components/TextBlock.tsx b/docs/components/TextBlock.tsx
index cc29db1240..c5b69dd972 100644
--- a/docs/components/TextBlock.tsx
+++ b/docs/components/TextBlock.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
import type { CSSProperties } from "react";
import "./TextBlock.css";
diff --git a/docs/decorators/withDateMock.tsx b/docs/decorators/withDateMock.tsx
index e9cd8f8e19..9bc49f8425 100644
--- a/docs/decorators/withDateMock.tsx
+++ b/docs/decorators/withDateMock.tsx
@@ -1,5 +1,5 @@
-import { Decorator } from "@storybook/react";
import { useIsomorphicLayoutEffect } from "@salt-ds/core";
+import type { Decorator } from "@storybook/react";
import MockDate from "mockdate";
export const withDateMock: Decorator = (Story, context) => {
diff --git a/docs/decorators/withResponsiveWrapper.tsx b/docs/decorators/withResponsiveWrapper.tsx
index 6c955392d9..0ee4121185 100644
--- a/docs/decorators/withResponsiveWrapper.tsx
+++ b/docs/decorators/withResponsiveWrapper.tsx
@@ -1,4 +1,4 @@
-import { Decorator } from "@storybook/react";
+import type { Decorator } from "@storybook/react";
import { ResponsiveContainer } from "docs/components/ResponsiveContainer";
export const withResponsiveWrapper: Decorator = (Story, context) => {
diff --git a/docs/decorators/withScaffold.tsx b/docs/decorators/withScaffold.tsx
index 126e8dcaa2..cb062a7578 100644
--- a/docs/decorators/withScaffold.tsx
+++ b/docs/decorators/withScaffold.tsx
@@ -1,5 +1,5 @@
+import { H1, H2, Link, StackLayout, Text } from "@salt-ds/core";
import type { Decorator } from "@storybook/react";
-import { H1, H2, Text, Link, StackLayout } from "@salt-ds/core";
/** A storybook decorator that adds a scaffold around a story */
export const withScaffold: Decorator = (Story, context) => {
diff --git a/docs/decorators/withTextSpacingWrapper.tsx b/docs/decorators/withTextSpacingWrapper.tsx
index 55770e2d13..b5350a3413 100644
--- a/docs/decorators/withTextSpacingWrapper.tsx
+++ b/docs/decorators/withTextSpacingWrapper.tsx
@@ -1,4 +1,4 @@
-import { Decorator } from "@storybook/react";
+import type { Decorator } from "@storybook/react";
import "./text-spacing.css";
import { useEffect } from "react";
diff --git a/docs/decorators/withTheme.tsx b/docs/decorators/withTheme.tsx
index d9c672dc92..eb9afc4043 100644
--- a/docs/decorators/withTheme.tsx
+++ b/docs/decorators/withTheme.tsx
@@ -1,12 +1,12 @@
-import { Decorator } from "@storybook/react";
import {
- getCharacteristicValue,
ModeValues,
Panel,
SaltProvider,
- useTheme,
UNSTABLE_SaltProviderNext,
+ getCharacteristicValue,
+ useTheme,
} from "@salt-ds/core";
+import type { Decorator } from "@storybook/react";
import { useEffect } from "react";
// Modified from storybook background addon
@@ -31,22 +31,23 @@ function SetBackground({ viewMode, id }: { viewMode: string; id: string }) {
const selectorId =
viewMode === "docs"
? `addon-backgrounds-docs-${id}`
- : `addon-backgrounds-color`;
+ : "addon-backgrounds-color";
- const selector = viewMode === "docs" ? `.docs-story` : ".sb-show-main";
+ const selector = viewMode === "docs" ? ".docs-story" : ".sb-show-main";
+ // biome-ignore lint/correctness/useExhaustiveDependencies: mode is needed.
useEffect(() => {
const color = getCharacteristicValue(
theme,
"text",
"primary-foreground",
- document.querySelector(".salt-theme") as HTMLElement
+ document.querySelector(".salt-theme") as HTMLElement,
);
const background = getCharacteristicValue(
theme,
"container",
"primary-background",
- document.querySelector(".salt-theme") as HTMLElement
+ document.querySelector(".salt-theme") as HTMLElement,
);
addBackgroundStyle(
@@ -57,7 +58,7 @@ function SetBackground({ viewMode, id }: { viewMode: string; id: string }) {
color: ${color || "unset"};
transition: background-color 0.3s;
}
- `
+ `,
);
}, [selectorId, selector, mode, theme]);
diff --git a/docs/public/mockServiceWorker.js b/docs/public/mockServiceWorker.js
index 87e0f31b81..2838108530 100644
--- a/docs/public/mockServiceWorker.js
+++ b/docs/public/mockServiceWorker.js
@@ -1,6 +1,3 @@
-/* eslint-disable */
-/* tslint:disable */
-
/**
* Mock Service Worker (1.2.1).
* @see https://github.com/mswjs/msw
diff --git a/docs/story-layout/ColumnLayout.tsx b/docs/story-layout/ColumnLayout.tsx
index 9c915dde05..a46af4d99d 100644
--- a/docs/story-layout/ColumnLayout.tsx
+++ b/docs/story-layout/ColumnLayout.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
import "./ColumnLayout.css";
export const ColumnLayoutContainer = ({
diff --git a/docs/tsdeclarations.d.ts b/docs/tsdeclarations.d.ts
index f0977a4944..9a767b4c6f 100644
--- a/docs/tsdeclarations.d.ts
+++ b/docs/tsdeclarations.d.ts
@@ -1,6 +1,7 @@
// VS Code doesn't like this because it duplicates a declaration in React, but it's for StoryBook and
// our story type-checking script
declare module "*.svg" {
+ // biome-ignore lint/suspicious/noExplicitAny: any is simpler here
const content: any;
export default content;
}
diff --git a/eslint-local-rules.js b/eslint-local-rules.js
index 284f0fce65..9e01a57de6 100644
--- a/eslint-local-rules.js
+++ b/eslint-local-rules.js
@@ -1,5 +1,3 @@
-"use strict";
-
module.exports = {
"must-inject-css": {
meta: {
@@ -7,21 +5,19 @@ module.exports = {
description: "must inject css",
},
},
- create: function (context) {
- return {
- ImportDeclaration: function (node) {
- const importPath = node.source.value;
- const importSpecifiers = node.specifiers;
+ create: (context) => ({
+ ImportDeclaration: (node) => {
+ const importPath = node.source.value;
+ const importSpecifiers = node.specifiers;
- if (importPath.endsWith(".css") && importSpecifiers.length === 0) {
- context.report({
- node: node,
- message:
- "CSS imports must be assigned to a variable and then injected",
- });
- }
- },
- };
- },
+ if (importPath.endsWith(".css") && importSpecifiers.length === 0) {
+ context.report({
+ node: node,
+ message:
+ "CSS imports must be assigned to a variable and then injected",
+ });
+ }
+ },
+ }),
},
};
diff --git a/package.json b/package.json
index 18efd5439e..611ad71c44 100644
--- a/package.json
+++ b/package.json
@@ -5,12 +5,7 @@
"main": "index.js",
"license": "MIT",
"repository": "https://github.com/jpmorganchase/salt-ds",
- "workspaces": [
- "packages/**",
- "tooling/**",
- "docs",
- "site"
- ],
+ "workspaces": ["packages/**", "tooling/**", "docs", "site"],
"modular": {
"type": "root"
},
@@ -34,12 +29,10 @@
"test": "vitest",
"test:components": "cypress run --component --browser chrome --headless",
"test:components:local": "cypress open --component --browser electron",
- "lint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx",
- "lint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx",
- "lint:core": "yarn eslint \"packages/core/src/**/*.{ts,tsx}\" --ignore-pattern \"**/__tests__/**\"",
- "prettier": "pretty-quick --branch main",
- "prettier:all": "prettier --write .",
+ "prettier": "prettier --write .",
"prettier:ci": "prettier --check .",
+ "lint": "biome check",
+ "lint:fix": "biome check --fix",
"lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab && yarn lint:style:ag-theme",
"lint:style:core": "yarn stylelint -f verbose \"packages/core/src/**/*.css\"",
"lint:style:icon": "yarn stylelint -f verbose \"packages/icons/src/**/*.css\"",
@@ -51,6 +44,7 @@
"chromatic": "chromatic"
},
"dependencies": {
+ "@biomejs/biome": "1.8.3",
"@changesets/cli": "^2.25.2",
"@cypress/code-coverage": "^3.12.35",
"@faker-js/faker": "^8.0.0",
@@ -83,8 +77,6 @@
"@types/react-color": "^3.0.6",
"@types/react-dom": "^18.0.0",
"@types/tinycolor2": "^1.4.3",
- "@typescript-eslint/eslint-plugin": "^6.6.0",
- "@typescript-eslint/parser": "^6.6.0",
"@vitejs/plugin-react": "^4.1.0",
"ag-grid-community": "^31.3.0",
"ag-grid-enterprise": "^31.3.0",
@@ -98,18 +90,11 @@
"cypress-real-events": "^1.12.0",
"deepmerge": "^4.2.2",
"dom-accessibility-api": "^0.6.3",
- "eslint": "^8.48.0",
- "eslint-config-prettier": "^9.0.0",
- "eslint-plugin-cypress": "^3.0.0",
- "eslint-plugin-import": "^2.28.1",
- "eslint-plugin-local-rules": "^3.0.0",
- "eslint-plugin-storybook": "^0.8.0",
"mockdate": "^3.0.5",
"modular-scripts": "patch:modular-scripts@npm:3.6.0#.yarn/patches/modular-scripts-npm-3.6.0-d967962075.patch",
"msw": "^1.2.1",
"msw-storybook-addon": "^1.8.0",
"prettier": "^2.6.2",
- "pretty-quick": "^3.1.3",
"react": "^18.3.1",
"react-docgen-typescript": "2.2.2",
"react-dom": "^18.3.1",
@@ -127,7 +112,6 @@
},
"resolutions": {
"@changesets/assemble-release-plan@npm:^6.0.2": "patch:@changesets/assemble-release-plan@npm%3A6.0.2#~/.yarn/patches/@changesets-assemble-release-plan-npm-6.0.2-d74b7b2762.patch",
- "@next/eslint-plugin-next": "^14.0.0",
"@salt-ds/lab": "workspace:*",
"modular-scripts/rollup": "2.79.1",
"next": "^14.0.0",
@@ -136,12 +120,7 @@
"recursive-readdir": "2.2.3"
},
"browserslist": {
- "production": [
- "chrome 79",
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
+ "production": ["chrome 79", ">0.2%", "not dead", "not op_mini all"],
"development": [
"chrome 79",
"last 1 chrome version",
diff --git a/packages/ag-grid-theme/package.json b/packages/ag-grid-theme/package.json
index fdbd2b3171..69413dbcc3 100644
--- a/packages/ag-grid-theme/package.json
+++ b/packages/ag-grid-theme/package.json
@@ -9,10 +9,7 @@
},
"bugs": "https://github.com/jpmorganchase/salt-ds/issues",
"style": "salt-ag-theme.css",
- "files": [
- "/fonts",
- "/salt-ag-theme.css"
- ],
+ "files": ["/fonts", "/salt-ag-theme.css"],
"scripts": {
"build": "yarn node ./scripts/build.mjs",
"build-watch": "yarn node ./scripts/build.mjs --watch"
diff --git a/packages/ag-grid-theme/scripts/build.mjs b/packages/ag-grid-theme/scripts/build.mjs
index 5b6ba1b06f..064ada3881 100644
--- a/packages/ag-grid-theme/scripts/build.mjs
+++ b/packages/ag-grid-theme/scripts/build.mjs
@@ -1,9 +1,9 @@
-import esbuild from "esbuild";
-import path from "node:path";
-import { deleteSync } from "del";
import fs from "node:fs";
-import { fileURLToPath } from "node:url";
+import path from "node:path";
import { argv } from "node:process";
+import { fileURLToPath } from "node:url";
+import { deleteSync } from "del";
+import esbuild from "esbuild";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const buildFolder = path.join(__dirname, "../../../dist/salt-ds-ag-grid-theme");
@@ -34,12 +34,12 @@ esbuild
console.log(
`${path.relative(
process.cwd(),
- path.resolve(__dirname, "../package.json")
+ path.resolve(__dirname, "../package.json"),
)} copied to ${path.relative(
process.cwd(),
- path.join(buildFolder, "package.json")
- )}`
+ path.join(buildFolder, "package.json"),
+ )}`,
);
- }
+ },
);
});
diff --git a/packages/ag-grid-theme/src/dependencies/columnSpanningExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/columnSpanningExampleColumns.ts
index e666521d69..24bda4a8e1 100644
--- a/packages/ag-grid-theme/src/dependencies/columnSpanningExampleColumns.ts
+++ b/packages/ag-grid-theme/src/dependencies/columnSpanningExampleColumns.ts
@@ -1,4 +1,4 @@
-import { ColDef, ColSpanParams } from "ag-grid-community";
+import type { ColDef, ColSpanParams } from "ag-grid-community";
const columnSpanningExampleColumns: ColDef[] = [
{
@@ -14,11 +14,11 @@ const columnSpanningExampleColumns: ColDef[] = [
const code = param.data.code;
if (code === "AL") {
return 2;
- } else if (code === "CA") {
+ }
+ if (code === "CA") {
return 3;
- } else {
- return 1;
}
+ return 1;
},
},
{
diff --git a/packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts
index 89b61c15fc..2ed7d19981 100644
--- a/packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts
+++ b/packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts
@@ -1,4 +1,4 @@
-import { ColDef } from "ag-grid-community";
+import type { ColDef } from "ag-grid-community";
const customFilterExampleColumns: ColDef[] = [
{
diff --git a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts
index adc4b99dd9..9dc31c7642 100644
--- a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts
+++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts
@@ -1,4 +1,4 @@
-import { ColDef } from "ag-grid-community";
+import type { ColDef } from "ag-grid-community";
const dataGridExampleColumns: ColDef[] = [
{
diff --git a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsColoration.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsColoration.ts
index 39ccd46678..65370339fb 100644
--- a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsColoration.ts
+++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsColoration.ts
@@ -1,4 +1,4 @@
-import { CellClassParams } from "ag-grid-community";
+import type { CellClassParams } from "ag-grid-community";
const dataGridExampleColumnsColoration = [
{
@@ -24,9 +24,8 @@ const dataGridExampleColumnsColoration = [
color: "var(--salt-color-gray-900)",
backgroundColor: "var(--salt-color-orange-20)",
};
- } else {
- return null;
}
+ return null;
},
},
{
diff --git a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts
index 6160f4e52b..8566023cd9 100644
--- a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts
+++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts
@@ -1,4 +1,4 @@
-import { ColDef } from "ag-grid-community";
+import type { ColDef } from "ag-grid-community";
const dataGridExampleColumnsWrap: ColDef[] = [
{
diff --git a/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts
index 42bc5f177a..bc592e8859 100644
--- a/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts
+++ b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts
@@ -1,9 +1,15 @@
import { useDensity, useTheme } from "@salt-ds/core";
-import { ColumnApi, GridApi, GridReadyEvent } from "ag-grid-community";
+import type { ColumnApi, GridApi, GridReadyEvent } from "ag-grid-community";
import { LicenseManager } from "ag-grid-enterprise";
-import { AgGridReactProps } from "ag-grid-react";
+import type { AgGridReactProps } from "ag-grid-react";
import { clsx } from "clsx";
-import { HTMLAttributes, useCallback, useMemo, useRef, useState } from "react";
+import {
+ type HTMLAttributes,
+ useCallback,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
LicenseManager.setLicenseKey("your license key");
@@ -58,7 +64,7 @@ export function useAgGridHelpers({
const className = clsx(
containerClassName,
- `ag-theme-salt${compact && density === "high" ? `-compact` : ``}-${mode}`
+ `ag-theme-salt${compact && density === "high" ? "-compact" : ""}-${mode}`,
);
const onGridReady = useCallback(({ api, columnApi }: GridReadyEvent) => {
diff --git a/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx b/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx
index 5774d42e1c..520a6534fc 100644
--- a/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx
+++ b/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
@@ -16,9 +16,7 @@ const CheckboxSelection = (props: AgGridReactProps) => {
rowSelection="multiple"
onFirstDataRendered={(params) => {
params.api.forEachNode((node, index) => {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
if (node.data && index < 7 && index > 2) {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
node.setSelected(true);
}
});
diff --git a/packages/ag-grid-theme/src/examples/Coloration.tsx b/packages/ag-grid-theme/src/examples/Coloration.tsx
index 907e1aa9f8..97909f75b6 100644
--- a/packages/ag-grid-theme/src/examples/Coloration.tsx
+++ b/packages/ag-grid-theme/src/examples/Coloration.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleColumnsColoration from "../dependencies/dataGridExampleColumnsColoration";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/ColumnGroup.tsx b/packages/ag-grid-theme/src/examples/ColumnGroup.tsx
index 6e3bcc8127..cc7613c57f 100644
--- a/packages/ag-grid-theme/src/examples/ColumnGroup.tsx
+++ b/packages/ag-grid-theme/src/examples/ColumnGroup.tsx
@@ -1,5 +1,5 @@
-import { ColDef, ColGroupDef } from "ag-grid-community";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import type { ColDef, ColGroupDef } from "ag-grid-community";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx b/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx
index 6a9a63d020..9d9a1496b1 100644
--- a/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx
+++ b/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import columnSpanningExampleColumns from "../dependencies/columnSpanningExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/ContextMenu.tsx b/packages/ag-grid-theme/src/examples/ContextMenu.tsx
index cd43b866ee..573480666b 100644
--- a/packages/ag-grid-theme/src/examples/ContextMenu.tsx
+++ b/packages/ag-grid-theme/src/examples/ContextMenu.tsx
@@ -1,5 +1,5 @@
-import { GetContextMenuItemsParams } from "ag-grid-community";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import type { GetContextMenuItemsParams } from "ag-grid-community";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import mac from "../dependencies/mac.png";
@@ -12,10 +12,8 @@ const ContextMenu = (props: AgGridReactProps) => {
const getContextMenuItems = (params: GetContextMenuItemsParams) => {
const result = [
{
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
name: `Alert ${params.value}`,
action() {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
window.alert(`Alerting about ${params.value}`);
},
cssClasses: ["redFont", "bold"],
@@ -115,7 +113,7 @@ const ContextMenu = (props: AgGridReactProps) => {
action() {
console.log("Windows Item Selected");
},
- icon: `
`,
+ icon: ``,
},
{
name: "Mac",
@@ -123,7 +121,7 @@ const ContextMenu = (props: AgGridReactProps) => {
action() {
console.log("Mac Item Selected");
},
- icon: `
`,
+ icon: ``,
},
"separator",
{
@@ -132,7 +130,7 @@ const ContextMenu = (props: AgGridReactProps) => {
action() {
console.log("Checked Selected");
},
- icon: ``,
+ icon: ``,
},
"copy",
];
diff --git a/packages/ag-grid-theme/src/examples/CustomFilter.tsx b/packages/ag-grid-theme/src/examples/CustomFilter.tsx
index cbf5665324..79c8e2828a 100644
--- a/packages/ag-grid-theme/src/examples/CustomFilter.tsx
+++ b/packages/ag-grid-theme/src/examples/CustomFilter.tsx
@@ -1,5 +1,5 @@
import { Button, FlowLayout, StackLayout } from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import { useState } from "react";
import customFilterExampleColumns from "../dependencies/customFilterExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
@@ -10,59 +10,57 @@ const CustomFilter = (props: AgGridReactProps) => {
const { api, agGridProps, containerProps } = useAgGridHelpers();
const handlePopMt100kClick = () => {
- const popMt100kComponent = api!.getFilterInstance("population")!;
- api!.setFilterModel(null);
+ const popMt100kComponent = api?.getFilterInstance("population");
+ api?.setFilterModel(null);
- popMt100kComponent.setModel({
+ popMt100kComponent?.setModel({
type: "greaterThan",
filter: 100000,
filterTo: null,
});
- api!.onFilterChanged();
+ api?.onFilterChanged();
setHasSavedState(false);
};
const handlePopLt100kClick = () => {
- const popLt100kComponent = api!.getFilterInstance("population")!;
- api!.setFilterModel(null);
+ const popLt100kComponent = api?.getFilterInstance("population");
+ api?.setFilterModel(null);
- popLt100kComponent.setModel({
+ popLt100kComponent?.setModel({
type: "lessThan",
filter: 100000,
filterTo: null,
});
- api!.onFilterChanged();
+ api?.onFilterChanged();
setHasSavedState(false);
};
const filterNewYork = () => {
- const filterNewYork = api!.getFilterInstance("name")!;
- api!.setFilterModel(null);
- filterNewYork.setModel({
+ const filterNewYork = api?.getFilterInstance("name");
+ api?.setFilterModel(null);
+ filterNewYork?.setModel({
type: "equals",
filter: "New York",
filterTo: null,
});
- api!.onFilterChanged();
+ api?.onFilterChanged();
setHasSavedState(false);
};
const saveState = () => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
- (window as any).filterState = api!.getFilterModel();
+ (window as any).filterState = api?.getFilterModel();
setHasSavedState(false);
};
const restoreState = () => {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
- api!.setFilterModel((window as any).filterState);
+ api?.setFilterModel((window as any).filterState);
setHasSavedState(true);
};
const clearState = () => {
- api!.setFilterModel(null);
+ api?.setFilterModel(null);
setHasSavedState(true);
};
diff --git a/packages/ag-grid-theme/src/examples/Default.tsx b/packages/ag-grid-theme/src/examples/Default.tsx
index b84e056aff..213930f002 100644
--- a/packages/ag-grid-theme/src/examples/Default.tsx
+++ b/packages/ag-grid-theme/src/examples/Default.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/DragRowOrder.tsx b/packages/ag-grid-theme/src/examples/DragRowOrder.tsx
index a7be200abf..9e420f4d8f 100644
--- a/packages/ag-grid-theme/src/examples/DragRowOrder.tsx
+++ b/packages/ag-grid-theme/src/examples/DragRowOrder.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import rowDragColumns from "../dependencies/rowDragColumns";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/FloatingFilter.tsx b/packages/ag-grid-theme/src/examples/FloatingFilter.tsx
index dfed46e6b7..efef94a6ba 100644
--- a/packages/ag-grid-theme/src/examples/FloatingFilter.tsx
+++ b/packages/ag-grid-theme/src/examples/FloatingFilter.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import customFilterExampleColumns from "../dependencies/customFilterExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/HDCompact.tsx b/packages/ag-grid-theme/src/examples/HDCompact.tsx
index f22d495de3..f4d715ac13 100644
--- a/packages/ag-grid-theme/src/examples/HDCompact.tsx
+++ b/packages/ag-grid-theme/src/examples/HDCompact.tsx
@@ -3,7 +3,7 @@ import {
UNSTABLE_SaltProviderNext,
useTheme,
} from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
@@ -42,9 +42,7 @@ const HDCompact = (props: AgGridReactProps) => {
enableRangeSelection={true}
onFirstDataRendered={(params) => {
params.api.forEachNode((node, index) => {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
if (node.data && index < 3) {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
node.setSelected(true);
}
});
diff --git a/packages/ag-grid-theme/src/examples/Icons.tsx b/packages/ag-grid-theme/src/examples/Icons.tsx
index 08c3751c33..a37e747911 100644
--- a/packages/ag-grid-theme/src/examples/Icons.tsx
+++ b/packages/ag-grid-theme/src/examples/Icons.tsx
@@ -80,7 +80,7 @@ const Icons = () => {
return (
,
);
cy.findByRole("combobox").should("be.disabled");
@@ -349,7 +349,7 @@ describe("Given a ComboBox", () => {
cy.findByRole("option", { name: "California" }).should(
"have.attr",
"aria-disabled",
- "true"
+ "true",
);
cy.realType("California");
cy.realPress("Enter");
@@ -365,13 +365,13 @@ describe("Given a ComboBox", () => {
selectOnTab
multiselect
onSelectionChange={selectionChangeSpy}
- />
+ />,
);
cy.findByRole("combobox").realClick();
cy.findByRole("option", { name: "California" }).should(
"have.attr",
"aria-disabled",
- "true"
+ "true",
);
cy.realType("California");
cy.realPress("Tab");
@@ -386,7 +386,7 @@ describe("Given a ComboBox", () => {
selectOnTab
multiselect
onSelectionChange={selectionChangeSpy}
- />
+ />,
);
cy.findByRole("combobox").realClick();
cy.realType("alabama");
@@ -400,31 +400,31 @@ describe("Given a ComboBox", () => {
cy.findByRole("combobox").should(
"have.attr",
"aria-multiselectable",
- "true"
+ "true",
);
cy.findByRole("combobox").realClick();
cy.findByRole("option", { name: "Alabama" }).realClick();
cy.get("@selectionChange").should(
"have.been.calledWith",
Cypress.sinon.match.any,
- Cypress.sinon.match.array.deepEquals(["Alabama"])
+ Cypress.sinon.match.array.deepEquals(["Alabama"]),
);
cy.findByRole("option", { name: "Alabama" }).should(
"have.attr",
"aria-selected",
- "true"
+ "true",
);
cy.findByRole("button", { name: /^Alabama/ }).should("be.visible");
cy.findByRole("option", { name: "Alaska" }).realClick();
cy.get("@selectionChange").should(
"have.been.calledWith",
Cypress.sinon.match.any,
- Cypress.sinon.match.array.deepEquals(["Alabama", "Alaska"])
+ Cypress.sinon.match.array.deepEquals(["Alabama", "Alaska"]),
);
cy.findByRole("option", { name: "Alaska" }).should(
"have.attr",
"aria-selected",
- "true"
+ "true",
);
cy.findByRole("button", { name: /^Alabama/ }).should("be.visible");
cy.findByRole("button", { name: /^Alaska/ }).should("be.visible");
@@ -441,12 +441,12 @@ describe("Given a ComboBox", () => {
cy.get("@selectionChange").should(
"have.been.calledWith",
Cypress.sinon.match.any,
- Cypress.sinon.match.array.deepEquals(["Alabama"])
+ Cypress.sinon.match.array.deepEquals(["Alabama"]),
);
cy.findByRole("option", { name: "Alabama" }).should(
"have.attr",
"aria-selected",
- "true"
+ "true",
);
cy.findByRole("button", { name: /^Alabama/ }).should("be.visible");
cy.realPress("ArrowDown");
@@ -454,12 +454,12 @@ describe("Given a ComboBox", () => {
cy.get("@selectionChange").should(
"have.been.calledWith",
Cypress.sinon.match.any,
- Cypress.sinon.match.array.deepEquals(["Alabama", "Alaska"])
+ Cypress.sinon.match.array.deepEquals(["Alabama", "Alaska"]),
);
cy.findByRole("option", { name: "Alaska" }).should(
"have.attr",
"aria-selected",
- "true"
+ "true",
);
cy.findByRole("button", { name: /^Alabama/ }).should("be.visible");
cy.findByRole("button", { name: /^Alaska/ }).should("be.visible");
@@ -476,7 +476,7 @@ describe("Given a ComboBox", () => {
cy.get("@selectionChange").should(
"have.been.calledWith",
Cypress.sinon.match.any,
- Cypress.sinon.match.array.deepEquals(["Alabama"])
+ Cypress.sinon.match.array.deepEquals(["Alabama"]),
);
cy.findByRole("button", { name: /^Alabama/ }).should("be.visible");
});
@@ -499,7 +499,7 @@ describe("Given a ComboBox", () => {
cy.get("@selectionChange").should(
"have.been.calledWith",
Cypress.sinon.match.any,
- Cypress.sinon.match.array.deepEquals(["Alabama"])
+ Cypress.sinon.match.array.deepEquals(["Alabama"]),
);
cy.findByRole("button", { name: /^Alabama/ }).should("be.visible");
cy.findByRole("combobox").realClick();
@@ -515,7 +515,7 @@ describe("Given a ComboBox", () => {
cy.findByRole("combobox").should("have.accessibleName", "State");
cy.findByRole("combobox").should(
"have.accessibleDescription",
- "Pick a US state"
+ "Pick a US state",
);
});
@@ -534,7 +534,7 @@ describe("Given a ComboBox", () => {
cy.findAllByRole("option").should("have.length", 1);
cy.findByRole("option").should(
"have.text",
- `No results found for "Yelloww"`
+ `No results found for "Yelloww"`,
);
});
@@ -568,7 +568,7 @@ describe("Given a ComboBox", () => {
cy.get("@selectionChange").should(
"have.been.calledWith",
Cypress.sinon.match.any,
- Cypress.sinon.match.array.deepEquals(["Alabama"])
+ Cypress.sinon.match.array.deepEquals(["Alabama"]),
);
});
@@ -609,7 +609,7 @@ describe("Given a ComboBox", () => {
cy.findByRole("combobox").clear();
cy.findByRole("combobox").should("have.value", "");
cy.findByRole("option", { name: "California" }).should(
- "not.be.ariaSelected"
+ "not.be.ariaSelected",
);
});
@@ -629,7 +629,7 @@ describe("Given a ComboBox", () => {
cy.findByRole("option", { name: "Alabama" }).should("be.activeDescendant");
cy.realType("C");
cy.findByRole("option", { name: "California" }).should(
- "be.activeDescendant"
+ "be.activeDescendant",
);
cy.realType("{backspace}");
cy.findAllByRole("option").should("not.be.activeDescendant");
@@ -689,7 +689,7 @@ describe("Given a ComboBox", () => {
cy.mount(
-
-
- );
-};
-
-export const LineBlockCode = ({ children }: { children: ReactNode }) => {
- return {children};
-};
-
export const LineBlock = ({
token,
lineWidth,
@@ -38,12 +24,12 @@ export const LineBlock = ({
d="M 0,8 L 16,8"
vectorEffect="non-scaling-stroke"
strokeWidth={lineWidth ? `var(${lineWidth})` : "1px"}
- stroke-dasharray={
+ strokeDasharray={
lineStyle === "dashed"
? "10,10"
: lineStyle === "dotted"
- ? "3,3"
- : "0"
+ ? "3,3"
+ : "0"
}
/>
diff --git a/docs/components/OpacityBlock.tsx b/docs/components/OpacityBlock.tsx
index 4bcbdc26fc..62fa8079b1 100644
--- a/docs/components/OpacityBlock.tsx
+++ b/docs/components/OpacityBlock.tsx
@@ -1,5 +1,5 @@
-import { clsx } from "clsx";
import { Tooltip } from "@salt-ds/core";
+import { clsx } from "clsx";
import { ReplacementToken } from "./ReplacementToken";
import "./OpacityBlock.css";
diff --git a/docs/components/QAContainer.tsx b/docs/components/QAContainer.tsx
index 03698ed105..499b34e843 100644
--- a/docs/components/QAContainer.tsx
+++ b/docs/components/QAContainer.tsx
@@ -1,17 +1,17 @@
import {
- makePrefixer,
- Mode,
+ type Mode,
SaltProvider,
UNSTABLE_SaltProviderNext,
+ makePrefixer,
useTheme,
} from "@salt-ds/core";
import { clsx } from "clsx";
import {
+ type CSSProperties,
Children,
- CSSProperties,
- DetailedHTMLProps,
+ type DetailedHTMLProps,
Fragment,
- HTMLAttributes,
+ type HTMLAttributes,
} from "react";
import { DraggableImg } from "./DraggableSnapshot";
@@ -66,8 +66,8 @@ const DensityBlock = ({
return (
{children}
{providedIcons.map((x) => (
-
+ ,
);
cy.findByText(BUTTON_TEXT).click();
@@ -99,7 +97,7 @@ describe("Given useAriaAnnouncer", () => {
mount(
+ ,
);
cy.findByText(BUTTON_TEXT_WAIT).click();
@@ -116,7 +114,7 @@ describe("Given useAriaAnnouncer", () => {
mount(
+ ,
);
cy.findByText(BUTTON_TEXT).click();
@@ -139,7 +137,7 @@ describe("Given useAriaAnnouncer", () => {
return `test ${increment}`;
}}
/>
-
+ ,
);
cy.findByText(BUTTON_TEXT).click().click();
diff --git a/packages/core/src/__tests__/__e2e__/aria-announcer/useAriaAnnounce.cy.tsx b/packages/core/src/__tests__/__e2e__/aria-announcer/useAriaAnnounce.cy.tsx
index 0269970275..4ad68bad32 100644
--- a/packages/core/src/__tests__/__e2e__/aria-announcer/useAriaAnnounce.cy.tsx
+++ b/packages/core/src/__tests__/__e2e__/aria-announcer/useAriaAnnounce.cy.tsx
@@ -1,5 +1,5 @@
-import { ReactNode, useState } from "react";
import { mount } from "cypress/react18";
+import { type ReactNode, useState } from "react";
import {
AriaAnnounce,
@@ -19,7 +19,7 @@ interface SimpleTestContentProps {
announcement?: string;
delay?: number;
debounce?: number;
- getAnnouncement?: Function;
+ getAnnouncement?: () => string;
}
const SimpleTestContent = ({
@@ -36,14 +36,16 @@ const SimpleTestContent = ({
<>
+
+ (
- lst: T[]
+ lst: T[],
) {
return lst.reduce((result, row) => {
const data = [];
@@ -15,7 +15,7 @@ const generateData = function generateData(
const o = { ...row, name: `${row.name} ${i}` };
data.push(o);
}
- return [...result, ...data];
+ return result.concat(data);
}, [] as T[]);
};
@@ -26,20 +26,20 @@ const InfiniteScroll = (props: AgGridReactProps) => {
useEffect(() => {
if (isGridReady) {
- api!.sizeColumnsToFit();
+ api?.sizeColumnsToFit();
- api!.setGridOption("datasource", {
+ api?.setGridOption("datasource", {
getRows: ({ startRow, endRow, successCallback }) => {
setTimeout(() => {
successCallback(
dataSourceRows.slice(startRow, endRow),
- dataSourceRows.length
+ dataSourceRows.length,
);
}, 500);
},
});
}
- }, [isGridReady]);
+ }, [isGridReady, api]);
return (
(fieldName: keyof T, rows: T[]) {
- return rows.map((row) => row[fieldName]);
-};
+const fields = (fieldName: keyof T, rows: T[]) =>
+ rows.map((row) => row[fieldName]);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const headerRow: any[] = [
+const headerRow: AgGridReactProps["pinnedTopRowData"] = [
{
name: "Top",
code: "Top",
@@ -50,8 +48,10 @@ const PinnedRowsExample = function PinnedRowsExample({
const { agGridProps, containerProps } = useAgGridHelpers();
const getColumnData = () => {
- return fields(aggregateColumn, rowData!).filter(
- (field) => typeof field === "number"
+ if (!rowData) return [];
+
+ return fields(aggregateColumn, rowData).filter(
+ (field) => typeof field === "number",
) as number[];
};
diff --git a/packages/ag-grid-theme/src/examples/RangeSelection.tsx b/packages/ag-grid-theme/src/examples/RangeSelection.tsx
index 8b8c0f409a..291c670103 100644
--- a/packages/ag-grid-theme/src/examples/RangeSelection.tsx
+++ b/packages/ag-grid-theme/src/examples/RangeSelection.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import { useEffect } from "react";
import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
@@ -16,7 +16,7 @@ export const RangeSelection = (props: AgGridReactProps) => {
columnEnd: "population",
});
}
- }, [isGridReady]);
+ }, [isGridReady, api]);
return (
-
+
,
);
cy.document().then((doc) => {
@@ -73,9 +73,7 @@ describe("Given a AriaAnnouncerProvider", () => {
});
});
it.skip("should allow for style overrides on the [aria-live] element", () => {
- mount(
-
{x}
))}
diff --git a/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx b/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx
index 5755870621..c00af8b7b3 100644
--- a/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx
+++ b/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx
@@ -1,12 +1,12 @@
import { Spinner } from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import { useEffect } from "react";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import dataGridInfiniteScrollExampleColumns from "../dependencies/dataGridInfiniteScrollExampleColumns";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
const generateData = function generateData
@@ -56,15 +56,11 @@ const InfiniteScroll = (props: AgGridReactProps) => {
};
const infiniteScrollComponents = {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- loadingRenderer(params: any) {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+ loadingRenderer(params: { value: unknown }) {
if (params.value !== undefined) {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
return params.value;
- } else {
- return (null);
const onFirstDataRendered = useCallback(() => {
- requestAnimationFrame(function () {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+ requestAnimationFrame(() => {
const node = gridRef.current?.api.getDisplayedRowAtIndex(0);
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
node?.setExpanded(true);
});
}, []);
@@ -23,11 +21,7 @@ const MasterDetail = (props: AgGridReactProps) => {
className={containerProps.className}
style={{ height: "100%", padding: 20 }}
>
-
);
@@ -41,8 +35,9 @@ const MasterDetail = (props: AgGridReactProps) => {
detailCellRenderer={detailCellRenderer}
detailCellRendererParams={{
detailGridOptions: { columnDefs },
- // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any
- getDetailRowData: (params: any) => params.successCallback(rowData),
+ getDetailRowData: (params: {
+ successCallback: (data: typeof rowData) => void;
+ }) => params.successCallback(rowData),
}}
masterDetail={true}
detailRowHeight={300}
diff --git a/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx b/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx
index 9fcf2e8510..ff5a00628e 100644
--- a/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx
+++ b/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx
@@ -4,7 +4,7 @@ import {
DialogContent,
DialogHeader,
} from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
@@ -14,7 +14,8 @@ const CustomDialog = () => {
@@ -29,9 +29,7 @@ export const RangeSelection = (props: AgGridReactProps) => {
enableRangeSelection
onFirstDataRendered={(params) => {
params.api.forEachNode((node, index) => {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
if (node.data && index < 7 && index > 2) {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
node.setSelected(true);
}
});
diff --git a/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx b/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx
index 938d39d929..33d719f133 100644
--- a/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx
+++ b/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import dataGridExampleRowGroupPanel from "../dependencies/dataGridExampleRowGroupPanel";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/RowGrouping.tsx b/packages/ag-grid-theme/src/examples/RowGrouping.tsx
index 910ec29bd7..18059f45d2 100644
--- a/packages/ag-grid-theme/src/examples/RowGrouping.tsx
+++ b/packages/ag-grid-theme/src/examples/RowGrouping.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import dataGridExampleRowGrouping from "../dependencies/dataGridExampleRowGrouping";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/SortAndFilter.tsx b/packages/ag-grid-theme/src/examples/SortAndFilter.tsx
index 687ff731c4..36cf1938e6 100644
--- a/packages/ag-grid-theme/src/examples/SortAndFilter.tsx
+++ b/packages/ag-grid-theme/src/examples/SortAndFilter.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import { useEffect } from "react";
import rowData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
@@ -48,7 +48,7 @@ const SortAndFilter = (props: AgGridReactProps) => {
}
void setFilter();
- }, [isGridReady]);
+ }, [isGridReady, api]);
return (
,
);
cy.realPress("Tab");
diff --git a/packages/core/src/__tests__/__e2e__/aria-announcer/AriaAnnouncer.cy.tsx b/packages/core/src/__tests__/__e2e__/aria-announcer/AriaAnnouncer.cy.tsx
index e33d5eef0c..8c785f7a50 100644
--- a/packages/core/src/__tests__/__e2e__/aria-announcer/AriaAnnouncer.cy.tsx
+++ b/packages/core/src/__tests__/__e2e__/aria-announcer/AriaAnnouncer.cy.tsx
@@ -1,7 +1,7 @@
import {
+ ARIA_ANNOUNCE_DELAY,
AriaAnnouncerProvider,
useAriaAnnouncer,
- ARIA_ANNOUNCE_DELAY,
} from "@salt-ds/core";
import { mount } from "cypress/react18";
@@ -50,7 +50,7 @@ describe("Given a AriaAnnouncerProvider", () => {
diff --git a/packages/ag-grid-theme/src/examples/StatusBar.tsx b/packages/ag-grid-theme/src/examples/StatusBar.tsx
index abab5ac35f..036740f6d9 100644
--- a/packages/ag-grid-theme/src/examples/StatusBar.tsx
+++ b/packages/ag-grid-theme/src/examples/StatusBar.tsx
@@ -1,5 +1,5 @@
-import { StackLayout, Text, Divider } from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { Divider, StackLayout, Text } from "@salt-ds/core";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
@@ -13,7 +13,7 @@ const CustomClickableStatusBar = () => {
style={{ height: "var(--salt-text-fontSize)", alignSelf: "center" }}
/>
{/* In status bar, line height being size base keeps text in the middle */}
-
+
Custom Component
@@ -59,9 +59,7 @@ const StatusBar = (props: AgGridReactProps) => {
rowData={dataGridExampleData}
onFirstDataRendered={(params) => {
params.api.forEachNode((node, index) => {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
if (node.data && index < 3) {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
node.setSelected(true);
}
});
diff --git a/packages/ag-grid-theme/src/examples/ToolPanel.tsx b/packages/ag-grid-theme/src/examples/ToolPanel.tsx
index d25d4aebb5..65b4254d65 100644
--- a/packages/ag-grid-theme/src/examples/ToolPanel.tsx
+++ b/packages/ag-grid-theme/src/examples/ToolPanel.tsx
@@ -1,5 +1,5 @@
import { FlexLayout, Text } from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/VariantSecondary.tsx b/packages/ag-grid-theme/src/examples/VariantSecondary.tsx
index 87d69aee16..2e4e84f06e 100644
--- a/packages/ag-grid-theme/src/examples/VariantSecondary.tsx
+++ b/packages/ag-grid-theme/src/examples/VariantSecondary.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import { clsx } from "clsx";
import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
diff --git a/packages/ag-grid-theme/src/examples/VariantZebra.tsx b/packages/ag-grid-theme/src/examples/VariantZebra.tsx
index 36a14d15d4..5595445467 100644
--- a/packages/ag-grid-theme/src/examples/VariantZebra.tsx
+++ b/packages/ag-grid-theme/src/examples/VariantZebra.tsx
@@ -1,4 +1,4 @@
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
import { clsx } from "clsx";
import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
import dataGridExampleData from "../dependencies/dataGridExampleData";
diff --git a/packages/ag-grid-theme/src/examples/WrappedCell.tsx b/packages/ag-grid-theme/src/examples/WrappedCell.tsx
index 0c05c911d0..785d2d7cbd 100644
--- a/packages/ag-grid-theme/src/examples/WrappedCell.tsx
+++ b/packages/ag-grid-theme/src/examples/WrappedCell.tsx
@@ -1,6 +1,6 @@
import { Checkbox, FlexItem, StackLayout, useDensity } from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import { ChangeEvent, useState } from "react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
+import { type ChangeEvent, useState } from "react";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/src/examples/WrappedHeader.tsx b/packages/ag-grid-theme/src/examples/WrappedHeader.tsx
index bdec9737bd..79b33a26e0 100644
--- a/packages/ag-grid-theme/src/examples/WrappedHeader.tsx
+++ b/packages/ag-grid-theme/src/examples/WrappedHeader.tsx
@@ -1,6 +1,6 @@
import { Checkbox, StackLayout, useDensity } from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import { ChangeEvent, useState } from "react";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
+import { type ChangeEvent, useState } from "react";
import dataGridExampleColumnsWrap from "../dependencies/dataGridExampleColumnsWrap";
import dataGridExampleData from "../dependencies/dataGridExampleData";
import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
diff --git a/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx b/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx
index 1eb976a758..59e48087b5 100644
--- a/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx
+++ b/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx
@@ -2,11 +2,11 @@ import type { StoryObj } from "@storybook/react";
import { expect, userEvent, within } from "@storybook/test";
import { AgGridReact } from "ag-grid-react";
import {
- Default,
- ToolPanel,
ColumnGroup,
ContextMenu as ContextMenuGrid,
CustomFilter,
+ Default,
+ ToolPanel,
} from "../src/examples";
import "ag-grid-community/styles/ag-grid.css";
@@ -64,12 +64,11 @@ HeaderTooltip.play = async ({ canvasElement }) => {
for (const cell of headerCells) {
const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!;
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unnecessary-type-assertion
- (cell.closest(".ag-header-cell")! as HTMLElement).focus();
+ cell.closest(".ag-header-cell")?.focus();
// Snapshot the tooltip, mainly ensuring bg color match
await expect(
- await within(gridRoot).findByRole("dialog", { name: "Tooltip" })
+ await within(gridRoot).findByRole("dialog", { name: "Tooltip" }),
).toBeInTheDocument();
}
};
@@ -89,7 +88,7 @@ ColumnMenuGeneral.play = async ({ canvasElement }) => {
await userEvent.click(
cell
.closest(".ag-header-cell-comp-wrapper")!
- .querySelector(".ag-icon.ag-icon-menu")!
+ .querySelector(".ag-icon.ag-icon-menu")!,
);
const dialog = within(gridRoot).getByRole("dialog", {
@@ -97,7 +96,7 @@ ColumnMenuGeneral.play = async ({ canvasElement }) => {
});
await userEvent.hover(
- within(dialog).getByRole("treeitem", { name: /Pin Column/i })
+ within(dialog).getByRole("treeitem", { name: /Pin Column/i }),
);
// snapshot the menu
@@ -120,7 +119,7 @@ ColumnMenuFilter.play = async ({ canvasElement }) => {
await userEvent.click(
cell
.closest(".ag-header-cell-comp-wrapper")!
- .querySelector(".ag-icon.ag-icon-menu")!
+ .querySelector(".ag-icon.ag-icon-menu")!,
);
const dialog = within(gridRoot).getByRole("dialog", {
@@ -156,7 +155,7 @@ ColumnMenuColumns.play = async ({ canvasElement }) => {
await userEvent.click(
cell
.closest(".ag-header-cell-comp-wrapper")!
- .querySelector(".ag-icon.ag-icon-menu")!
+ .querySelector(".ag-icon.ag-icon-menu")!,
);
const dialog = within(gridRoot).getByRole("dialog", {
@@ -164,7 +163,7 @@ ColumnMenuColumns.play = async ({ canvasElement }) => {
});
await userEvent.click(
- within(dialog).getByRole("tab", { name: /columns/i })
+ within(dialog).getByRole("tab", { name: /columns/i }),
);
// snapshot the menu
@@ -187,7 +186,7 @@ ColumnMenuNumberFilter.play = async ({ canvasElement }) => {
await userEvent.click(
cell
.closest(".ag-header-cell-comp-wrapper")!
- .querySelector(".ag-icon.ag-icon-menu")!
+ .querySelector(".ag-icon.ag-icon-menu")!,
);
const dialog = within(gridRoot).getByRole("dialog", {
@@ -199,14 +198,14 @@ ColumnMenuNumberFilter.play = async ({ canvasElement }) => {
await userEvent.click(
await within(dialog).findByRole("combobox", {
name: "Filtering operator",
- })
+ }),
);
const dropDown = within(gridRoot).getByRole("listbox", {
name: "Select Field",
});
await userEvent.click(
- within(dropDown).getByRole("option", { name: "Not blank" })
+ within(dropDown).getByRole("option", { name: "Not blank" }),
);
// Snapshot radio buttons, which comes from icon in v31
@@ -261,7 +260,7 @@ ContextMenu.play = async ({ canvasElement }) => {
const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!;
await expect(
- within(gridRoot).getByRole("presentation", { name: "Context Menu" })
+ within(gridRoot).getByRole("presentation", { name: "Context Menu" }),
).toBeInTheDocument();
}
};
diff --git a/packages/core/package.json b/packages/core/package.json
index 85793b035d..7465bb473b 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -31,7 +31,5 @@
"scripts": {
"bundle:css": "yarn node ./scripts/build.mjs"
},
- "files": [
- "css"
- ]
+ "files": ["css"]
}
diff --git a/packages/core/scripts/build.mjs b/packages/core/scripts/build.mjs
index 982150fedc..87ed621fe7 100644
--- a/packages/core/scripts/build.mjs
+++ b/packages/core/scripts/build.mjs
@@ -1,10 +1,10 @@
-import esbuild from "esbuild";
-import path, { dirname } from "node:path";
+import crypto from "node:crypto";
import fs from "node:fs";
-import { deleteSync } from "del";
+import path, { dirname } from "node:path";
import { fileURLToPath } from "node:url";
+import { deleteSync } from "del";
+import esbuild from "esbuild";
import glob from "fast-glob";
-import crypto from "node:crypto";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const buildFolder = path.join(__dirname, "../../../dist/salt-ds-core/css");
@@ -25,15 +25,15 @@ function createCssEntryFile(callback) {
});
const writeLine = (line, index) =>
- index == 0 ? entry.write(line) : entry.write(`\n${line}`);
+ index === 0 ? entry.write(line) : entry.write(`\n${line}`);
cssFiles.forEach((cssFile, index) => {
writeLine(
`@import "${path.posix.relative(
path.posix.dirname(entryFile),
- cssFile
+ cssFile,
)}";`,
- index
+ index,
);
});
@@ -62,7 +62,7 @@ function runBuild() {
fs.mkdirSync(cssFolder, { recursive: true });
fs.copyFileSync(
path.join(buildFolder, outfileName),
- path.join(cssFolder, outfileName)
+ path.join(cssFolder, outfileName),
);
})
.finally(() => {
diff --git a/packages/core/src/__tests__/__e2e__/accordion/Accordion.cy.tsx b/packages/core/src/__tests__/__e2e__/accordion/Accordion.cy.tsx
index 19e7e7c107..561ce9460f 100644
--- a/packages/core/src/__tests__/__e2e__/accordion/Accordion.cy.tsx
+++ b/packages/core/src/__tests__/__e2e__/accordion/Accordion.cy.tsx
@@ -1,10 +1,10 @@
import {
- AccordionPanel,
Accordion,
- AccordionProps,
AccordionHeader,
+ AccordionPanel,
+ type AccordionProps,
} from "@salt-ds/core";
-import { Component, ReactNode } from "react";
+import { Component, type ReactNode } from "react";
interface DetailsSpyProps {
children?: ReactNode;
@@ -73,7 +73,7 @@ describe("GIVEN an Accordion", () => {
-
+