diff --git a/.changeset/checkbox-ref-callback.md b/.changeset/checkbox-ref-callback.md new file mode 100644 index 00000000000..f17830c9665 --- /dev/null +++ b/.changeset/checkbox-ref-callback.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Checkbox: replace useLayoutEffect with ref callback for setting indeterminate state diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-colorblind-linux.png index df8374a8184..17b5c878406 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-dimmed-linux.png index 6c9dcaaed7a..3c80b6af83b 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-high-contrast-linux.png index b5be891d721..29bd4ab2aab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-tritanopia-linux.png index df8374a8184..17b5c878406 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png index 40cab8794e3..ee825e631c1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png index f428aa05956..8401c455c68 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png index de1cf9e8e55..1b12ea020fb 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png index 40cab8794e3..ee825e631c1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png index 40cab8794e3..ee825e631c1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png index 62d614fd193..252456e65ab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png index 62d614fd193..252456e65ab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png index 62d614fd193..252456e65ab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png index 62d614fd193..252456e65ab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png index 8470b80931a..582331a0dcd 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-dimmed-linux.png index 8e6b838735f..c6f3ce0c480 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png index d3912f87d36..74287649a2b 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png index 8470b80931a..582331a0dcd 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png index 8470b80931a..582331a0dcd 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png index d530e1ba368..ae53e0d1016 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png index d530e1ba368..ae53e0d1016 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png index d530e1ba368..ae53e0d1016 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png index d530e1ba368..ae53e0d1016 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png index daf4e252805..b1275421472 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png index b59c6974cb6..f797dcbf4d6 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png index daf4e252805..b1275421472 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png index daf4e252805..b1275421472 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png index 96883e0c7e4..a88cecef541 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png index 96883e0c7e4..50b49617076 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png index 96883e0c7e4..50b49617076 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png index 96883e0c7e4..50b49617076 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png index 40cab8794e3..ee825e631c1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png index f428aa05956..8401c455c68 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png index de1cf9e8e55..1b12ea020fb 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png index 87b56495dad..ee825e631c1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png index 40cab8794e3..ee825e631c1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png index 62d614fd193..252456e65ab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png index 62d614fd193..252456e65ab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png index 62d614fd193..d2a34618dab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png index 62d614fd193..252456e65ab 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png index 8470b80931a..2dcacae03bc 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-dimmed-linux.png index 8e6b838735f..c6f3ce0c480 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png index d3912f87d36..74287649a2b 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png index 8470b80931a..582331a0dcd 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png index 8470b80931a..582331a0dcd 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png index d530e1ba368..ae53e0d1016 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png index d530e1ba368..8ce49963c5b 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png index d530e1ba368..dfb60a34eb8 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png index d530e1ba368..dfb60a34eb8 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png index 30f4ffd2fac..43f83f1f974 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png index d61945503e8..2e65e00d5e1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png index eb63b61b1c5..c423ae4b558 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png index 30f4ffd2fac..43f83f1f974 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png index 30f4ffd2fac..43f83f1f974 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png index 90d0c945f20..2f79c88aaef 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png index 2b50fdfb984..5b9cf492ac0 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png index 90d0c945f20..2f79c88aaef 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png index 90d0c945f20..2f79c88aaef 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-colorblind-linux.png index 919fb953808..3f095645637 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-dimmed-linux.png index 56bfb306266..73dd7ef4894 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-linux.png index 919fb953808..0e5ea1623c0 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-tritanopia-linux.png index 919fb953808..0e5ea1623c0 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-colorblind-linux.png index 712578f4db4..e1dd86d01a3 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-high-contrast-linux.png index 712578f4db4..58fa681ca71 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-linux.png index 712578f4db4..e1dd86d01a3 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-tritanopia-linux.png index 712578f4db4..e1dd86d01a3 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-tritanopia-linux.png differ diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index c992f840ebb..3e6ff107e9a 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -1,7 +1,6 @@ import {clsx} from 'clsx' -import {useProvidedRefOrCreate} from '../hooks' -import React, {useContext, useEffect, type ChangeEventHandler, type InputHTMLAttributes, type ReactElement} from 'react' -import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' +import {useMergedRefs} from '../hooks' +import React, {useContext, type ChangeEventHandler, type InputHTMLAttributes, type ReactElement} from 'react' import type {FormValidationStatus} from '../utils/types/FormValidationStatus' import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext' import classes from './Checkbox.module.css' @@ -45,46 +44,48 @@ const Checkbox = React.forwardRef( ref, // eslint-disable-next-line @typescript-eslint/no-explicit-any ): ReactElement => { - const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject) + const setIndeterminate = React.useCallback( + (node: HTMLInputElement | null) => { + if (node) { + node.indeterminate = indeterminate || false + } + }, + // `checked` is intentionally included even though it is not used inside + // the callback: browsers silently clear the `indeterminate` property + // whenever the checked state changes, so the callback must re-run to + // restore it. The exhaustive-deps rule flags this as an unnecessary + // dependency (because `checked` isn't referenced in the body), hence the + // suppression below. + // eslint-disable-next-line react-hooks/exhaustive-deps + [indeterminate, checked], + ) + const mergedRef = useMergedRefs(ref, setIndeterminate) + const checkboxGroupContext = useContext(CheckboxGroupContext) const handleOnChange: ChangeEventHandler = e => { checkboxGroupContext.onChange && checkboxGroupContext.onChange(e) onChange && onChange(e) } + + // aria-checked must reflect three states: mixed (indeterminate), true, or false. + const ariaChecked = indeterminate ? ('mixed' as const) : checked ? ('true' as const) : ('false' as const) + const inputProps = { type: 'checkbox', disabled, - ref: checkboxRef, + ref: mergedRef, checked: indeterminate ? false : checked, defaultChecked, required, ['aria-required']: required ? ('true' as const) : ('false' as const), ['aria-invalid']: validationStatus === 'error' ? ('true' as const) : ('false' as const), + ['aria-checked']: ariaChecked, onChange: handleOnChange, value, name: value, ...rest, } - useLayoutEffect(() => { - if (checkboxRef.current) { - checkboxRef.current.indeterminate = indeterminate || false - } - }, [indeterminate, checked, checkboxRef]) - - useEffect(() => { - const {current: checkbox} = checkboxRef - if (!checkbox) { - return - } - - if (indeterminate) { - checkbox.setAttribute('aria-checked', 'mixed') - } else { - checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false') - } - }) - // @ts-expect-error inputProp needs a non nullable ref return }, )