Is your feature request related to a problem? Please describe.
Support for select multiple colors

Describe the solution you'd like
Support for select multiple colors

Describe the bug
Struggling to get correct transformation of ES to work on unit testings. Tried adding babel to deal with transformation but still not able to get it right for some reason.

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { jsx as c, jsxs as lt, Fragment as Mt } from "react/jsx-runtime";

    SyntaxError: Cannot use import statement outside a module

Tried:

• adding babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-transform-modules-commonjs'],
};

• update jest.config.js

transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },

Any help would be greatly appreciated!

Hey, I installed the package and i got this error:

here is the tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "module": "commonjs" /* Specify what module code is generated. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    "strict": false /* Enable all strict type-checking options. */,
    "noImplicitAny": false /* Enable error reporting for expressions and declarations with an implied `any` type.. */,
    "skipLibCheck": true,
    "jsx": "react"
  },
  "include": ["src"]
}

Describe the bug
Error when trying to unit test mui-color-input
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

To Reproduce
Steps to reproduce the behavior:

1. Create a react application
2. Install [email protected] (Happened to older version too)
3. Install @testing-library/[email protected]
4. Write a simple test to just render the component

Expected behavior
Unit test to be passed.

Screenshots

Desktop (please complete the following information):

• MacOS Ventura 13.4
• Chrome
• 114.0.5735.133

Describe the bug
Installed package following instructions on this page https://viclafouch.github.io/mui-color-input/docs/getting-started/

Added component to my project and got this error

/<project_root>/node_modules/mui-color-input/dist/mui-color-input.es.js 171:21
Module parse failed: Unexpected token (171:21)
File was processed with these loaders:
 * ../../node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     }
| 
>     return t.current?.(...r);
|   }, []);
| }

Desktop (please complete the following information):

• OS: MacOS 12.6
• Browser Chrome
• Version 106.0.5249.119 (Official Build) (arm64)

Additional context
Versions of MUI packages we use in a project

"@mui/x-date-pickers": "^5.0.3",
"@mui/material": "^5.10.5",
"@mui/styles": "^5.10.3",
"@mui/lab": "^5.0.0-alpha.99",
"@mui/icons-material": "^5.10.3",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",

Hi,
Is there a possibility to not set any value for the input?

Currently when I set initial value as empty string, and click later on the field it sets color to the fallbackValue. However I don't want that behavior because user don't always want to set a color.

Is there a way to set the value to null or undefined instead of always setting some color?

Describe the bug
I'm trying to implement the sample code into my project, however even the sample code gives me a weird error.

To Reproduce
Steps to reproduce the behavior:

1. New project
2. Install dependencies
3. Build project
4. Error pops up

Expected behavior
No error of course ;)

Desktop (please complete the following information):

• Windows 11
• Chrome
• Version 121.0.6167.140

Additional context

This are my current dependencies. It might be something with versions or something? But I have no idea which one could be the issue. If I remove the Color picker code my project builds fine :)

"dependencies": {
    "@date-io/date-fns": "^2.16.0",
    "@draft-js-plugins/alignment": "^5.0.3",
    "@draft-js-plugins/editor": "^4.1.3",
    "@draft-js-plugins/focus": "^4.1.3",
    "@draft-js-plugins/static-toolbar": "^4.1.3",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.14.7",
    "@mui/lab": "^5.0.0-alpha.108",
    "@mui/material": "^5.14.7",
    "@mui/styles": "^5.14.11",
    "@react-pdf/renderer": "^3.0.1",
    "@reduxjs/toolkit": "^1.9.0",
    "ajv": "^8.12.0",
    "axios": "^1.4.0",
    "date-fns": "^2.29.3",
    "dotenv": "^16.0.3",
    "draft-convert": "^2.1.13",
    "draft-js": "^0.11.7",
    "file-loader": "^6.2.0",
    "html-react-parser": "^4.2.2",
    "lodash-es": "^4.17.21",
    "moment": "^2.29.4",
    "mui-color-input": "^2.0.1",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-images": "^1.2.0-beta.7",
    "react-mui-dropzone": "^4.0.7",
    "react-photo-gallery": "^8.0.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-scroll": "^1.8.8",
    "react-spring": "^9.5.5",
    "react-use-gesture": "^9.0.4",
    "redux": "^4.2.0",
    "rxjs": "^7.5.7",
    "sass": "^1.56.1",
    "sweetalert2": "^11.6.9",
    "typewriter-effect": "2.19.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@types/node": "^20.7.1",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.2",
    "eslint": "^8.27.0",
    "eslint-plugin-react": "^7.31.10",
    "html-webpack-plugin": "^5.5.0",
    "prettier": "^2.7.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.1",
    "typescript": "^4.9.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1"
  }

Version 2.0.3 has issue on build:

/node_modules/mui-color-input/dist/mui-color-input.es.js:1
import { jsx as c, jsxs as ct, Fragment as At } from "react/jsx-runtime";
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1274:20)
at Module._compile (node:internal/modules/cjs/loader:1320:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at Module.require (node:internal/modules/cjs/loader:1225:19)
at mod.require (/Users/d.baltak/Projects/agnoplay-website/node_modules/next/dist/server/require-hook.js:65:28)
at require (node:internal/modules/helpers:177:18)

Version 2.0.2 and lower works fine

Doesn't work with react 17.0.2. UseRef null error

The documentation describes that the "format" probe should default in a hex value.
But setting a color via the picker resulted in the value being updated to a rgb value. After I manually set the format prop to hex, this was fixed

Hi!

Thank you for the amazing package, really appreciate it!:) However, I encountered an issue after installing it.

Describe the bug
Uncaught TypeError: createTheme_default is not a function at Box.js:6:22

Screenshots

Should fix it:
Following this stackoverflow post, if we replace the
import Box from '@mui/material/Box';
to
import { Box } from '@mui/material';
in
ColorPopoverBody.tsx

then it should fix it.

Desktop:

• OS: Ubuntu 22.04
• Browser: Chrome
• Version: Version 113.0.5672.92 (Official Build) (64-bit)

Additional context
Versions of MUI packages we use in a project:

 "@emotion/cache": "^11.11.0",
 "@emotion/react": "^11.11.0",
 "@emotion/styled": "^11.11.0",
 "@mui/icons-material": "^5.11.16",
 "@mui/lab": "^5.0.0-alpha.129",
 "@mui/material": "^5.13.1",
 "@mui/x-date-pickers": "^6.4.0",

Is your feature request related to a problem? Please describe.

No way to get the value after the selection is done.

Describe the solution you'd like
Please describe your desired solution clearly and concisely.

Add onPopupClosed to be called when the popup is closed.
or onChangeComplete

Describe alternatives you've considered

None

Additional context

Describe the bug
I have just done a basic setup, but can't seem to type into the control, like the demo, i.e. type 'green'?

To Reproduce
Steps to reproduce the behavior:
I have just entered the following into a form

<MuiColorInput
value={internalValue}
onChange={(color) => {
console.log("color: ", color);
// setInternalValue(e.target.value);
// setColor(e.target.value);
}}
format="hex"
isAlphaHidden={true} />

Expected behavior
To be able to free type and have the cursor in the TextField

Desktop (please complete the following information):

• OS: OSX
• Browser chrome
• Version 119.0.6045.105

Thank you for the awesome library ❤️!

Is your feature request related to a problem? Please describe.
onChange calls on every color value change, so my another components re-renders when value changes

Describe the solution you'd like
I would like there to be props like onPopoverClosed/onPopoverOpened and they would only change the value when the popover is closed, so instead of updating the value every time the color changes. This will help if you have multiple component states in one component. And I haven't found a better name yet. Or Can I listen to the popover's state?

Describe the bug
When using mui-color-input on a production built web application using NextJs 14.0.4, the color preview thumbnail is always the default checker and the color set is always #000000.

dev builds work (next dev), but production builds (next build && next start) do not.

To Reproduce
Steps to reproduce the behavior:
CodeSandbox repro

1. Open the sandbox above
2. Interact with the mui-color-input control on the page.
3. Note that choosing a color doesn't close the selector and clicking away sets the color to #000000

Expected behavior
Clicking the color selector should fire the onChange event with the new color selected.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome, Brave
• Version 1.61.114 (chromium 120)

Additional context

Describe the bug
When closing a popover on the website, the text field is automatically focused. This behavior is particularly problematic on mobile devices, creating a poor user experience.

To Reproduce
Steps to reproduce the behavior:

Go to the relevant page with the popover.
Click on the popover to open it.
Close the popover by clicking outside this popover.
Notice that the text field gets automatically focused, causing the mobile device's keyboard to pop up.
Expected behavior
The expected behavior is that after closing the popover, no automatic focus should be applied if we send this instruction.

Screenshots
If applicable, screenshots to demonstrate the issue would be helpful.

Desktop (please complete the following information):

OS: [e.g., Windows, macOS]
Browser [e.g., Chrome, Firefox]
Version [e.g., 95]
Smartphone (please complete the following information):

Device: [e.g., Samsung Galaxy S10]
OS: [e.g., Android 10]
Browser [e.g., Google Chrome, Firefox]
Version [e.g., 87]
Additional context
Further details on specific conditions under which this behavior is observed, or any related observations that might assist in diagnosing and fixing the bug.

The second slider is not working. The onchange function return the same color code when I try to change color. I will also provide my JSON file for my project.

{
"name": "booking-admin",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "tsc && vite build",
"build-only": "vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/base": "^5.0.0-beta.25",
"@mui/icons-material": "^5.14.19",
"@mui/lab": "^5.0.0-alpha.158",
"@mui/material": "^5.15.2",
"@mui/styled-engine-sc": "^6.0.0-alpha.7",
"@mui/x-date-pickers": "^6.18.5",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/react": "^18.2.41",
"@types/react-dnd": "^3.0.2",
"@types/react-dnd-html5-backend": "^3.0.2",
"@types/react-dom": "^18.2.17",
"dayjs": "^1.11.10",
"helmet": "^7.1.0",
"lodash": "^4.17.21",
"material-react-table": "^2.1.0",
"mui-color-input": "^2.0.1",
"mui-file-input": "^4.0.3",
"mui-tel-input": "^5.0.0",
"notistack": "^3.0.1",
"react": "^18.2.0",
"react-big-calendar": "^1.8.6",
"react-calendar-timeline": "^0.28.0",
"react-dnd": "^7.5.0",
"react-dnd-html5-backend": "^7.5.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-helmet-async": "^2.0.3",
"react-hook-form": "^7.49.2",
"react-quill": "^2.0.0",
"react-router-dom": "^6.20.1",
"react-spinners": "^0.13.8",
"recharts": "^2.12.1",
"register-service-worker": "^1.7.2",
"rrule": "^2.8.1",
"styled-components": "^6.1.3",
"suneditor": "^2.45.1",
"suneditor-react": "^3.6.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",
"workbox-background-sync": "^6.6.0",
"workbox-broadcast-update": "^6.6.0",
"workbox-cacheable-response": "^6.6.0",
"workbox-core": "^6.6.0",
"workbox-expiration": "^6.6.0",
"workbox-google-analytics": "^6.6.0",
"workbox-navigation-preload": "^6.6.0",
"workbox-precaching": "^6.6.0",
"workbox-range-requests": "^6.6.0",
"workbox-routing": "^6.6.0",
"workbox-strategies": "^6.6.0",
"workbox-streams": "^6.6.0"
},
"devDependencies": {
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.2",
"@typescript-eslint/parser": "^7.0.2",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"sass": "^1.71.1",
"typescript": "^5.2.2",
"vite": "^5.1.4",
"vite-plugin-pwa": "^0.19.1",
"workbox-window": "^7.0.0"
}
}

Describe the bug
Hi,

MuiColorInput does not work with JoyUI, it throws this error : Cannot read properties of undefined (different properties where displayed here like borderRadius or outlined). The above error occurred in the <MuiOutlinedInputRoot> component.

My guess is there is a conflict with the required JoyUI's component <CssVarsProvider>. When I remove it, everything is working fine without any styling.

I tried to rollback to 1.0.3 but it didn't change anything.

To Reproduce

import React from "react";
import { TextField, Button, Modal, ModalClose, ModalDialog } from "@mui/joy";
import { CssVarsProvider } from "@mui/joy/styles";
import { Stack } from "@mui/system";
import { MuiColorInput } from "mui-color-input";

const App = () => {
  const [value, setValue] = React.useState("");
  const [openModal, setOpen] = React.useState(false);

  const handleColorChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <CssVarsProvider>
      <div
        className="App"
        style={{
          backgroundColor: "grey",
          height: "100vh",
        }}
      >
        <Button
          onClick={() => {
            setOpen(true);
          }}
        >
          Test modal
        </Button>
        <Modal
          open={openModal}
          onClose={() => {
            setOpen(false);
          }}
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <ModalDialog
            sx={{
              maxWidth: 500,
              borderRadius: "md",
              p: 3,
              boxShadow: "lg",
            }}
          >
            <ModalClose
              variant="outlined"
              sx={{
                top: "calc(-1/4 * var(--IconButton-size))",
                right: "calc(-1/4 * var(--IconButton-size))",
                boxShadow: "0 2px 12px 0 rgba(0 0 0 / 0.2)",
                borderRadius: "50%",
                bgcolor: "background.body",
              }}
            />
            <form
              onSubmit={(event) => {
                event.preventDefault();
                setOpen(false);
              }}
            >
              <Stack spacing={2}>
                <TextField label="UID" autoFocus required />
                <TextField label="Display Name" required />
                <MuiColorInput value={value} onChange={handleColorChange} />
                <Button type="submit">Submit</Button>
              </Stack>
            </form>
          </ModalDialog>
        </Modal>
      </div>
    </CssVarsProvider>
  );
};

export default App;

package.json

"@ctrl/tinycolor": "^3.5.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/joy": "^5.0.0-alpha.60",
"@mui/material": "^5.11.2",
"mui-color-input": "^1.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",

Expected behavior
The input should be displayed.

Describe the bug
The bundled version of the package has an incorrect path to some types. Leading to an error when compiling typescript types for any library that depends on mui-color-input.

To Reproduce

1. Install the package to a project where tsc is used to compile types
2. Compile the types, notice the error
3. Also can navigate into node_modules to view the bad import directly in the index.types.d.ts

Expected behavior
Should resolve all types properly

Screenshots

Desktop (please complete the following information):

• OS: MacOS (but doesn't matter in this case)
• Browser: None
• Version: Sonoma 14.0

Additional context
Add any other context about the problem here.

Hi,
Is it possible to remove shadow behind color's button ?

Describe the bug
I am using color input in rtl website and the color space has reversed values on X axis