@linzjs/step-ag-grid 23.0.1 → 24.0.0

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -1,14 +1,13 @@
-import "../../../styles/GridTheme.scss";
-import "../../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../../styles/GridTheme.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { Meta, StoryFn } from "@storybook/react";
-import { expect } from "@storybook/test";
-import { fn } from "@storybook/test";
-import { userEvent, waitFor } from "@storybook/test";
-import { useMemo, useState } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { expect } from '@storybook/test';
+import { fn } from '@storybook/test';
+import { userEvent, waitFor } from '@storybook/test';
+import { useMemo, useState } from 'react';
 
 import {
   ColDefT,
@@ -24,24 +23,24 @@ import {
   GridUpdatingContextProvider,
   MenuOption,
   wait,
-} from "../../../";
-import { waitForGridReady } from "../../../utils/storybookTestUtil";
+} from '../../../';
+import { waitForGridReady } from '../../../utils/storybookTestUtil';
 
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   args: {
     quickFilter: true,
-    quickFilterValue: "",
-    quickFilterPlaceholder: "Quick filter...",
+    quickFilterValue: '',
+    quickFilterPlaceholder: 'Quick filter...',
     selectable: false,
-    rowSelection: "single",
+    rowSelection: 'single',
   },
   // Storybook hangs otherwise
   parameters: {
     docs: {
       source: {
-        type: "code",
+        type: 'code',
       },
     },
   },
@@ -79,28 +78,28 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
       }),
-      GridCell<ITestRow, ITestRow["position"]>({
-        field: "position",
-        headerName: "Position",
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
         cellRendererParams: {
-          warning: ({ value }) => value === "Tester" && "Testers are testing",
-          info: ({ value }) => value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === 'Tester' && 'Testers are testing',
+          info: ({ value }) => value === 'Developer' && 'Developers are awesome',
         },
       }),
       GridCell({
-        field: "age",
-        headerName: "Age",
+        field: 'age',
+        headerName: 'Age',
       }),
       GridCell({
-        field: "desc",
-        headerName: "Description",
+        field: 'desc',
+        headerName: 'Description',
       }),
       GridPopoverMessage(
         {
-          headerName: "Popout message",
+          headerName: 'Popout message',
           maxWidth: 150,
           cellRenderer: () => <>Single Click me!</>,
         },
@@ -115,13 +114,13 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
         },
       ),
       GridCell({
-        headerName: "Custom edit",
+        headerName: 'Custom edit',
         maxWidth: 100,
         editable: true,
-        valueFormatter: () => "Press E",
+        valueFormatter: () => 'Press E',
         cellRendererParams: {
           rightHoverElement: (
-            <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
+            <GridIcon icon={'ic_launch_modal'} title={'Title text'} className={'GridCell-editableIcon'} />
           ),
           editAction: () => {
             //
@@ -136,51 +135,51 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
         {
           multiEdit: true,
           editorParams: {
-            defaultAction: async ({ menuOption }) => {
+            defaultAction: ({ menuOption }) => {
               // eslint-disable-next-line no-console
-              console.log("clicked", { menuOption });
+              console.log('clicked', { menuOption });
             },
             options: async (selectedItems) => {
               // Just doing a timeout here to demonstrate deferred loading
               await wait(500);
               return [
                 {
-                  label: "Single edit only",
+                  label: 'Single edit only',
                   action: async () => {
                     //
                   },
                   disabled: selectedItems.length > 1,
                 },
                 {
-                  label: "Multi-edit",
+                  label: 'Multi-edit',
                   action: multiEditAction,
                 },
                 {
-                  label: "Disabled item",
-                  disabled: "Disabled for test",
+                  label: 'Disabled item',
+                  disabled: 'Disabled for test',
                 },
                 {
-                  label: "Developer Only",
-                  hidden: selectedItems.some((x) => x.position != "Developer"),
+                  label: 'Developer Only',
+                  hidden: selectedItems.some((x) => x.position != 'Developer'),
                 },
                 {
-                  label: "Other (TextInput)",
+                  label: 'Other (TextInput)',
                   action: async () => {
                     //
                   },
                   subComponent: () => (
-                    <GridFormSubComponentTextInput placeholder={"Other"} maxLength={5} required defaultValue={""} />
+                    <GridFormSubComponentTextInput placeholder={'Other'} maxLength={5} required defaultValue={''} />
                   ),
                 },
                 {
-                  label: "Other (TextArea)",
+                  label: 'Other (TextArea)',
                   action: async ({ menuOption }) => {
                     // eslint-disable-next-line no-console
                     console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
                     await wait(500);
                   },
                   subComponent: () => (
-                    <GridFormSubComponentTextArea placeholder={"Other"} maxLength={5} required defaultValue={""} />
+                    <GridFormSubComponentTextArea placeholder={'Other'} maxLength={5} required defaultValue={''} />
                   ),
                 },
               ] as MenuOption<ITestRow>[];
@@ -194,9 +193,7 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
         },
         {
           editorParams: {
-            options: async () => {
-              return [];
-            },
+            options: () => [],
           },
         },
       ),
@@ -205,9 +202,9 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
   );
 
   const [rowData] = useState([
-    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
-    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
-    { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
+    { id: 1000, position: 'Tester', age: 30, desc: 'Tests application', dd: '1' },
+    { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
+    { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
   ]);
 
   return (
@@ -218,7 +215,7 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
-      domLayout={"autoHeight"}
+      domLayout={'autoHeight'}
       autoSelectFirstRow={true}
     />
   );
@@ -232,47 +229,47 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
   await waitForGridReady({ canvasElement });
 
   // Ensure first row/cell is selected on render
-  await waitFor(async () => {
+  await waitFor(() => {
     const activeCell = canvasElement.ownerDocument.activeElement;
-    expect(activeCell).toHaveClass("ag-cell-focus");
-    expect(activeCell).toHaveAttribute("aria-colindex", "1");
-    expect(activeCell?.parentElement).toHaveAttribute("row-index", "0");
+    expect(activeCell).toHaveClass('ag-cell-focus');
+    expect(activeCell).toHaveAttribute('aria-colindex', '1');
+    expect(activeCell?.parentElement).toHaveAttribute('row-index', '0');
   });
-  await userEvent.keyboard("{arrowdown}{arrowdown}");
-  await userEvent.keyboard("{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}");
+  await userEvent.keyboard('{arrowdown}{arrowdown}');
+  await userEvent.keyboard('{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}');
 
   // Test enter post focus
   const test = async (fn: () => any, colId: string, rowId: string) => {
-    await userEvent.keyboard("{Enter}");
+    await userEvent.keyboard('{Enter}');
     await wait(1000);
-    await userEvent.keyboard("{arrowdown}{arrowdown}");
+    await userEvent.keyboard('{arrowdown}{arrowdown}');
     fn();
-    await waitFor(async () => {
+    await waitFor(() => {
       expect(multiEditAction).toHaveBeenCalled();
     });
 
-    await waitFor(async () => {
+    await waitFor(() => {
       const activeCell = canvasElement.ownerDocument.activeElement;
-      expect(activeCell).toHaveClass("ag-cell-focus");
-      expect(activeCell).toHaveAttribute("aria-colindex", colId);
-      expect(activeCell?.parentElement).toHaveAttribute("row-index", rowId);
+      expect(activeCell).toHaveClass('ag-cell-focus');
+      expect(activeCell).toHaveAttribute('aria-colindex', colId);
+      expect(activeCell?.parentElement).toHaveAttribute('row-index', rowId);
     });
     await wait(1000);
   };
 
-  await test(() => userEvent.keyboard("{Enter}"), "8", "2");
-  await test(() => userEvent.tab(), "9", "2");
+  await test(() => userEvent.keyboard('{Enter}'), '8', '2');
+  await test(() => userEvent.tab(), '9', '2');
   await userEvent.tab({ shift: true });
-  await test(() => userEvent.tab({ shift: true }), "6", "2");
-  await userEvent.keyboard("{Esc}");
+  await test(() => userEvent.tab({ shift: true }), '6', '2');
+  await userEvent.keyboard('{Esc}');
   await userEvent.tab();
 
-  await userEvent.keyboard("{Enter}");
+  await userEvent.keyboard('{Enter}');
   await wait(250);
   expect(eAction).not.toHaveBeenCalled();
 
-  await userEvent.keyboard("e");
-  await waitFor(async () => {
+  await userEvent.keyboard('e');
+  await waitFor(() => {
     expect(eAction).toHaveBeenCalled();
   });
 };

package/src/stories/react-menu/ReactMenu.stories.tsx

@@ -1,16 +1,16 @@
-import "../../react-menu3/styles/index.scss";
+import '../../react-menu3/styles/index.scss';
 
-import { Meta, StoryFn } from "@storybook/react";
-import { expect } from "@storybook/test";
-import * as test from "@storybook/test";
-import { userEvent, within } from "@storybook/test";
+import { Meta, StoryFn } from '@storybook/react';
+import { expect } from '@storybook/test';
+import * as test from '@storybook/test';
+import { userEvent, within } from '@storybook/test';
 
-import { Grid } from "../../components/Grid";
-import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from "../../react-menu3";
-import { wait } from "../../utils/util";
+import { Grid } from '../../components/Grid';
+import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from '../../react-menu3';
+import { wait } from '../../utils/util';
 
 export default {
-  title: "Components / React-menu",
+  title: 'Components / React-menu',
   component: Grid,
   args: {
     externalSelectedItems: [],
@@ -49,40 +49,40 @@ ReactMenuControlled.play = async ({ canvasElement }) => {
     await wait(100); // Wait for debounce
   };
 
-  const menuButton = await canvas.findByRole("button");
+  const menuButton = await canvas.findByRole('button');
   expect(menuButton).toBeInTheDocument();
 
   const openMenu = async () => {
     await wait(500); // Wait for debounce
     await userEvent.click(menuButton);
-    expect(await canvas.findByRole("menuitem", { name: "New File" })).toBeInTheDocument();
+    expect(await canvas.findByRole('menuitem', { name: 'New File' })).toBeInTheDocument();
   };
 
   // Check menu closes on click outside
   await openMenu();
   await userEvent.click(menuButton.parentElement as Element);
-  expect(canvas.queryByRole("menuitem", { name: "New File" })).not.toBeInTheDocument();
+  expect(canvas.queryByRole('menuitem', { name: 'New File' })).not.toBeInTheDocument();
 
   // Test arrow down/up
   await openMenu();
-  await keyboard("{arrowdown}");
-  await keyboard("{arrowdown}");
-  await keyboard("{arrowdown}");
-  await keyboard("{arrowdown}");
-  await keyboard("{arrowdown}");
-  expect(document.activeElement?.innerHTML).toBe("Exit");
+  await keyboard('{arrowdown}');
+  await keyboard('{arrowdown}');
+  await keyboard('{arrowdown}');
+  await keyboard('{arrowdown}');
+  await keyboard('{arrowdown}');
+  expect(document.activeElement?.innerHTML).toBe('Exit');
 
-  await keyboard("{arrowup}");
-  expect(document.activeElement?.innerHTML).toBe("Print...");
+  await keyboard('{arrowup}');
+  expect(document.activeElement?.innerHTML).toBe('Print...');
 
   // Escape close
-  await userEvent.type(menuButton.parentElement as Element, "{Escape}");
-  expect(canvas.queryByRole("menuitem", { name: "New File" })).not.toBeInTheDocument();
+  await userEvent.type(menuButton.parentElement as Element, '{Escape}');
+  expect(canvas.queryByRole('menuitem', { name: 'New File' })).not.toBeInTheDocument();
 
   // Test enter to select
   await openMenu();
-  await keyboard("{arrowdown}");
-  await keyboard("{enter}");
+  await keyboard('{arrowdown}');
+  await keyboard('{enter}');
   expect(menuItemClickAction).toHaveBeenCalled();
   expect(newFileAction).toHaveBeenCalled();
 
@@ -91,10 +91,10 @@ ReactMenuControlled.play = async ({ canvasElement }) => {
 
   // Test tab to select
   await openMenu();
-  await keyboard("{arrowdown}");
+  await keyboard('{arrowdown}');
   // For some reason arrow down takes a little time to activate
   await wait(10);
-  await keyboard("{Tab}");
+  await keyboard('{Tab}');
   expect(menuItemClickAction).toHaveBeenCalled();
   expect(newFileAction).toHaveBeenCalled();
 

package/src/utils/bearing.test.ts

@@ -3,53 +3,53 @@ import {
   bearingRangeValidator,
   bearingStringValidator,
   convertDDToDMS,
-} from "./bearing";
+} from './bearing';
 
-describe("bearing", () => {
-  test("convertDDToDMS converts decimal-ish degrees to DMS", () => {
-    expect(convertDDToDMS(-0.001, false)).toBe("-0° 00' 10\"");
-    expect(convertDDToDMS(-10.001, false)).toBe("-10° 00' 10\"");
-    expect(convertDDToDMS(-370.001, false)).toBe("-10° 00' 10\"");
+describe('bearing', () => {
+  test('convertDDToDMS converts decimal-ish degrees to DMS', () => {
+    expect(convertDDToDMS(-0.001, false)).toBe('-0° 00\' 10"');
+    expect(convertDDToDMS(-10.001, false)).toBe('-10° 00\' 10"');
+    expect(convertDDToDMS(-370.001, false)).toBe('-10° 00\' 10"');
     expect(convertDDToDMS(359.595999, false, 2)).toBe("0° 00'");
-    expect(convertDDToDMS(359.595999, false, 4)).toBe("0° 00' 00\"");
-    expect(convertDDToDMS(359.595999, false, 5)).toBe("0° 00' 00.0\"");
-    expect(convertDDToDMS(369.696999, false)).toBe("10° 10' 10\"");
-    expect(convertDDToDMS(369.696999, false, 4)).toBe("10° 10' 10\"");
+    expect(convertDDToDMS(359.595999, false, 4)).toBe('0° 00\' 00"');
+    expect(convertDDToDMS(359.595999, false, 5)).toBe('0° 00\' 00.0"');
+    expect(convertDDToDMS(369.696999, false)).toBe('10° 10\' 10"');
+    expect(convertDDToDMS(369.696999, false, 4)).toBe('10° 10\' 10"');
     expect(convertDDToDMS(221.555999, false, 2)).toBe("221° 56'");
-    expect(convertDDToDMS(221.555999, false, 5)).toBe("221° 56' 00.0\"");
-    expect(convertDDToDMS(5, true, 5)).toBe("+5° 00' 00.0\"");
-    expect(convertDDToDMS(5.0, true, 5)).toBe("+5° 00' 00.0\"");
-    expect(convertDDToDMS(5.00001, true, 5)).toBe("+5° 00' 00.1\"");
-    expect(convertDDToDMS(5.1, true, 5)).toBe("+5° 10' 00.0\"");
-    expect(convertDDToDMS(5.12345)).toBe("+5° 12' 34.5\"");
-    expect(convertDDToDMS(5.12345, false)).toBe("5° 12' 34.5\"");
-    expect(convertDDToDMS(5.12345, false, 2)).toBe("5° 12' 34.5\"");
-    expect(convertDDToDMS(300, true, 5)).toBe("+300° 00' 00.0\"");
-    expect(convertDDToDMS(300.0, true, 5)).toBe("+300° 00' 00.0\"");
-    expect(convertDDToDMS(300.00001)).toBe("+300° 00' 00.1\"");
-    expect(convertDDToDMS(300.1, true, 5)).toBe("+300° 10' 00.0\"");
-    expect(convertDDToDMS(300.12345)).toBe("+300° 12' 34.5\"");
-    expect(convertDDToDMS(300.12345, false)).toBe("300° 12' 34.5\"");
+    expect(convertDDToDMS(221.555999, false, 5)).toBe('221° 56\' 00.0"');
+    expect(convertDDToDMS(5, true, 5)).toBe('+5° 00\' 00.0"');
+    expect(convertDDToDMS(5.0, true, 5)).toBe('+5° 00\' 00.0"');
+    expect(convertDDToDMS(5.00001, true, 5)).toBe('+5° 00\' 00.1"');
+    expect(convertDDToDMS(5.1, true, 5)).toBe('+5° 10\' 00.0"');
+    expect(convertDDToDMS(5.12345)).toBe('+5° 12\' 34.5"');
+    expect(convertDDToDMS(5.12345, false)).toBe('5° 12\' 34.5"');
+    expect(convertDDToDMS(5.12345, false, 2)).toBe('5° 12\' 34.5"');
+    expect(convertDDToDMS(300, true, 5)).toBe('+300° 00\' 00.0"');
+    expect(convertDDToDMS(300.0, true, 5)).toBe('+300° 00\' 00.0"');
+    expect(convertDDToDMS(300.00001)).toBe('+300° 00\' 00.1"');
+    expect(convertDDToDMS(300.1, true, 5)).toBe('+300° 10\' 00.0"');
+    expect(convertDDToDMS(300.12345)).toBe('+300° 12\' 34.5"');
+    expect(convertDDToDMS(300.12345, false)).toBe('300° 12\' 34.5"');
     expect(convertDDToDMS(300, false, 2)).toBe("300° 00'");
     expect(convertDDToDMS(300.1, false, 2)).toBe("300° 10'");
     expect(convertDDToDMS(0, false, 2)).toBe("0° 00'");
     expect(convertDDToDMS(0.0, false)).toBe("0° 00'");
-    expect(convertDDToDMS(0.0, false, 4)).toBe("0° 00' 00\"");
-    expect(convertDDToDMS(0.0, false, 5)).toBe("0° 00' 00.0\"");
+    expect(convertDDToDMS(0.0, false, 4)).toBe('0° 00\' 00"');
+    expect(convertDDToDMS(0.0, false, 5)).toBe('0° 00\' 00.0"');
   });
 
-  test("bearingStringValidator", () => {
+  test('bearingStringValidator', () => {
     const tests: [string, string | null][] = [
-      ["", null],
-      ["1", null],
-      ["1.2345", null],
-      ["-1.2345", null],
-      ["360.2345", null],
-      ["-360.2345", null],
-      ["1.2e6", "Bearing must be a number in D.MMSSS format"],
-      ["0.60000", "Bearing must be a number in D.MMSSS format"],
-      ["0.00600", "Bearing must be a number in D.MMSSS format"],
-      ["0.123456", "Bearing has a maximum of 5 decimal places"],
+      ['', null],
+      ['1', null],
+      ['1.2345', null],
+      ['-1.2345', null],
+      ['360.2345', null],
+      ['-360.2345', null],
+      ['1.2e6', 'Bearing must be a number in D.MMSSS format'],
+      ['0.60000', 'Bearing must be a number in D.MMSSS format'],
+      ['0.00600', 'Bearing must be a number in D.MMSSS format'],
+      ['0.123456', 'Bearing has a maximum of 5 decimal places'],
     ];
 
     tests.forEach((test, i) => {
@@ -58,21 +58,21 @@ describe("bearing", () => {
 
     // calls custom invalid
     const fn = jest.fn();
-    bearingStringValidator("1.2", fn);
+    bearingStringValidator('1.2', fn);
     expect(fn).toHaveBeenCalledWith(1.2);
   });
 
-  test("bearingRangeValidator", () => {
+  test('bearingRangeValidator', () => {
     expect(bearingRangeValidator(0)).toBeNull();
     expect(bearingRangeValidator(359.595999)).toBeNull();
-    expect(bearingRangeValidator(-0.00001)).toBe("Bearing must not be negative");
-    expect(bearingRangeValidator(360)).toBe("Bearing must be less than 360 degrees");
+    expect(bearingRangeValidator(-0.00001)).toBe('Bearing must not be negative');
+    expect(bearingRangeValidator(360)).toBe('Bearing must be less than 360 degrees');
   });
 
-  test("bearingCorrectionRangeValidator", () => {
+  test('bearingCorrectionRangeValidator', () => {
     expect(bearingCorrectionRangeValidator(-179.59999)).toBeNull();
     expect(bearingCorrectionRangeValidator(359.59999)).toBeNull();
-    expect(bearingCorrectionRangeValidator(-180)).toBe("Bearing correction must be greater then -180 degrees");
-    expect(bearingCorrectionRangeValidator(360)).toBe("Bearing correction must be less than 360 degrees");
+    expect(bearingCorrectionRangeValidator(-180)).toBe('Bearing correction must be greater then -180 degrees');
+    expect(bearingCorrectionRangeValidator(360)).toBe('Bearing correction must be less than 360 degrees');
   });
 });

package/src/utils/bearing.ts

@@ -1,7 +1,7 @@
 export const bearingValueFormatter = (value: any): string => {
-  const safeValue = typeof value == "string" ? parseFloat(value) : value;
+  const safeValue = typeof value === 'string' ? parseFloat(value) : value;
   if (safeValue == null) {
-    return "–";
+    return '–';
   }
   return convertDDToDMS(safeValue, false);
 };
@@ -9,16 +9,16 @@ export const bearingValueFormatter = (value: any): string => {
 export const bearingCorrectionValueFormatter = (value: any): string => {
   const safeValue = value;
   if (safeValue == null) {
-    return "–";
+    return '–';
   }
-  if (typeof safeValue === "string") {
+  if (typeof safeValue === 'string') {
     return convertDDToDMS(bearingNumberParser(safeValue), true, 4);
   }
   return convertDDToDMS(safeValue, true, 4);
 };
 
 export const bearingNumberParser = (value: string): number | null => {
-  if (value === "") return null;
+  if (value === '') return null;
   return parseFloat(value);
 };
 
@@ -28,12 +28,12 @@ export const bearingStringValidator = (
   customInvalid?: (value: number | null) => string | null,
 ): string | null => {
   value = value.trim();
-  if (value === "") return null;
+  if (value === '') return null;
   const match = value.match(validMaskForDmsBearing);
-  if (!match) return "Bearing must be a number in D.MMSSS format";
+  if (!match) return 'Bearing must be a number in D.MMSSS format';
   const decimalPart = match[4];
   if (decimalPart != null && decimalPart.length > 5) {
-    return "Bearing has a maximum of 5 decimal places";
+    return 'Bearing has a maximum of 5 decimal places';
   }
 
   const bearing = parseFloat(value);
@@ -53,10 +53,10 @@ export const bearingStringValidator = (
  * @returns Degrees Minutes Seconds
  */
 export const convertDDToDMS = (dd: number | null, showPositiveSymbol = true, trailingZeroDp: 2 | 4 | 5 = 2): string => {
-  if (dd == null) return "–";
+  if (dd == null) return '–';
 
   // toFixed rounds parts up greater than 60, which has to be corrected below
-  const [bearingWholeString, bearingDecimalString] = dd.toFixed(5).split(".");
+  const [bearingWholeString, bearingDecimalString] = dd.toFixed(5).split('.');
 
   let bearingWhole = Math.abs(parseInt(bearingWholeString));
   let minNumeric = parseInt(bearingDecimalString?.substring(0, 2));
@@ -75,12 +75,12 @@ export const convertDDToDMS = (dd: number | null, showPositiveSymbol = true, tra
     bearingWhole -= 360;
   }
 
-  const minString = minNumeric.toString().padStart(2, "0");
-  const secString = secNumeric.toString().padStart(2, "0");
+  const minString = minNumeric.toString().padStart(2, '0');
+  const secString = secNumeric.toString().padStart(2, '0');
   const deciSecString = bearingDecimalString?.substring(4, 5);
 
-  let dmsString = `${showPositiveSymbol && dd > 0 ? "+" : ""}${dd < 0 ? "-" : ""}${bearingWhole}°`;
-  if (trailingZeroDp === 5 || deciSecString != "0") {
+  let dmsString = `${showPositiveSymbol && dd > 0 ? '+' : ''}${dd < 0 ? '-' : ''}${bearingWhole}°`;
+  if (trailingZeroDp === 5 || deciSecString != '0') {
     dmsString += `\xa0${minString}'\xa0${secString}.${deciSecString}"`; // "\xa0" is here for non-breaking space
   } else if (trailingZeroDp === 4 || secNumeric != 0) {
     dmsString += `\xa0${minString}'\xa0${secString}"`;
@@ -91,15 +91,15 @@ export const convertDDToDMS = (dd: number | null, showPositiveSymbol = true, tra
 };
 
 export const bearingRangeValidator = (value: number | null) => {
-  if (value === null) return "Bearing is required";
-  if (value >= 360) return "Bearing must be less than 360 degrees";
-  if (value < 0) return "Bearing must not be negative";
+  if (value === null) return 'Bearing is required';
+  if (value >= 360) return 'Bearing must be less than 360 degrees';
+  if (value < 0) return 'Bearing must not be negative';
   return null;
 };
 
 export const bearingCorrectionRangeValidator = (value: number | null) => {
-  if (value === null) return "Bearing correction is required";
-  if (value >= 360) return "Bearing correction must be less than 360 degrees";
-  if (value <= -180) return "Bearing correction must be greater then -180 degrees";
+  if (value === null) return 'Bearing correction is required';
+  if (value >= 360) return 'Bearing correction must be less than 360 degrees';
+  if (value <= -180) return 'Bearing correction must be greater then -180 degrees';
   return null;
 };

package/src/utils/deferredPromise.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 export const useDeferredPromise = <T>() => {
   const promiseResolve = useRef<((value: T | PromiseLike<T>) => void) | undefined>();

package/src/utils/storybookTestUtil.ts

@@ -1,4 +1,4 @@
-import { expect, waitFor } from "@storybook/test";
+import { expect, waitFor } from '@storybook/test';
 
 export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
-  waitFor(() => expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument(), { timeout: 5000 });
+  waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });