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

dependabot[bot] · joshblack · web-flow · commit c3d878711e17 · 2024-10-29T18:16:00.000Z
* chore(deps-dev): bump prettier from 3.0.3 to 3.3.3 Bumps [prettier](https://github.com/prettier/prettier) from 3.0.3 to 3.3.3. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](prettier/prettier@3.0.3...3.3.3) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: format files --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
diff --git a/contributor-docs/adrs/adr-002-behavior-isolation.md b/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
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",
diff --git a/packages/react/src/ActionList/Group.tsx b/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}
diff --git a/packages/react/src/ActionList/List.tsx b/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>)
 
diff --git a/packages/react/src/Button/ButtonBase.tsx b/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>
               {
diff --git a/packages/react/src/DataTable/DataTable.stories.tsx b/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
diff --git a/packages/react/src/DataTable/useTable.ts b/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) => {
diff --git a/packages/react/src/DataTable/utils.ts 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
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/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'],
 
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/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'}`
             }
           />
         )}
diff --git a/packages/react/src/hooks/useSlots.ts b/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,
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/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">
diff --git a/packages/react/src/sx.ts b/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
diff --git a/packages/react/src/utils/polymorphic.ts b/packages/react/src/utils/polymorphic.ts
@@ -50,10 +50,10 @@ interface ForwardRefComponent<
     props: As extends ''
       ? {as: keyof JSX.IntrinsicElements}
       : As extends React.ComponentType<infer P>
-      ? Merge<P, OwnProps & {as: As}>
-      : As extends keyof JSX.IntrinsicElements
-      ? Merge<JSX.IntrinsicElements[As], OwnProps & {as: As}>
-      : never,
+        ? Merge<P, OwnProps & {as: As}>
+        : As extends keyof JSX.IntrinsicElements
+          ? Merge<JSX.IntrinsicElements[As], OwnProps & {as: As}>
+          : never,
   ): React.ReactElement | null
 }
 
diff --git a/packages/react/src/utils/types/ComponentProps.ts b/packages/react/src/utils/types/ComponentProps.ts
@@ -5,8 +5,5 @@
  *
  * @example ComponentProps<typeof MyComponent>
  */
-export type ComponentProps<T> = T extends React.ComponentType<React.PropsWithChildren<infer Props>>
-  ? Props extends object
-    ? Props
-    : never
-  : never
+export type ComponentProps<T> =
+  T extends React.ComponentType<React.PropsWithChildren<infer Props>> ? (Props extends object ? Props : never) : never

Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({`
`97`	`97`	`// because the heading is hidden from the accessibility tree and only used for presentation role.`
`98`	`98`	`// We will instead use aria-label to label the list. See a line below.`
`99`	`99`	`aria-labelledby={listRole ? undefined : groupHeadingId}`
`100`		`- aria-label={listRole ? title ?? (slots.groupHeading?.props.children as string) : undefined}`
	`100`	`+ aria-label={listRole ? (title ?? (slots.groupHeading?.props.children as string)) : undefined}`
`101`	`101`	`role={role \|\| (listRole && 'group')}`
`102`	`102`	`>`
`103`	`103`	`{slots.groupHeading ? childrenWithoutSlots : props.children}`
Original file line number	Diff line number	Diff line change
`@@ -198,13 +198,13 @@ const ButtonBase = forwardRef(`
`198`	`198`	`true,`
`199`	`199`	`)`
`200`	`200`	`: TrailingVisual`
`201`		`- ? renderModuleVisual(`
`202`		`- TrailingVisual,`
`203`		`- Boolean(loading) && !LeadingVisual,`
`204`		`- 'trailingVisual',`
`205`		`- false,`
`206`		`- )`
`207`		`- : null`
	`201`	`+ ? renderModuleVisual(`
	`202`	`+ TrailingVisual,`
	`203`	`+ Boolean(loading) && !LeadingVisual,`
	`204`	`+ 'trailingVisual',`
	`205`	`+ false,`
	`206`	`+ )`
	`207`	`+ : null`
`208`	`208`	`}`
`209`	`209`	`</Box>`
`210`	`210`	`{`
`@@ -314,8 +314,13 @@ const ButtonBase = forwardRef(`
`314`	`314`	`true,`
`315`	`315`	`)`
`316`	`316`	`: TrailingVisual`
`317`		`- ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false)`
`318`		`- : null`
	`317`	`+ ? renderModuleVisual(`
	`318`	`+ TrailingVisual,`
	`319`	`+ Boolean(loading) && !LeadingVisual,`
	`320`	`+ 'trailingVisual',`
	`321`	`+ false,`
	`322`	`+ )`
	`323`	`+ : null`
`319`	`324`	`}`
`320`	`325`	`</span>`
`321`	`326`	`{`
`@@ -420,8 +425,8 @@ const ButtonBase = forwardRef(`
`420`	`425`	`'trailingVisual',`
`421`	`426`	`)`
`422`	`427`	`: TrailingVisual`
`423`		`- ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual')`
`424`		`- : null`
	`428`	`+ ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual')`
	`429`	`+ : null`
`425`	`430`	`}`
`426`	`431`	`</Box>`
`427`	`432`	`{`