[core] Add exports field and build proper ES modules

.circleci/config.yml

@@ -375,6 +375,19 @@ jobs:
           name: Run danger on PRs
           command: pnpm danger ci --fail-on-errors
       # TODO test bundle size https://github.com/mui/base-ui/issues/201
+  test_package:
+    <<: *default-job
+    steps:
+      - checkout
+      - install_js:
+          react-version: << parameters.react-version >>
+      - run:
+          name: Build packages
+          command: pnpm release:build
+      - run:
+          name: Are the types wrong?
+          command: pnpm -r test:package-types
+
 workflows:
   version: 2
   pipeline:
@@ -419,6 +432,10 @@ workflows:
           <<: *default-context
           requires:
             - checkout
+      - test_package:
+          <<: *default-context
+          requires:
+            - checkout
   profile:
     when:
       equal: [profile, << pipeline.parameters.workflow >>]

.eslintrc.js

@@ -94,5 +94,11 @@ module.exports = {
         'filenames/match-exported': ['error'],
       },
     },
+    {
+      files: ['packages/**/*'],
+      rules: {
+        'import/extensions': ['error', 'ignorePackages'],
+      },
+    },
   ],
 };

babel.config.js

@@ -8,12 +8,8 @@ function resolveAliasPath(relativeToBabelConf) {
   return `./${resolvedPath.replace('\\', '/')}`;
 }
 
-const productionPlugins = [
-  ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
-];
-
 module.exports = function getBabelConfig(api) {
-  const useESModules = api.env(['regressions', 'stable', 'rollup']);
+  const useESModules = !api.env(['node']);
 
   const defaultAlias = {
     '@base_ui/react': resolveAliasPath('./packages/mui-base/src'),
@@ -70,9 +66,15 @@ module.exports = function getBabelConfig(api) {
     ],
   ];
 
-  if (process.env.NODE_ENV === 'production') {
-    plugins.push(...productionPlugins);
-  }
+  const devPlugins = [
+    [
+      'babel-plugin-module-resolver',
+      {
+        root: ['./'],
+        alias: defaultAlias,
+      },
+    ],
+  ];
 
   return {
     assumptions: {
@@ -98,39 +100,14 @@ module.exports = function getBabelConfig(api) {
     ],
     env: {
       coverage: {
-        plugins: [
-          'babel-plugin-istanbul',
-          [
-            'babel-plugin-module-resolver',
-            {
-              root: ['./'],
-              alias: defaultAlias,
-            },
-          ],
-        ],
+        plugins: ['babel-plugin-istanbul', ...devPlugins],
       },
       development: {
-        plugins: [
-          [
-            'babel-plugin-module-resolver',
-            {
-              root: ['./'],
-              alias: defaultAlias,
-            },
-          ],
-        ],
+        plugins: devPlugins,
       },
       test: {
         sourceMaps: 'both',
-        plugins: [
-          [
-            'babel-plugin-module-resolver',
-            {
-              root: ['./'],
-              alias: defaultAlias,
-            },
-          ],
-        ],
+        plugins: devPlugins,
       },
     },
   };

docs/next.config.mjs

@@ -72,6 +72,11 @@ const nextConfig = {
           ...config.resolve.alias,
           docs: path.resolve(workspaceRoot, 'docs'),
         },
+        extensionAlias: {
+          '.js': ['.js', '.jsx', '.ts', '.tsx'],
+          '.mjs': ['.mjs', '.mts'],
+          '.cjs': ['.cjs', '.cts'],
+        },
       },
       module: {
         ...config.module,

docs/vitest.config.ts → docs/vitest.config.mts

@@ -1,5 +1,5 @@
 import { mergeConfig, defineProject } from 'vitest/config';
-import sharedConfig from '../vitest.shared';
+import sharedConfig from '../vitest.shared.mts';
 
 export default mergeConfig(
   sharedConfig,

packages/mui-base/package.json

@@ -4,7 +4,6 @@
   "private": false,
   "author": "MUI Team",
   "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",
-  "main": "./src/index.ts",
   "keywords": [
     "react",
     "react-component",
@@ -26,15 +25,25 @@
     "type": "opencollective",
     "url": "https://opencollective.com/mui-org"
   },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    },
+    "./*": {
+      "import": "./src/*/index.ts"
+    }
+  },
   "imports": {
     "#test-utils": "./test/index.ts"
   },
+  "type": "commonjs",
   "scripts": {
     "build": "pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
     "build:node": "node ../../scripts/build.mjs node",
     "build:stable": "node ../../scripts/build.mjs stable",
     "build:copy-files": "node ../../scripts/copyFiles.mjs",
-    "build:types": "tsc -b tsconfig.build.json",
+    "build:types": "tsc -b tsconfig.build.json && tsc -b tsconfig.build.cjs.json",
+    "test:package-types": "attw --pack ./build --include-entrypoints ./Accordion ./Menu ./Tooltip",
     "prebuild": "rimraf --glob build build-tests \"*.tsbuildinfo\"",
     "release": "pnpm build && pnpm publish",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-base/**/*.test.{js,ts,tsx}'",
@@ -52,6 +61,7 @@
     "use-sync-external-store": "^1.2.2"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.16.4",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

packages/mui-base/src/Accordion/Header/AccordionHeader.test.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Accordion } from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
-import { NOOP } from '../../utils/noop';
-import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { AccordionRootContext } from '../Root/AccordionRootContext';
-import { AccordionItemContext } from '../Item/AccordionItemContext';
+import { NOOP } from '../../utils/noop.js';
+import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { AccordionRootContext } from '../Root/AccordionRootContext.js';
+import { AccordionItemContext } from '../Item/AccordionItemContext.js';
 
 const accordionRootContextValue: AccordionRootContext = {
   accordionItemRefs: { current: [] },

packages/mui-base/src/Accordion/Header/AccordionHeader.tsx

@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { AccordionItem } from '../Item/AccordionItem';
-import { useAccordionItemContext } from '../Item/AccordionItemContext';
-import { accordionStyleHookMapping } from '../Item/styleHooks';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import type { AccordionItem } from '../Item/AccordionItem.js';
+import { useAccordionItemContext } from '../Item/AccordionItemContext.js';
+import { accordionStyleHookMapping } from '../Item/styleHooks.js';
 
 /**
  *

packages/mui-base/src/Accordion/Item/AccordionItem.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Accordion } from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
-import { NOOP } from '../../utils/noop';
-import { AccordionRootContext } from '../Root/AccordionRootContext';
+import { NOOP } from '../../utils/noop.js';
+import { AccordionRootContext } from '../Root/AccordionRootContext.js';
 
 const accordionRootContextValue: AccordionRootContext = {
   accordionItemRefs: { current: [] },

packages/mui-base/src/Accordion/Item/AccordionItem.tsx

@@ -1,20 +1,20 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useForkRef } from '../../utils/useForkRef';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useEventCallback } from '../../utils/useEventCallback';
-import { useId } from '../../utils/useId';
-import type { TransitionStatus } from '../../utils/useTransitionStatus';
-import { useCollapsibleRoot } from '../../Collapsible/Root/useCollapsibleRoot';
-import type { CollapsibleRoot } from '../../Collapsible/Root/CollapsibleRoot';
-import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { useCompositeListItem } from '../../Composite/List/useCompositeListItem';
-import type { AccordionRoot } from '../Root/AccordionRoot';
-import { useAccordionRootContext } from '../Root/AccordionRootContext';
-import { AccordionItemContext } from './AccordionItemContext';
-import { accordionStyleHookMapping } from './styleHooks';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useEventCallback } from '../../utils/useEventCallback.js';
+import { useId } from '../../utils/useId.js';
+import type { TransitionStatus } from '../../utils/useTransitionStatus.js';
+import { useCollapsibleRoot } from '../../Collapsible/Root/useCollapsibleRoot.js';
+import type { CollapsibleRoot } from '../../Collapsible/Root/CollapsibleRoot.js';
+import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { useCompositeListItem } from '../../Composite/List/useCompositeListItem.js';
+import type { AccordionRoot } from '../Root/AccordionRoot.js';
+import { useAccordionRootContext } from '../Root/AccordionRootContext.js';
+import { AccordionItemContext } from './AccordionItemContext.js';
+import { accordionStyleHookMapping } from './styleHooks.js';
 
 /**
  *

packages/mui-base/src/Accordion/Item/AccordionItemContext.ts

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import type { AccordionItem } from './AccordionItem';
+import type { AccordionItem } from './AccordionItem.js';
 
 export interface AccordionItemContext {
   open: boolean;

packages/mui-base/src/Accordion/Item/styleHooks.ts

@@ -1,6 +1,6 @@
-import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { collapsibleOpenStateMapping as baseMapping } from '../../utils/collapsibleOpenStateMapping';
-import type { AccordionItem } from './AccordionItem';
+import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps.js';
+import { collapsibleOpenStateMapping as baseMapping } from '../../utils/collapsibleOpenStateMapping.js';
+import type { AccordionItem } from './AccordionItem.js';
 
 export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.OwnerState> = {
   ...baseMapping,

packages/mui-base/src/Accordion/Panel/AccordionPanel.test.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Accordion } from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
-import { NOOP } from '../../utils/noop';
-import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { AccordionRootContext } from '../Root/AccordionRootContext';
-import { AccordionItemContext } from '../Item/AccordionItemContext';
+import { NOOP } from '../../utils/noop.js';
+import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { AccordionRootContext } from '../Root/AccordionRootContext.js';
+import { AccordionItemContext } from '../Item/AccordionItemContext.js';
 
 const accordionRootContextValue: AccordionRootContext = {
   accordionItemRefs: { current: [] },

packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx

@@ -1,14 +1,14 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { useCollapsiblePanel } from '../../Collapsible/Panel/useCollapsiblePanel';
-import { useAccordionRootContext } from '../Root/AccordionRootContext';
-import type { AccordionItem } from '../Item/AccordionItem';
-import { useAccordionItemContext } from '../Item/AccordionItemContext';
-import { accordionStyleHookMapping } from '../Item/styleHooks';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { useCollapsiblePanel } from '../../Collapsible/Panel/useCollapsiblePanel.js';
+import { useAccordionRootContext } from '../Root/AccordionRootContext.js';
+import type { AccordionItem } from '../Item/AccordionItem.js';
+import { useAccordionItemContext } from '../Item/AccordionItemContext.js';
+import { accordionStyleHookMapping } from '../Item/styleHooks.js';
 
 /**
  *

packages/mui-base/src/Accordion/Root/AccordionRoot.tsx

@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { CompositeList } from '../../Composite/List/CompositeList';
-import { useAccordionRoot } from './useAccordionRoot';
-import { AccordionRootContext } from './AccordionRootContext';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { CompositeList } from '../../Composite/List/CompositeList.js';
+import { useAccordionRoot } from './useAccordionRoot.js';
+import { AccordionRootContext } from './AccordionRootContext.js';
 
 const rootStyleHookMapping = {
   value: () => null,

packages/mui-base/src/Accordion/Root/AccordionRootContext.ts

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import type { AccordionRoot } from './AccordionRoot';
-import type { useAccordionRoot } from './useAccordionRoot';
+import type { AccordionRoot } from './AccordionRoot.js';
+import type { useAccordionRoot } from './useAccordionRoot.js';
 
 export interface AccordionRootContext extends Omit<useAccordionRoot.ReturnValue, 'getRootProps'> {
   ownerState: AccordionRoot.OwnerState;

packages/mui-base/src/Accordion/Root/useAccordionRoot.ts

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
-import { mergeReactProps } from '../../utils/mergeReactProps';
-import { NOOP } from '../../utils/noop';
-import { useControlled } from '../../utils/useControlled';
-import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT } from '../../Composite/composite';
+import { mergeReactProps } from '../../utils/mergeReactProps.js';
+import { NOOP } from '../../utils/noop.js';
+import { useControlled } from '../../utils/useControlled.js';
+import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT } from '../../Composite/composite.js';
 
 const SUPPORTED_KEYS = [ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, 'Home', 'End'];
 

packages/mui-base/src/Accordion/Trigger/AccordionTrigger.test.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Accordion } from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
-import { NOOP } from '../../utils/noop';
-import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { AccordionRootContext } from '../Root/AccordionRootContext';
-import { AccordionItemContext } from '../Item/AccordionItemContext';
+import { NOOP } from '../../utils/noop.js';
+import { CollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { AccordionRootContext } from '../Root/AccordionRootContext.js';
+import { AccordionItemContext } from '../Item/AccordionItemContext.js';
 
 const accordionRootContextValue: AccordionRootContext = {
   accordionItemRefs: { current: [] },

packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx

@@ -1,14 +1,14 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { triggerOpenStateMapping } from '../../utils/collapsibleOpenStateMapping';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
-import { BaseUIComponentProps } from '../../utils/types';
-import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
-import { useCollapsibleTrigger } from '../../Collapsible/Trigger/useCollapsibleTrigger';
-import type { AccordionItem } from '../Item/AccordionItem';
-import { useAccordionItemContext } from '../Item/AccordionItemContext';
+import { triggerOpenStateMapping } from '../../utils/collapsibleOpenStateMapping.js';
+import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
+import { BaseUIComponentProps } from '../../utils/types.js';
+import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext.js';
+import { useCollapsibleTrigger } from '../../Collapsible/Trigger/useCollapsibleTrigger.js';
+import type { AccordionItem } from '../Item/AccordionItem.js';
+import { useAccordionItemContext } from '../Item/AccordionItemContext.js';
 
 /**
  *