[core] Improve DX of importing Base UI components (mui#700)

mj12albert · Oct 14, 2024 · 094b558 · 094b558
1 parent ef3c012
commit 094b558
Show file tree

Hide file tree

Showing 413 changed files with 565 additions and 696 deletions.
diff --git a/docs/app/DocsProviders.tsx b/docs/app/DocsProviders.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { DemoVariantSelectorProvider } from 'docs-base/src/components/demo/DemoVariantSelectorProvider';
 import { PackageManagerSnippetProvider } from 'docs-base/src/blocks/PackageManagerSnippet/PackageManagerSnippetProvider';
 

diff --git a/docs/app/experiments/collapsible-accordion.tsx b/docs/app/experiments/collapsible-accordion.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const TRANSITION_DURATION = '350ms';
 

diff --git a/docs/app/experiments/collapsible-framer.tsx b/docs/app/experiments/collapsible-framer.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { motion } from 'framer-motion';
 
 export default function CollapsibleFramer() {

diff --git a/docs/app/experiments/collapsible-hidden-until-found.tsx b/docs/app/experiments/collapsible-hidden-until-found.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 

diff --git a/docs/app/experiments/collapsible.tsx b/docs/app/experiments/collapsible.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 

diff --git a/docs/app/experiments/dialog.tsx b/docs/app/experiments/dialog.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 // eslint-disable-next-line no-restricted-imports
 import { useTransitionStatus } from '@base_ui/react/utils/useTransitionStatus';
 import { animated as springAnimated, useSpring, useSpringRef } from '@react-spring/web';

diff --git a/docs/app/experiments/menu-anchor-el.tsx b/docs/app/experiments/menu-anchor-el.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const [anchorEl, setAnchor] = React.useState<HTMLDivElement | null>(null);

diff --git a/docs/app/experiments/menu-anchor-ref.tsx b/docs/app/experiments/menu-anchor-ref.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const anchor = React.useRef<HTMLDivElement>(null);

diff --git a/docs/app/experiments/progress.tsx b/docs/app/experiments/progress.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 const VAL1 = 33;
 

diff --git a/docs/app/experiments/slider-change-committed-lag.tsx b/docs/app/experiments/slider-change-committed-lag.tsx
@@ -2,7 +2,7 @@
 // https://github.com/mui/material-ui/issues/41739
 // to cross check whether this issue would still occur in the new API
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {

diff --git a/docs/app/experiments/slider-marks.tsx b/docs/app/experiments/slider-marks.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 const STOPS = [
   {
@@ -33,7 +32,7 @@ function getSliderThumbAriaValueText(value: number) {
 // for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { direction, values } = useSliderContext();
+  const { direction, values } = Slider.useSliderContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (

diff --git a/docs/app/experiments/slider-template.tsx b/docs/app/experiments/slider-template.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {

diff --git a/docs/app/experiments/slider-tooltip.tsx b/docs/app/experiments/slider-tooltip.tsx
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Slider } from '@base_ui/react/Slider';
+import { Tooltip } from '@base_ui/react/Tooltip';
 
 function useIsDarkMode() {
   const theme = useTheme();

diff --git a/docs/app/experiments/slider.tsx b/docs/app/experiments/slider.tsx
@@ -1,8 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function App() {
   const [val1, setVal1] = React.useState(50);
@@ -233,7 +232,7 @@ function Label(props: any) {
   const defaultId = React.useId();
   const labelId = idProp ?? defaultId;
 
-  const { subitems } = useSliderContext();
+  const { subitems } = Slider.useSliderContext();
 
   const htmlFor = Array.from(subitems.values())
     .reduce((acc, item) => {

diff --git a/docs/app/experiments/tabs.tsx b/docs/app/experiments/tabs.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   const [v, sv] = React.useState<string | number | null>(0);

diff --git a/docs/app/experiments/tooltip.tsx b/docs/app/experiments/tooltip.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled, keyframes } from '@mui/system';
 import { motion, AnimatePresence } from 'framer-motion';
 

diff --git a/docs/data/api/alert-dialog-backdrop.json b/docs/data/api/alert-dialog-backdrop.json
@@ -6,7 +6,7 @@
   },
   "name": "AlertDialogBackdrop",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/alert-dialog-close.json b/docs/data/api/alert-dialog-close.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogClose",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogClose = AlertDialog.Close;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogClose = AlertDialog.Close;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/alert-dialog-description.json b/docs/data/api/alert-dialog-description.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogDescription",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogDescription = AlertDialog.Description;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogDescription = AlertDialog.Description;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/alert-dialog-popup.json b/docs/data/api/alert-dialog-popup.json
@@ -7,7 +7,7 @@
   },
   "name": "AlertDialogPopup",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogPopup = AlertDialog.Popup;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogPopup = AlertDialog.Popup;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/alert-dialog-root.json b/docs/data/api/alert-dialog-root.json
@@ -7,7 +7,7 @@
   },
   "name": "AlertDialogRoot",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogRoot = AlertDialog.Root;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogRoot = AlertDialog.Root;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/alert-dialog-title.json b/docs/data/api/alert-dialog-title.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogTitle",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogTitle = AlertDialog.Title;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogTitle = AlertDialog.Title;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/alert-dialog-trigger.json b/docs/data/api/alert-dialog-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogTrigger",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogTrigger = AlertDialog.Trigger;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogTrigger = AlertDialog.Trigger;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/checkbox-group-root.json b/docs/data/api/checkbox-group-root.json
@@ -11,7 +11,7 @@
   },
   "name": "CheckboxGroupRoot",
   "imports": [
-    "import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
+    "import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/checkbox-indicator.json b/docs/data/api/checkbox-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "CheckboxIndicator",
   "imports": [
-    "import * as Checkbox from '@base_ui/react/Checkbox';\nconst CheckboxIndicator = Checkbox.Indicator;"
+    "import { Checkbox } from '@base_ui/react/Checkbox';\nconst CheckboxIndicator = Checkbox.Indicator;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/checkbox-root.json b/docs/data/api/checkbox-root.json
@@ -23,7 +23,7 @@
   },
   "name": "CheckboxRoot",
   "imports": [
-    "import * as Checkbox from '@base_ui/react/Checkbox';\nconst CheckboxRoot = Checkbox.Root;"
+    "import { Checkbox } from '@base_ui/react/Checkbox';\nconst CheckboxRoot = Checkbox.Root;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/collapsible-content.json b/docs/data/api/collapsible-content.json
@@ -6,7 +6,7 @@
   },
   "name": "CollapsibleContent",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/collapsible-root.json b/docs/data/api/collapsible-root.json
@@ -10,7 +10,7 @@
   },
   "name": "CollapsibleRoot",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/collapsible-trigger.json b/docs/data/api/collapsible-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "CollapsibleTrigger",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/dialog-backdrop.json b/docs/data/api/dialog-backdrop.json
@@ -6,7 +6,7 @@
   },
   "name": "DialogBackdrop",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogBackdrop = Dialog.Backdrop;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogBackdrop = Dialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/dialog-close.json b/docs/data/api/dialog-close.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogClose",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogClose = Dialog.Close;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogClose = Dialog.Close;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

diff --git a/docs/data/api/dialog-description.json b/docs/data/api/dialog-description.json
@@ -5,7 +5,7 @@
   },
   "name": "DialogDescription",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogDescription = Dialog.Description;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogDescription = Dialog.Description;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/dialog-popup.json b/docs/data/api/dialog-popup.json
@@ -6,9 +6,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogPopup",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogPopup = Dialog.Popup;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogPopup = Dialog.Popup;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

diff --git a/docs/data/api/dialog-root.json b/docs/data/api/dialog-root.json
@@ -8,7 +8,7 @@
     "open": { "type": { "name": "bool" } }
   },
   "name": "DialogRoot",
-  "imports": ["import * as Dialog from '@base_ui/react/Dialog';\nconst DialogRoot = Dialog.Root;"],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogRoot = Dialog.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": null,

diff --git a/docs/data/api/dialog-title.json b/docs/data/api/dialog-title.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogTitle",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogTitle = Dialog.Title;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogTitle = Dialog.Title;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

diff --git a/docs/data/api/dialog-trigger.json b/docs/data/api/dialog-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "DialogTrigger",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogTrigger = Dialog.Trigger;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogTrigger = Dialog.Trigger;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/field-control.json b/docs/data/api/field-control.json
@@ -5,9 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldControl",
-  "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldControl = Field.Control;"
-  ],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldControl = Field.Control;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

diff --git a/docs/data/api/field-description.json b/docs/data/api/field-description.json
@@ -5,7 +5,7 @@
   },
   "name": "FieldDescription",
   "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldDescription = Field.Description;"
+    "import { Field } from '@base_ui/react/Field';\nconst FieldDescription = Field.Description;"
   ],
   "classes": [],
   "spread": true,

diff --git a/docs/data/api/field-error.json b/docs/data/api/field-error.json
@@ -11,7 +11,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldError",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldError = Field.Error;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldError = Field.Error;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

diff --git a/docs/data/api/field-label.json b/docs/data/api/field-label.json
@@ -4,7 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldLabel",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldLabel = Field.Label;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldLabel = Field.Label;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

diff --git a/docs/data/api/field-root.json b/docs/data/api/field-root.json
@@ -13,7 +13,7 @@
     }
   },
   "name": "FieldRoot",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldRoot = Field.Root;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldRoot = Field.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

diff --git a/docs/data/api/field-validity.json b/docs/data/api/field-validity.json
@@ -2,7 +2,7 @@
   "props": {},
   "name": "FieldValidity",
   "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldValidity = Field.Validity;"
+    "import { Field } from '@base_ui/react/Field';\nconst FieldValidity = Field.Validity;"
   ],
   "classes": [],
   "spread": true,