Merge remote-tracking branch 'upstream/master' into feat/slider-rewrite

mui · Jun 25, 2024 · 4211af7 · 4211af7
2 parents e4e2118 + 3226736
commit 4211af7
Show file tree

Hide file tree

Showing 100 changed files with 3,991 additions and 17 deletions.
diff --git a/.mocharc.js b/.mocharc.js
@@ -10,7 +10,11 @@ module.exports = {
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
-  require: ['@mui/internal-test-utils/setupBabel', '@mui/internal-test-utils/setupJSDOM'],
+  require: [
+    '@mui/internal-test-utils/setupBabel',
+    '@mui/internal-test-utils/setupJSDOM',
+    './packages/mui-base/test/setup.ts',
+  ],
   'watch-ignore': [
     // default
     '.git',

diff --git a/docs/data/base/components/popover/UnstyledPopoverIntroduction/system/index.js b/docs/data/base/components/popover/UnstyledPopoverIntroduction/system/index.js
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import * as Popover from '@base_ui/react/Popover';
+import { styled } from '@mui/system';
+
+export default function UnstyledPopoverIntroduction() {
+  return (
+    <Popover.Root>
+      <AnchorButton>Trigger</AnchorButton>
+      <Popover.Positioner sideOffset={8}>
+        <PopoverPopup>
+          <PopoverTitle>Popover Title</PopoverTitle>
+          <PopoverDescription>Popover Description</PopoverDescription>
+          <PopoverArrow />
+        </PopoverPopup>
+      </Popover.Positioner>
+    </Popover.Root>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const PopoverPopup = styled(Popover.Popup)`
+  position: relative;
+  background: white;
+  color: black;
+  border-radius: 5px;
+  filter: drop-shadow(0 2px 4px rgb(0 10 20 / 0.25));
+  outline: 0;
+  padding: 8px 16px;
+`;
+
+export const PopoverTitle = styled(Popover.Title)`
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 0;
+`;
+
+export const PopoverDescription = styled(Popover.Description)`
+  margin-top: 12px;
+`;
+
+export const AnchorButton = styled(Popover.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;
+
+export const PopoverArrow = styled(Popover.Arrow)`
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  background: white;
+  z-index: -1;
+
+  &[data-side='top'] {
+    bottom: -5px;
+  }
+
+  &[data-side='right'] {
+    left: -5px;
+  }
+
+  &[data-side='bottom'] {
+    top: -5px;
+  }
+
+  &[data-side='left'] {
+    right: -5px;
+  }
+`;
diff --git a/docs/data/base/components/popover/UnstyledPopoverIntroduction/system/index.tsx b/docs/data/base/components/popover/UnstyledPopoverIntroduction/system/index.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import * as Popover from '@base_ui/react/Popover';
+import { styled } from '@mui/system';
+
+export default function UnstyledPopoverIntroduction() {
+  return (
+    <Popover.Root>
+      <AnchorButton>Trigger</AnchorButton>
+      <Popover.Positioner sideOffset={8}>
+        <PopoverPopup>
+          <PopoverTitle>Popover Title</PopoverTitle>
+          <PopoverDescription>Popover Description</PopoverDescription>
+          <PopoverArrow />
+        </PopoverPopup>
+      </Popover.Positioner>
+    </Popover.Root>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const PopoverPopup = styled(Popover.Popup)`
+  position: relative;
+  background: white;
+  color: black;
+  border-radius: 5px;
+  filter: drop-shadow(0 2px 4px rgb(0 10 20 / 0.25));
+  outline: 0;
+  padding: 8px 16px;
+`;
+
+export const PopoverTitle = styled(Popover.Title)`
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 0;
+`;
+
+export const PopoverDescription = styled(Popover.Description)`
+  margin-top: 12px;
+`;
+
+export const AnchorButton = styled(Popover.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;
+
+export const PopoverArrow = styled(Popover.Arrow)`
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  background: white;
+  z-index: -1;
+
+  &[data-side='top'] {
+    bottom: -5px;
+  }
+
+  &[data-side='right'] {
+    left: -5px;
+  }
+
+  &[data-side='bottom'] {
+    top: -5px;
+  }
+
+  &[data-side='left'] {
+    right: -5px;
+  }
+`;
diff --git a/docs/data/base/components/popover/UnstyledPopoverIntroduction/system/index.tsx.preview b/docs/data/base/components/popover/UnstyledPopoverIntroduction/system/index.tsx.preview
@@ -0,0 +1,10 @@
+<Popover.Root>
+  <AnchorButton>Trigger</AnchorButton>
+  <Popover.Positioner sideOffset={8}>
+    <PopoverPopup>
+      <PopoverTitle>Popover Title</PopoverTitle>
+      <PopoverDescription>Popover Description</PopoverDescription>
+      <PopoverArrow />
+    </PopoverPopup>
+  </Popover.Positioner>
+</Popover.Root>
diff --git a/docs/data/base/components/popover/UnstyledPopoverTransition.js b/docs/data/base/components/popover/UnstyledPopoverTransition.js
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import * as Popover from '@base_ui/react/Popover';
+import { styled } from '@mui/system';
+
+export default function UnstyledPopoverTransition() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Popover.Root>
+        <AnchorButton>Trigger</AnchorButton>
+        <Popover.Positioner sideOffset={5}>
+          <PopoverPopup>
+            <PopoverTitle>Popover Title</PopoverTitle>
+            <PopoverDescription>Popover Description</PopoverDescription>
+          </PopoverPopup>
+        </Popover.Positioner>
+      </Popover.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const PopoverPopup = styled(Popover.Popup)`
+  position: relative;
+  background: white;
+  color: black;
+  border-radius: 5px;
+  filter: drop-shadow(0 0.1rem 0.25rem rgb(0 10 20 / 0.25));
+  outline: 0;
+  min-width: 200px;
+  padding: 8px 16px;
+  transition-property: opacity, transform;
+  transition-duration: 0.2s;
+  opacity: 0;
+  transform: scale(0.9);
+  transform-origin: var(--transform-origin);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-entering] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+`;
+
+export const PopoverTitle = styled(Popover.Title)`
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 0;
+`;
+
+export const PopoverDescription = styled('p')`
+  margin-top: 12px;
+`;
+
+export const AnchorButton = styled(Popover.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;
diff --git a/docs/data/base/components/popover/UnstyledPopoverTransition.tsx b/docs/data/base/components/popover/UnstyledPopoverTransition.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import * as Popover from '@base_ui/react/Popover';
+import { styled } from '@mui/system';
+
+export default function UnstyledPopoverTransition() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Popover.Root>
+        <AnchorButton>Trigger</AnchorButton>
+        <Popover.Positioner sideOffset={5}>
+          <PopoverPopup>
+            <PopoverTitle>Popover Title</PopoverTitle>
+            <PopoverDescription>Popover Description</PopoverDescription>
+          </PopoverPopup>
+        </Popover.Positioner>
+      </Popover.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const PopoverPopup = styled(Popover.Popup)`
+  position: relative;
+  background: white;
+  color: black;
+  border-radius: 5px;
+  filter: drop-shadow(0 0.1rem 0.25rem rgb(0 10 20 / 0.25));
+  outline: 0;
+  min-width: 200px;
+  padding: 8px 16px;
+  transition-property: opacity, transform;
+  transition-duration: 0.2s;
+  opacity: 0;
+  transform: scale(0.9);
+  transform-origin: var(--transform-origin);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-entering] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+`;
+
+export const PopoverTitle = styled(Popover.Title)`
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 0;
+`;
+
+export const PopoverDescription = styled('p')`
+  margin-top: 12px;
+`;
+
+export const AnchorButton = styled(Popover.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;
diff --git a/docs/data/base/components/popover/UnstyledPopoverTransition.tsx.preview b/docs/data/base/components/popover/UnstyledPopoverTransition.tsx.preview
@@ -0,0 +1,9 @@
+<Popover.Root>
+  <AnchorButton>Trigger</AnchorButton>
+  <Popover.Positioner sideOffset={5}>
+    <PopoverPopup>
+      <PopoverTitle>Popover Title</PopoverTitle>
+      <PopoverDescription>Popover Description</PopoverDescription>
+    </PopoverPopup>
+  </Popover.Positioner>
+</Popover.Root>