chore: upgrade and run prettier

.prettierrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: ["prettier-plugin-organize-imports"],
   trailingComma: "all",
   printWidth: 120,
 };

package.json

@@ -118,8 +118,8 @@
     "jest-watch-typeahead": "^2.2.2",
     "mobx": "^6.10.2",
     "mobx-react": "^9.0.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "semantic-release": "^20.1.0",

src/components/ButtonDatePicker.tsx

@@ -30,10 +30,10 @@ export function ButtonDatePicker(props: ButtonDatePickerProps) {
     isTextButton(trigger)
       ? defaultTestId(labelOr(trigger, "buttonDatePicker"))
       : isNavLinkButton(trigger)
-      ? defaultTestId(trigger.navLabel)
-      : isIconButton(trigger)
-      ? trigger.icon
-      : trigger.name,
+        ? defaultTestId(trigger.navLabel)
+        : isIconButton(trigger)
+          ? trigger.icon
+          : trigger.name,
   );
 
   return (

src/components/ButtonMenu.tsx

@@ -47,10 +47,10 @@ export function ButtonMenu(props: ButtonMenuBaseProps | SelectionButtonMenuProps
     isTextButton(trigger)
       ? labelOr(trigger, "buttonMenu")
       : isNavLinkButton(trigger)
-      ? defaultTestId(trigger.navLabel)
-      : isIconButton(trigger)
-      ? trigger.icon
-      : trigger.name,
+        ? defaultTestId(trigger.navLabel)
+        : isIconButton(trigger)
+          ? trigger.icon
+          : trigger.name,
   );
 
   return (

src/components/ButtonModal.tsx

@@ -33,10 +33,10 @@ export function ButtonModal(props: ButtonModalProps) {
     isTextButton(trigger)
       ? labelOr(trigger, "buttonModal")
       : isNavLinkButton(trigger)
-      ? defaultTestId(trigger.navLabel)
-      : isIconButton(trigger)
-      ? trigger.icon
-      : trigger.name,
+        ? defaultTestId(trigger.navLabel)
+        : isIconButton(trigger)
+          ? trigger.icon
+          : trigger.name,
   );
 
   return (

src/components/Chip.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from "react";
+import { Icon, IconKey } from "src/components/Icon";
 import { usePresentationContext } from "src/components/PresentationContext";
 import { maybeTooltip } from "src/components/Tooltip";
 import { Css, Margin, Only, Properties, Xss } from "src/Css";
 import { useTestIds } from "src/utils/useTestIds";
-import { Icon, IconKey } from "src/components/Icon";
 
 export type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral" | "darkMode" | "info";
 

src/components/Filters/DateRangeFilter.tsx

@@ -2,7 +2,7 @@ import { Matcher } from "react-day-picker";
 import { BaseFilter } from "src/components/Filters/BaseFilter";
 import { Filter } from "src/components/Filters/types";
 import { Label } from "src/components/Label";
-import { DateRangeField, Value } from "src/inputs";
+import { DateRangeField } from "src/inputs";
 import { DateRange } from "src/types";
 import { TestIds } from "src/utils";
 import { defaultTestId } from "src/utils/defaultTestId";

src/components/Filters/MultiFilter.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta } from "@storybook/react";
+import { useState } from "react";
 import { stageFilter, stageFilterDisabledOptions } from "src/components/Filters/testDomain";
 import { Filters, multiFilter } from "src/components/index";
 import { HasIdAndName } from "src/types";
 import { zeroTo } from "src/utils/sb";
-import { useState } from "react";
 
 export default {
   component: Filters,

src/components/Filters/SingleFilter.tsx

@@ -44,7 +44,7 @@ class SingleFilter<O, V extends Key> extends BaseFilter<V, SingleFilterProps<O,
         {...props}
         options={options}
         getOptionValue={(o) => (o === allOption ? (undefined as any as V) : getOptionValue(o))}
-        getOptionLabel={(o) => (o === allOption ? nothingSelectedText ?? "All" : getOptionLabel(o))}
+        getOptionLabel={(o) => (o === allOption ? (nothingSelectedText ?? "All") : getOptionLabel(o))}
         compact={!vertical}
         value={value}
         label={this.label}

src/components/Filters/index.ts

@@ -6,11 +6,11 @@ export { multiFilter } from "src/components/Filters/MultiFilter";
 export { numberRangeFilter } from "src/components/Filters/NumberRangeFilter";
 export { singleFilter } from "src/components/Filters/SingleFilter";
 export { treeFilter } from "src/components/Filters/TreeFilter";
+export { BaseFilter } from "./BaseFilter";
 export { booleanFilter } from "./BooleanFilter";
 export { checkboxFilter } from "./CheckboxFilter";
 export * from "./FilterModal";
 export * from "./Filters";
 export { toggleFilter } from "./ToggleFilter";
 export * from "./types";
 export * from "./utils";
-export { BaseFilter } from "./BaseFilter";

src/components/Label.tsx

@@ -1,7 +1,7 @@
 import React, { LabelHTMLAttributes, ReactNode } from "react";
 import { VisuallyHidden } from "react-aria";
-import { Css, Font, Only, Palette, Xss } from "src/Css";
 import { Icon } from "src";
+import { Css, Font, Only, Palette, Xss } from "src/Css";
 
 type LabelXss = Font | "color";
 

src/components/MaxLines.stories.tsx

@@ -1,6 +1,6 @@
-import { MaxLines } from "src/components/MaxLines";
-import { Button, Css } from "src";
 import { useMemo, useState } from "react";
+import { Button, Css } from "src";
+import { MaxLines } from "src/components/MaxLines";
 
 export default {
   component: MaxLines,

src/components/MaxLines.tsx

@@ -1,6 +1,6 @@
-import { Css } from "src";
-import { PropsWithChildren, useCallback, useEffect, useRef, useState } from "react";
 import { useLayoutEffect, useResizeObserver } from "@react-aria/utils";
+import { PropsWithChildren, useCallback, useEffect, useRef, useState } from "react";
+import { Css } from "src";
 
 export type MaxLinesProps = PropsWithChildren<{
   maxLines: number;

src/components/Modal/Modal.tsx

@@ -7,9 +7,9 @@ import { useBeamContext } from "src/components/BeamContext";
 import { IconButton } from "src/components/IconButton";
 import { useModal as ourUseModal } from "src/components/Modal/useModal";
 import { Css, Only, Xss } from "src/Css";
+import { useBreakpoint } from "src/hooks";
 import { useTestIds } from "src/utils";
 import { ModalProvider } from "./ModalContext";
-import { useBreakpoint } from "src/hooks";
 
 export type ModalSize = "sm" | "md" | "lg" | "xl" | "xxl";
 

src/components/Modal/ModalContext.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useContext, useMemo } from "react";
+import { createContext, ReactNode, useContext, useMemo } from "react";
 
 interface ModalContextState {
   inModal: boolean;

src/components/Table/GridTableApi.ts

@@ -2,20 +2,10 @@ import { comparer } from "mobx";
 import { computedFn } from "mobx-utils";
 import { MutableRefObject, useMemo } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
-import {
-  applyRowFn,
-  createRowLookup,
-  GridRowLookup,
-  isGridCellContent,
-  isJSX,
-  maybeApplyFunction,
-  MaybeFn,
-} from "src/components/index";
+import { applyRowFn, createRowLookup, GridRowLookup, isGridCellContent, isJSX, MaybeFn } from "src/components/index";
 import { GridDataRow } from "src/components/Table/components/Row";
 import { DiscriminateUnion, Kinded } from "src/components/Table/types";
 import { TableState } from "src/components/Table/utils/TableState";
-import { maybeCall } from "src/utils";
-import { Properties } from "src/Css";
 
 /**
  * Creates an `api` handle to drive a `GridTable`.

src/components/Table/Table.qa.stories.tsx

@@ -464,10 +464,10 @@ function beamNestedRows(levels: 1 | 2 | 3 | 4 = 1): GridDataRow<BeamNestedRow>[]
     ...(levels === 4
       ? greatGrandParents
       : levels === 3
-      ? grandParents
-      : levels === 2
-      ? grandParents.flatMap((gp) => gp.children!)
-      : grandParents.flatMap((gp) => gp.children!.flatMap((p) => p.children!))),
+        ? grandParents
+        : levels === 2
+          ? grandParents.flatMap((gp) => gp.children!)
+          : grandParents.flatMap((gp) => gp.children!.flatMap((p) => p.children!))),
   ];
 }
 

src/components/Table/components/EditColumnsButton.tsx

@@ -37,10 +37,10 @@ export function EditColumnsButton<R extends Kinded>(props: EditColumnsButtonProp
     isTextButton(trigger)
       ? labelOr(trigger, "editColumnsButton")
       : isNavLinkButton(trigger)
-      ? defaultTestId(trigger.navLabel)
-      : isIconButton(trigger)
-      ? trigger.icon
-      : trigger.name,
+        ? defaultTestId(trigger.navLabel)
+        : isIconButton(trigger)
+          ? trigger.icon
+          : trigger.name,
   );
 
   const options = useMemo(

src/components/Table/components/Row.tsx

@@ -217,8 +217,8 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
             isGridCellContent(maybeContent) && typeof maybeContent.colspan === "number"
               ? maybeContent.colspan
               : isExpandableHeader
-              ? numExpandedColumns + 1
-              : 1;
+                ? numExpandedColumns + 1
+                : 1;
           const revealOnRowHover = isGridCellContent(maybeContent) ? maybeContent.revealOnRowHover : false;
 
           const canSortColumn =
@@ -343,10 +343,10 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
             (rowStyle?.renderCell || rowStyle?.rowLink) && wrapAction
               ? rowLinkRenderFn(as, currentColspan)
               : isHeader || isTotals || isExpandableHeader
-              ? headerRenderFn(column, as, currentColspan)
-              : rowStyle?.onClick && wrapAction
-              ? rowClickRenderFn(as, api, currentColspan)
-              : defaultRenderFn(as, currentColspan);
+                ? headerRenderFn(column, as, currentColspan)
+                : rowStyle?.onClick && wrapAction
+                  ? rowClickRenderFn(as, api, currentColspan)
+                  : defaultRenderFn(as, currentColspan);
 
           return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick, tooltip);
         })

src/components/Table/utils/ColumnState.ts

@@ -24,7 +24,7 @@ export class ColumnState<R extends Kinded> {
   ) {
     this.column = column;
     // If the user sets `canHide: true`, we default to hidden unless they set `initVisible: true`
-    this.visible = storage.wasVisible(column.id) ?? (column.canHide ? column.initVisible ?? false : true);
+    this.visible = storage.wasVisible(column.id) ?? (column.canHide ? (column.initVisible ?? false) : true);
     if (this.visible && (storage.wasExpanded(column.id) ?? column.initExpanded)) {
       this.expanded = true;
       // TODO: verify this eslint ignore

src/components/Table/utils/columns.tsx

@@ -1,11 +1,11 @@
+import { Icon } from "src";
 import { CollapseToggle } from "src/components/Table/components/CollapseToggle";
 import { GridDataRow } from "src/components/Table/components/Row";
 import { SelectToggle } from "src/components/Table/components/SelectToggle";
 import { GridColumn, GridColumnWithId, Kinded, nonKindGridColumnKeys } from "src/components/Table/types";
 import { DragData, emptyCell } from "src/components/Table/utils/utils";
-import { isFunction, newMethodMissingProxy } from "src/utils";
-import { Icon } from "src";
 import { Css } from "src/Css";
+import { isFunction, newMethodMissingProxy } from "src/utils";
 
 /** Provides default styling for a GridColumn representing a Date. */
 export function column<T extends Kinded>(columnDef: GridColumn<T>): GridColumn<T> {
@@ -272,8 +272,8 @@ function parseFr(w: string | number | undefined): number | undefined {
   return typeof w === "number"
     ? w
     : typeof w === "undefined"
-    ? 1
-    : typeof w === "string" && w.endsWith("fr")
-    ? Number(w.replace("fr", ""))
-    : undefined;
+      ? 1
+      : typeof w === "string" && w.endsWith("fr")
+        ? Number(w.replace("fr", ""))
+        : undefined;
 }

src/components/Table/utils/sortRows.ts

@@ -121,7 +121,7 @@ export function ensureClientSideSortValueIsSortable(
   if (process.env.NODE_ENV !== "production" && !isHeader && sortOn === "client" && column.clientSideSort !== false) {
     const value = sortValue(maybeContent, false);
     if (!canClientSideSort(value)) {
-      const columnIdentifier = !column.id.startsWith("beamColumn_") ? column.id : column.name ?? idx;
+      const columnIdentifier = !column.id.startsWith("beamColumn_") ? column.id : (column.name ?? idx);
       throw new Error(
         `Column ${columnIdentifier} passed an unsortable value, use GridCellContent or clientSideSort=false`,
       );

src/components/Tag.tsx

@@ -1,8 +1,8 @@
+import { useResizeObserver } from "@react-aria/utils";
+import { ReactNode, useRef, useState } from "react";
 import { Icon, IconKey, maybeTooltip } from "src/components";
 import { Css, Margin, Only, Xss } from "src/Css";
 import { useTestIds } from "src/utils";
-import { ReactNode, useRef, useState } from "react";
-import { useResizeObserver } from "@react-aria/utils";
 
 type TagXss = Margin | "backgroundColor" | "color";
 export type TagType = "info" | "caution" | "warning" | "success" | "neutral";

src/components/Tooltip.tsx

@@ -78,7 +78,9 @@ function Popper({ triggerRef, content, placement = "auto", bgColor = Palette.Gra
   // Since we use `display: contents;` on the `triggerRef`, then the element.offsetTop/Left/etc all equal `0`. This would make
   // the tooltip show in the top left of the document. So instead, we target either the first child, if available, or the parent element as the tooltip target.
   // It is possible there are no children if the element only has text content, which is the reasoning for the parentElement fallback.
-  const targetElement = triggerRef.current ? triggerRef.current.children[0] ?? triggerRef.current.parentElement : null;
+  const targetElement = triggerRef.current
+    ? (triggerRef.current.children[0] ?? triggerRef.current.parentElement)
+    : null;
 
   const { styles, attributes } = usePopper(targetElement, popperRef.current, {
     modifiers: [
@@ -117,6 +119,6 @@ export function resolveTooltip(
   return typeof disabled !== "boolean" && disabled
     ? disabled
     : typeof readOnly !== "boolean" && readOnly
-    ? readOnly
-    : tooltip ?? undefined;
+      ? readOnly
+      : (tooltip ?? undefined);
 }

src/components/index.ts

@@ -21,8 +21,8 @@ export * from "./CssReset";
 export * from "./DnDGrid";
 export * from "./Filters";
 export * from "./Grid";
-export * from "./HelperText";
 export { HbLoadingSpinner, HbSpinnerProvider, HB_QUIPS_FLAVOR, HB_QUIPS_MISSION } from "./HbLoadingSpinner";
+export * from "./HelperText";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./Layout";

src/components/internal/DatePicker/DatePicker.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta } from "@storybook/react";
+import { format } from "date-fns";
 import { useState } from "react";
+import { Css } from "src";
 import { DatePicker } from "src/components/internal/DatePicker";
 import { jan1, jan10, jan2, jan29 } from "src/forms/formStateDomain";
-import { Css } from "src";
-import { format } from "date-fns";
 
 export default {
   component: DatePicker,

src/components/internal/OverlayTrigger.tsx

@@ -73,10 +73,10 @@ export function OverlayTrigger(props: OverlayTriggerProps) {
     isTextButton(trigger)
       ? defaultTestId(labelOr(trigger, "overlayTrigger"))
       : isNavLinkButton(trigger)
-      ? defaultTestId(trigger.navLabel)
-      : isIconButton(trigger)
-      ? trigger.icon
-      : trigger.name,
+        ? defaultTestId(trigger.navLabel)
+        : isIconButton(trigger)
+          ? trigger.icon
+          : trigger.name,
   );
 
   return (

src/forms/BoundIconCardField.test.tsx

@@ -1,6 +1,6 @@
-import { ObjectConfig, ObjectState, createObjectState, required } from "@homebound/form-state";
-import { BoundIconCardField } from "./BoundIconCardField";
+import { createObjectState, ObjectConfig, ObjectState, required } from "@homebound/form-state";
 import { click, render } from "src/utils/rtl";
+import { BoundIconCardField } from "./BoundIconCardField";
 import { AuthorInput } from "./formStateDomain";
 
 const formConfig: ObjectConfig<AuthorInput> = {

src/forms/BoundIconCardField.tsx

@@ -1,9 +1,9 @@
 import { FieldState } from "@homebound/form-state";
-import { IconCard, IconCardProps } from "src/inputs";
-import { defaultLabel } from "src/utils/defaultLabel";
-import { useTestIds } from "src/utils";
 import { Observer } from "mobx-react";
 import { IconProps } from "src/components";
+import { IconCard, IconCardProps } from "src/inputs";
+import { useTestIds } from "src/utils";
+import { defaultLabel } from "src/utils/defaultLabel";
 
 export type BoundIconCardFieldProps = Omit<IconCardProps, "label" | "selected" | "onChange"> & {
   field: FieldState<boolean | null | undefined>;

src/forms/BoundIconCardGroupField.test.tsx

@@ -1,8 +1,8 @@
+import { createObjectState, ObjectConfig, ObjectState, required } from "@homebound/form-state";
 import { IconCardGroupItemOption } from "src/inputs/IconCardGroup";
-import { AuthorInput } from "./formStateDomain";
-import { ObjectConfig, ObjectState, createObjectState, required } from "@homebound/form-state";
-import { BoundIconCardGroupField } from "./BoundIconCardGroupField";
 import { click, render } from "src/utils/rtl";
+import { BoundIconCardGroupField } from "./BoundIconCardGroupField";
+import { AuthorInput } from "./formStateDomain";
 
 enum Category {
   Math,

src/forms/BoundIconCardGroupField.tsx

@@ -1,9 +1,9 @@
 import { FieldState } from "@homebound/form-state";
 import { Observer } from "mobx-react";
+import { Value } from "src/inputs";
 import { IconCardGroup, IconCardGroupProps } from "src/inputs/IconCardGroup";
 import { useTestIds } from "src/utils";
 import { defaultLabel } from "src/utils/defaultLabel";
-import { Value } from "src/inputs";
 
 export type BoundIconCardGroupFieldProps<V extends Value> = Omit<
   IconCardGroupProps<V>,