chore(deps-dev): bump prettier from 3.0.3 to 3.3.3

contributor-docs/adrs/adr-002-behavior-isolation.md

@@ -108,5 +108,7 @@ Some behaviors can be implemented as vanilla JavaScript without introducing addi
 In general, _portions of behaviors_ that affect or rely on **user interactions and events**, **shared state**, or **CSS styles** should be kept in React Hooks. Parts of the behavior that can be implemented in isolation of these concepts should be built with no dependency on React or other libraries.
 
 [^1]: https://codesandbox.io/s/demo-styling-custom-element-g973d?file=/src/index.tsx
+
 [^2]: https://github.com/github/details-dialog-element/blob/main/src/index.ts#L195
+
 [^3]: https://github.com/github/details-dialog-element#details-dialog-close

package.json

@@ -72,7 +72,7 @@
     "jest-watch-typeahead": "2.2.2",
     "markdownlint-cli2": "^0.11.0",
     "markdownlint-cli2-formatter-pretty": "0.0.3",
-    "prettier": "3.0.3",
+    "prettier": "3.3.3",
     "rimraf": "5.0.5",
     "size-limit": "11.1.5",
     "stylelint": "16.9.0",

packages/react/src/ActionList/Group.tsx

@@ -97,7 +97,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
           // because the heading is hidden from the accessibility tree and only used for presentation role.
           // We will instead use aria-label to label the list. See a line below.
           aria-labelledby={listRole ? undefined : groupHeadingId}
-          aria-label={listRole ? title ?? (slots.groupHeading?.props.children as string) : undefined}
+          aria-label={listRole ? (title ?? (slots.groupHeading?.props.children as string)) : undefined}
           role={role || (listRole && 'group')}
         >
           {slots.groupHeading ? childrenWithoutSlots : props.children}

packages/react/src/ActionList/List.tsx

@@ -39,7 +39,7 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
       enableFocusZone: enableFocusZoneFromContainer,
     } = React.useContext(ActionListContainerContext)
 
-    const ariaLabelledBy = slots.heading ? slots.heading.props.id ?? headingId : listLabelledBy
+    const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy
     const listRole = role || listRoleFromContainer
     const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLUListElement>)
 

packages/react/src/Button/ButtonBase.tsx

@@ -198,13 +198,13 @@ const ButtonBase = forwardRef(
                             true,
                           )
                         : TrailingVisual
-                        ? renderModuleVisual(
-                            TrailingVisual,
-                            Boolean(loading) && !LeadingVisual,
-                            'trailingVisual',
-                            false,
-                          )
-                        : null
+                          ? renderModuleVisual(
+                              TrailingVisual,
+                              Boolean(loading) && !LeadingVisual,
+                              'trailingVisual',
+                              false,
+                            )
+                          : null
                     }
                   </Box>
                   {
@@ -314,8 +314,13 @@ const ButtonBase = forwardRef(
                           true,
                         )
                       : TrailingVisual
-                      ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false)
-                      : null
+                        ? renderModuleVisual(
+                            TrailingVisual,
+                            Boolean(loading) && !LeadingVisual,
+                            'trailingVisual',
+                            false,
+                          )
+                        : null
                   }
                 </span>
                 {
@@ -420,8 +425,8 @@ const ButtonBase = forwardRef(
                         'trailingVisual',
                       )
                     : TrailingVisual
-                    ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual')
-                    : null
+                      ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual')
+                      : null
                 }
               </Box>
               {

packages/react/src/DataTable/DataTable.stories.tsx

@@ -189,8 +189,8 @@ export const Playground = (args: DataTableProps<UniqueRow> & ColWidthArgTypes) =
     return args[`colWidth${colIndex}`] !== 'explicit width'
       ? args[`colWidth${colIndex}`]
       : args[`explicitColWidth${colIndex}`]
-      ? args[`explicitColWidth${colIndex}`]
-      : 'grow'
+        ? args[`explicitColWidth${colIndex}`]
+        : 'grow'
   }
 
   const align = args.align as CellAlignment

packages/react/src/DataTable/useTable.ts

@@ -135,8 +135,8 @@ export function useTable<Data extends UniqueRow>({
       header.column.sortBy === true
         ? strategies.basic
         : typeof header.column.sortBy === 'string'
-        ? strategies[header.column.sortBy]
-        : header.column.sortBy
+          ? strategies[header.column.sortBy]
+          : header.column.sortBy
 
     setRowOrder(rowOrder => {
       return rowOrder.slice().sort((a, b) => {

packages/react/src/DataTable/utils.ts

@@ -12,9 +12,9 @@ type MaxLength = ArrayOfLength<10>[number]
 type ArrayIndex<A extends ReadonlyArray<any>, Keys extends number = never> = A extends readonly []
   ? Keys
   : // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  A extends readonly [infer _, ...infer Tail]
-  ? ArrayIndex<Tail, Keys | Tail['length']>
-  : Keys
+    A extends readonly [infer _, ...infer Tail]
+    ? ArrayIndex<Tail, Keys | Tail['length']>
+    : Keys
 
 // Check if the given type is within the bounds set by `MaxLength`
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -30,25 +30,25 @@ type ArrayWithinBounds<T> = T extends ReadonlyArray<any> & {length: infer Length
 export type ObjectPaths<T> = T extends readonly any[] & ArrayWithinBounds<T>
   ? `${ArrayIndex<T>}` | PrefixPath<T, ArrayIndex<T>>
   : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  T extends any[]
-  ? never & 'Unable to determine keys of potentially boundless array'
-  : T extends Date
-  ? never
-  : T extends object
-  ? Extract<keyof T, string | number> | PrefixPath<T, Extract<keyof T, string | number>>
-  : never
+    T extends any[]
+    ? never & 'Unable to determine keys of potentially boundless array'
+    : T extends Date
+      ? never
+      : T extends object
+        ? Extract<keyof T, string | number> | PrefixPath<T, Extract<keyof T, string | number>>
+        : never
 
-type PrefixPath<T, Prefix> = Prefix extends Extract<keyof T, number | string>
-  ? `${Prefix}.${ObjectPaths<T[Prefix]>}`
-  : never
+type PrefixPath<T, Prefix> =
+  Prefix extends Extract<keyof T, number | string> ? `${Prefix}.${ObjectPaths<T[Prefix]>}` : never
 
 // Get the value of a given path within an object
-export type ObjectPathValue<ObjectType extends object, Path extends string | number> = ObjectType extends Record<
-  string | number,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  any
->
-  ? Path extends `${infer Key}.${infer NestedPath}`
-    ? ObjectPathValue<ObjectType[Key], NestedPath>
-    : ObjectType[Path]
-  : never
+export type ObjectPathValue<ObjectType extends object, Path extends string | number> =
+  ObjectType extends Record<
+    string | number,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any
+  >
+    ? Path extends `${infer Key}.${infer NestedPath}`
+      ? ObjectPathValue<ObjectType[Key], NestedPath>
+      : ObjectType[Path]
+    : never

packages/react/src/PageLayout/PageLayout.tsx

@@ -788,8 +788,8 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             width: resizable
               ? ['100%', null, 'clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width))']
               : isPaneWidth(width)
-              ? paneWidths[width]
-              : width.default,
+                ? paneWidths[width]
+                : width.default,
             padding: SPACING_MAP[padding],
             overflow: [null, null, 'auto'],
 

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -213,8 +213,8 @@ export function SelectPanel({
               filterValue === ''
                 ? 'Showing all items'
                 : items.length <= 0
-                ? 'No matching items'
-                : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
+                  ? 'No matching items'
+                  : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
             }
           />
         )}

packages/react/src/hooks/useSlots.ts

@@ -20,12 +20,12 @@ type SlotElements<Config extends SlotConfig> = {
 type SlotValue<Config, Property extends keyof Config> = Config[Property] extends React.ElementType // config option 1
   ? React.ReactElement<React.ComponentPropsWithoutRef<Config[Property]>, Config[Property]>
   : Config[Property] extends readonly [
-      infer ElementType extends React.ElementType, // config option 2, infer array[0] as component
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      infer _testFn, // even though we don't use testFn, we need to infer it to support types for slots.*.props
-    ]
-  ? React.ReactElement<React.ComponentPropsWithoutRef<ElementType>, ElementType>
-  : never // useful for narrowing types, third option is not possible
+        infer ElementType extends React.ElementType, // config option 2, infer array[0] as component
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        infer _testFn, // even though we don't use testFn, we need to infer it to support types for slots.*.props
+      ]
+    ? React.ReactElement<React.ComponentPropsWithoutRef<ElementType>, ElementType>
+    : never // useful for narrowing types, third option is not possible
 
 /**
  * Extract components from `children` so we can render them in different places,

packages/react/src/internal/components/TextInputInnerAction.tsx

@@ -107,10 +107,10 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
     const accessibleLabel = ariaLabel
       ? {'aria-label': ariaLabel}
       : ariaLabelledBy
-      ? {'aria-labelledby': ariaLabelledBy}
-      : {
-          'aria-label': '',
-        }
+        ? {'aria-labelledby': ariaLabelledBy}
+        : {
+            'aria-label': '',
+          }
 
     return (
       <Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">

packages/react/src/sx.ts

@@ -8,10 +8,10 @@ export type BetterCssProperties = {
   [K in keyof SystemCssProperties]: K extends keyof ColorProps
     ? ThemeColorPaths | SystemCssProperties[K]
     : K extends keyof BorderColorProps
-    ? ThemeColorPaths | SystemCssProperties[K]
-    : K extends keyof ShadowProps
-    ? ThemeShadowPaths | SystemCssProperties[K]
-    : SystemCssProperties[K]
+      ? ThemeColorPaths | SystemCssProperties[K]
+      : K extends keyof ShadowProps
+        ? ThemeShadowPaths | SystemCssProperties[K]
+        : SystemCssProperties[K]
 }
 
 // Support CSS custom properties in the `sx` prop