[Menu] RadioItem component (#534)

mui · Sep 19, 2024 · a88a290 · a88a290
1 parent 7402a39
commit a88a290
Show file tree

Hide file tree

Showing 23 changed files with 1,457 additions and 4 deletions.
diff --git a/docs/data/api/menu-radio-group.json b/docs/data/api/menu-radio-group.json
@@ -0,0 +1,23 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "defaultValue": { "type": { "name": "any" } },
+    "onValueChange": { "type": { "name": "func" }, "default": "() => {}" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
+    "value": { "type": { "name": "any" } }
+  },
+  "name": "MenuRadioGroup",
+  "imports": [
+    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioGroup = Menu.RadioGroup;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "MenuRadioGroup",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-menu/\">Menu</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/menu-radio-item-indicator.json b/docs/data/api/menu-radio-item-indicator.json
@@ -0,0 +1,20 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "true" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "MenuRadioItemIndicator",
+  "imports": [
+    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioItemIndicator = Menu.RadioItemIndicator;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "MenuRadioItemIndicator",
+  "forwardsRefTo": "HTMLSpanElement",
+  "filename": "/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-menu/\">Menu</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/menu-radio-item.json b/docs/data/api/menu-radio-item.json
@@ -0,0 +1,23 @@
+{
+  "props": {
+    "value": { "type": { "name": "any" }, "required": true },
+    "closeOnClick": { "type": { "name": "bool" }, "default": "true" },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "id": { "type": { "name": "string" } },
+    "label": { "type": { "name": "string" } },
+    "onClick": { "type": { "name": "func" } }
+  },
+  "name": "MenuRadioItem",
+  "imports": [
+    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioItem = Menu.RadioItem;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "MenuRadioItem",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-menu/\">Menu</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/components/menu/RadioItems.js b/docs/data/components/menu/RadioItems.js
@@ -0,0 +1,193 @@
+'use client';
+import * as React from 'react';
+import * as Menu from '@base_ui/react/Menu';
+import { styled } from '@mui/system';
+
+export default function RadioItems() {
+  return (
+    <Menu.Root>
+      <MenuButton>Font</MenuButton>
+      <MenuPositioner alignment="start" keepMounted>
+        <MenuPopup>
+          <Menu.RadioGroup defaultValue={'jetbrains-mono'}>
+            <RadioItem value="cascadia-code">
+              <Indicator />
+              Cascadia Code
+            </RadioItem>
+            <RadioItem value="consolas">
+              <Indicator />
+              Consolas
+            </RadioItem>
+            <RadioItem value="dejavu-sans-mono">
+              <Indicator />
+              DejaVu Sans Mono
+            </RadioItem>
+            <RadioItem value="fira-code">
+              <Indicator />
+              Fira Code
+            </RadioItem>
+            <RadioItem value="jetbrains-mono">
+              <Indicator />
+              JetBrains Mono
+            </RadioItem>
+            <RadioItem value="menlo">
+              <Indicator />
+              Menlo
+            </RadioItem>
+            <RadioItem value="monaco">
+              <Indicator />
+              Monaco
+            </RadioItem>
+            <RadioItem value="monolisa">
+              <Indicator />
+              Monolisa
+            </RadioItem>
+            <RadioItem value="source-code-pro">
+              <Indicator />
+              Source Code Pro
+            </RadioItem>
+          </Menu.RadioGroup>
+        </MenuPopup>
+      </MenuPositioner>
+    </Menu.Root>
+  );
+}
+
+const blue = {
+  50: '#F0F7FF',
+  100: '#C2E0FF',
+  200: '#99CCF3',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const MenuPopup = styled(Menu.Popup)(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  padding: 6px;
+  margin: 12px 0;
+  min-width: 200px;
+  border-radius: 12px;
+  overflow: auto;
+  outline: 0;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  z-index: 1;
+  transform-origin: var(--transform-origin);
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 100ms ease-in, transform 100ms ease-in;
+
+  &[data-menu='open'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+  `,
+);
+
+const RadioItem = styled(Menu.RadioItem)(
+  ({ theme }) => `
+  list-style: none;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: default;
+  user-select: none;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+
+  &:focus {
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  }
+
+  &[data-disabled] {
+    color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+  }
+  `,
+);
+
+const Indicator = styled(Menu.RadioItemIndicator)(
+  ({ theme }) => `
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 1px solid;
+  vertical-align: baseline;
+  margin-right: 8px;
+  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
+  box-sizing: border-box;
+  border-radius: 50%;
+
+  &[data-radioitem=checked] {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[700]};
+    box-shadow: 0 0 0 2px ${theme.palette.mode === 'dark' ? grey[900] : '#fff'} inset;
+  }
+  `,
+);
+
+const MenuButton = styled(Menu.Trigger)(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+  `,
+);
+
+const MenuPositioner = styled(Menu.Positioner)`
+  &:focus-visible {
+    outline: 0;
+  }
+
+  &[data-menu='closed'] {
+    pointer-events: none;
+  }
+`;