diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f8ecd3e2..8f1869a4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Fixed
+
+- Properly export ESM/CJS library depending on current environment and fix CJS build
+
## [1.0.10] - 2024-02-05
### Added
diff --git a/docs/installation.mdx b/docs/installation.mdx
index f9968967e..dd461d26d 100644
--- a/docs/installation.mdx
+++ b/docs/installation.mdx
@@ -52,7 +52,7 @@ library:
- Import the Aragon ODS stylesheet bundle in your project entry file (e.g. `src/index.js` or `App.js`):
```typescript
- import '@aragon/ods/bundle.css';
+ import '@aragon/ods/build.css';
```
# Usage
diff --git a/package.json b/package.json
index 379fc8cb1..572b64ae4 100644
--- a/package.json
+++ b/package.json
@@ -54,8 +54,7 @@
"classnames": "^2.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
- "react-imask": "^7.3.0",
- "react-merge-refs": "^2.0.0"
+ "react-imask": "^7.3.0"
},
"peerDependencies": {
"@tailwindcss/typography": "^0.5.0",
@@ -121,5 +120,20 @@
"engines": {
"node": ">=18",
"npm": "please-use-yarn"
+ },
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./dist/types/src/index.d.ts",
+ "default": "./dist/index.es.js"
+ },
+ "require": {
+ "types": "./dist/types/src/index.d.ts",
+ "default": "./dist/index.cjs.js"
+ }
+ },
+ "./index.css": "./index.css",
+ "./build.css": "./build.css",
+ "./tailwind.config": "./tailwind.config.js"
}
}
diff --git a/src/components/input/inputDate/inputDate.test.tsx b/src/components/input/inputDate/inputDate.test.tsx
index 542ac58b8..9b2ba3b23 100644
--- a/src/components/input/inputDate/inputDate.test.tsx
+++ b/src/components/input/inputDate/inputDate.test.tsx
@@ -1,12 +1,12 @@
import { fireEvent, render, screen, within } from '@testing-library/react';
import React from 'react';
-import * as MergeRefs from 'react-merge-refs';
+import * as Utils from '../../../utils';
import { IconType } from '../../icon';
import { InputDate, type IInputDateProps } from './inputDate';
describe(' component', () => {
const useRefMock = jest.spyOn(React, 'useRef');
- const mergeRefMock = jest.spyOn(MergeRefs, 'mergeRefs');
+ const mergeRefMock = jest.spyOn(Utils, 'mergeRefs');
afterEach(() => {
useRefMock.mockReset();
diff --git a/src/components/input/inputDate/inputDate.tsx b/src/components/input/inputDate/inputDate.tsx
index 144311e54..aa4ebdf3e 100644
--- a/src/components/input/inputDate/inputDate.tsx
+++ b/src/components/input/inputDate/inputDate.tsx
@@ -1,6 +1,6 @@
import classNames from 'classnames';
import { forwardRef, useRef } from 'react';
-import { mergeRefs } from 'react-merge-refs';
+import { mergeRefs } from '../../../utils';
import { Button } from '../../button';
import { IconType } from '../../icon';
import { useInputProps } from '../hooks';
diff --git a/src/components/input/inputTime/inputTime.test.tsx b/src/components/input/inputTime/inputTime.test.tsx
index 433f9b9db..a2fb8b285 100644
--- a/src/components/input/inputTime/inputTime.test.tsx
+++ b/src/components/input/inputTime/inputTime.test.tsx
@@ -1,12 +1,12 @@
import { fireEvent, render, screen, within } from '@testing-library/react';
import React from 'react';
-import * as MergeRefs from 'react-merge-refs';
+import * as Utils from '../../../utils';
import { IconType } from '../../icon';
import { InputTime, type IInputTimeProps } from './inputTime';
describe(' component', () => {
const useRefMock = jest.spyOn(React, 'useRef');
- const mergeRefMock = jest.spyOn(MergeRefs, 'mergeRefs');
+ const mergeRefMock = jest.spyOn(Utils, 'mergeRefs');
afterEach(() => {
useRefMock.mockReset();
diff --git a/src/components/input/inputTime/inputTime.tsx b/src/components/input/inputTime/inputTime.tsx
index a1cd306b2..b0901b117 100644
--- a/src/components/input/inputTime/inputTime.tsx
+++ b/src/components/input/inputTime/inputTime.tsx
@@ -1,6 +1,6 @@
import classNames from 'classnames';
import { forwardRef, useRef } from 'react';
-import { mergeRefs } from 'react-merge-refs';
+import { mergeRefs } from '../../../utils';
import { Button } from '../../button';
import { IconType } from '../../icon';
import { useInputProps } from '../hooks';
diff --git a/src/utils/index.ts b/src/utils/index.ts
index dfaacda31..07cc26fd2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,2 +1,3 @@
export * from './formatterUtils';
+export * from './mergeRefs';
export * from './responsiveUtils';
diff --git a/src/utils/mergeRefs/index.ts b/src/utils/mergeRefs/index.ts
new file mode 100644
index 000000000..0f337ba21
--- /dev/null
+++ b/src/utils/mergeRefs/index.ts
@@ -0,0 +1 @@
+export { mergeRefs } from './mergeRefs';
diff --git a/src/utils/mergeRefs/mergeRefs.test.ts b/src/utils/mergeRefs/mergeRefs.test.ts
new file mode 100644
index 000000000..e12841179
--- /dev/null
+++ b/src/utils/mergeRefs/mergeRefs.test.ts
@@ -0,0 +1,19 @@
+import { mergeRefs } from './mergeRefs';
+
+describe('mergeRefs util', () => {
+ it('correctly set value for function refs', () => {
+ const functionRef = jest.fn();
+ const value = 'test';
+ const refSetter = mergeRefs([functionRef]);
+ refSetter(value);
+ expect(functionRef).toHaveBeenCalledWith(value);
+ });
+
+ it('correctly set value for mutable ref object', () => {
+ const mutableRef = { current: null };
+ const value = 'new-value';
+ const refSetter = mergeRefs([mutableRef]);
+ refSetter(value);
+ expect(mutableRef.current).toEqual(value);
+ });
+});
diff --git a/src/utils/mergeRefs/mergeRefs.ts b/src/utils/mergeRefs/mergeRefs.ts
new file mode 100644
index 000000000..07bd0eed9
--- /dev/null
+++ b/src/utils/mergeRefs/mergeRefs.ts
@@ -0,0 +1,18 @@
+import type { LegacyRef, MutableRefObject, RefCallback } from 'react';
+
+/**
+ * Utility to merge multiple React refs, inspired by https://github.com/gregberge/react-merge-refs
+ */
+export const mergeRefs = (
+ refs: Array | LegacyRef | undefined | null>,
+): RefCallback => {
+ return (value) => {
+ refs.forEach((ref) => {
+ if (typeof ref === 'function') {
+ ref(value);
+ } else if (ref != null) {
+ (ref as MutableRefObject).current = value;
+ }
+ });
+ };
+};