[@mantine/core] Add explicit extension to exports to support NodeNext…

… TypeScript resolution (#5697)

* fix: Make explicit imports of `index.js` in main library files.

This allows the package imports to work correctly when
"moduleResolution": "nodenext" is set.

* fix: Update Storybook Webpack config to be aware of .ts->.js extensions.

.storybook/main.js

@@ -45,6 +45,10 @@ module.exports = {
   webpackFinal: async (config) => {
     config.resolve = {
       ...config.resolve,
+      // handle modules with .js extensions
+      extensionAlias: {
+        ".js": [".ts", ".tsx", ".js"],
+      },
       plugins: [
         ...(config.resolve.plugins || []),
         new TsconfigPathsPlugin({

jest.config.cjs

@@ -10,5 +10,6 @@ module.exports = {
     '@mantine/(.*)': '<rootDir>/packages/@mantine/$1/src',
     '@mantine-tests/(.*)': '<rootDir>/packages/@mantine-tests/$1/src',
     '\\.(css)$': 'identity-obj-proxy',
+    "(\\.+/.+)\\.js$": "$1",  // handle relative imports with .js extensions
   },
 };

packages/@mantine/charts/src/index.ts

@@ -1,9 +1,9 @@
-export * from './ChartTooltip';
-export * from './ChartLegend';
-export * from './AreaChart';
-export * from './BarChart';
-export * from './LineChart';
-export * from './Sparkline';
-export * from './DonutChart';
-export * from './PieChart';
+export * from './ChartTooltip/index.js';
+export * from './ChartLegend/index.js';
+export * from './AreaChart/index.js';
+export * from './BarChart/index.js';
+export * from './LineChart/index.js';
+export * from './Sparkline/index.js';
+export * from './DonutChart/index.js';
+export * from './PieChart/index.js';
 export * from './types';

packages/@mantine/core/src/index.ts

@@ -1,4 +1,4 @@
 export { RemoveScroll } from 'react-remove-scroll';
 
-export * from './core';
-export * from './components';
+export * from './core/index.js';
+export * from './components/index.js';

packages/@mantine/dates/src/index.ts

@@ -1,30 +1,30 @@
-export * from './types';
-export * from './utils';
+export * from './types/index.js';
+export * from './utils/index.js';
 
-export * from './components/DatesProvider';
-export * from './components/HiddenDatesInput';
-export * from './components/TimeInput';
-export * from './components/Day';
-export * from './components/WeekdaysRow';
-export * from './components/Month';
-export * from './components/PickerControl';
-export * from './components/YearsList';
-export * from './components/MonthsList';
-export * from './components/CalendarHeader';
-export * from './components/DecadeLevel';
-export * from './components/YearLevel';
-export * from './components/MonthLevel';
-export * from './components/LevelsGroup';
-export * from './components/DecadeLevelGroup';
-export * from './components/YearLevelGroup';
-export * from './components/MonthLevelGroup';
-export * from './components/PickerInputBase';
-export * from './components/Calendar';
-export * from './components/YearPicker';
-export * from './components/MonthPicker';
-export * from './components/DatePicker';
-export * from './components/DateInput';
-export * from './components/DateTimePicker';
-export * from './components/YearPickerInput';
-export * from './components/MonthPickerInput';
-export * from './components/DatePickerInput';
+export * from './components/DatesProvider/index.js';
+export * from './components/HiddenDatesInput/index.js';
+export * from './components/TimeInput/index.js';
+export * from './components/Day/index.js';
+export * from './components/WeekdaysRow/index.js';
+export * from './components/Month/index.js';
+export * from './components/PickerControl/index.js';
+export * from './components/YearsList/index.js';
+export * from './components/MonthsList/index.js';
+export * from './components/CalendarHeader/index.js';
+export * from './components/DecadeLevel/index.js';
+export * from './components/YearLevel/index.js';
+export * from './components/MonthLevel/index.js';
+export * from './components/LevelsGroup/index.js';
+export * from './components/DecadeLevelGroup/index.js';
+export * from './components/YearLevelGroup/index.js';
+export * from './components/MonthLevelGroup/index.js';
+export * from './components/PickerInputBase/index.js';
+export * from './components/Calendar/index.js';
+export * from './components/YearPicker/index.js';
+export * from './components/MonthPicker/index.js';
+export * from './components/DatePicker/index.js';
+export * from './components/DateInput/index.js';
+export * from './components/DateTimePicker/index.js';
+export * from './components/YearPickerInput/index.js';
+export * from './components/MonthPickerInput/index.js';
+export * from './components/DatePickerInput/index.js';

packages/@mantine/form/src/index.ts

@@ -1,9 +1,9 @@
 export { useForm } from './use-form';
 export { createFormContext } from './FormProvider/FormProvider';
-export { createFormActions } from './actions';
+export { createFormActions } from './actions/index.js';
 export { Form } from './Form/Form';
 export { FORM_INDEX } from './form-index';
-export * from './validators';
+export * from './validators/index.js';
 
 export { zodResolver } from './resolvers/zod-resolver/zod-resolver';
 export { superstructResolver } from './resolvers/superstruct-resolver/superstruct-resolver';

packages/@mantine/hooks/src/index.ts

@@ -1,4 +1,4 @@
-export * from './utils';
+export * from './utils/index.js';
 
 export { useCallbackRef } from './use-callback-ref/use-callback-ref';
 export { useDebounceCallback } from './use-debounced-callback/use-debounced-callback';

packages/@mantine/tiptap/src/index.ts

@@ -1,9 +1,9 @@
-export * from './extensions';
+export * from './extensions/index.js';
 export { RichTextEditor } from './RichTextEditor';
 export { useRichTextEditorContext } from './RichTextEditor.context';
 export { DEFAULT_LABELS } from './labels';
 
-export * from './RichTextEditorControl';
+export * from './RichTextEditorControl/index.js';
 export { RichTextEditorControlsGroup } from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';
 export { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl';
 export { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent';