Merge branch 'main' into spinner-css-modules

primer · Oct 30, 2024 · 46f9dcb · 46f9dcb
2 parents 2824783 + 461ae57
commit 46f9dcb
Show file tree

Hide file tree

Showing 26 changed files with 285 additions and 151 deletions.
diff --git a/.changeset/old-plums-explode.md b/.changeset/old-plums-explode.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(DataTable): export datatable utility types
diff --git a/.changeset/slow-snails-swim.md b/.changeset/slow-snails-swim.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+SelectPanel: Allow using SelectPanel in FormControl
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
@@ -40,7 +40,7 @@
     "npm": ">=7"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.23.3",
+    "@babel/eslint-parser": "7.25.9",
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.1",
     "@github/axe-github": "0.6.1",
@@ -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/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -314,6 +314,7 @@ const AvatarStack = ({
         tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined}
         ref={stackContainer}
       >
+        {' '}
         {transformChildren(children)}
       </Box>
     </AvatarStackWrapper>

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/index.ts b/packages/react/src/DataTable/index.ts
@@ -50,4 +50,6 @@ export type {
   TableSkeletonProps,
 } from './Table'
 export {createColumnHelper} from './column'
-export type {Column} from './column'
+export type {Column, CellAlignment, ColumnWidth} from './column'
+export type {UniqueRow} from './row'
+export type {ObjectPaths} from './utils'
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