mikbry / mui-color Goto Github PK

Describe the bug
Gives error of @material-ui/core error with new material-ui library

To Reproduce
Steps to reproduce the behavior:

1. Just use the newest version of Material UI
2. It will produce an error and can be fixed by changing the material-ui/core/TextField imports to @mui/material/TextField
3. You need to change the import in ColorPicker.js

Expected behavior
Error during debugging

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 106.0.5249.103

Hello, thank you for this project and the migration to mui v5.

I use TypeScript and I have the following errors:

File '/home/.../node_modules/mui-color/index.d.ts' is not a module.

In file mui-color/src/types/index.d.ts

Solution :
// change this
declare module 'material-ui-color'
// to this
declare module 'mui-color'

thank you

Is your feature request related to a problem? Please describe.
Support for React 18

Describe the solution you'd like
Support for React 18

Versions

• mui-color: 2.0.0-beta.2
• @mui/material: 5.6.0
• react: 18.0.0
• @emotion/react: 11.9.0
• @emotion/styled: 11.8.1
• Edge Browser: 100.0.1185.29

Screenshots

But when I click anywhere on the UI it looks normal:

Codes

import React, { useState } from 'react'
import { colors } from '@mui/material'

export const colorMap: Record<string, string> = { }
for (const name in colors) if (name !== 'grey' && name !== 'blueGrey' && name !== 'common') colorMap[name] = colors[name][400]

const Comp = () => {
      const [color, setColor] = useState('#ffffff')
      return <ColorPicker
        deferred
        disableAlpha
        hideTextfield
        value={color}
        palette={colorMap}
        onChange={(color: any) => setColor('#' + color.hex)}
      />
}

I tried to delete all the above attributes, but I still couldn't solve it.

Other information

I noticed that nearly 30 style nodes are created each time picker is opened and closed, and will not be deleted.

Version

typescript: 4.1.2
mui-color: 2.0.0-beta.2
@mui/material: 5.0.4
react: 17.0.2
@emotion/react: 11.5.0
@emotion/styled: 11.3.0

Issue

When trying to access to the hex value of a ColorValue inside of ColorPicker onChange event handler, typescript throw Property 'hex' does not exist on type 'ColorValue'.
Same issue for all the properties of ColorValue object.

Screenshot

Workaround

<ColorPicker
    onChange={(e) => {
        const color = e as ColorObject;
        console.log(color.hex);
    }}
/>

Should the onChange handler argument type be ColorObject instead of ColorValue ?

Hi!

It would be great to have a flag closeOnSelect or similar in ColorPicker so that when the flag is set - the picker popup would close upon selecting a color. Current behavior is annoying - user has to select a color and then click elsewhere to close the pop up.

Thanks!

Please add support for material-ui-popup-state@^2.0.0

For MUI v4 you'll need material-ui-popup-state@^1.9.3. Use ^2.0.0 and up for MUI v5.

Source

mui-color supports now 1.5.3-1.9.3 versions

Hitting a 404 on the documentations page.

404 on https://mikbry.github.io/mui-color

Hi!
Thats how I use component now
<ColorPicker key={el.id} id={el.id} tooltip: "check" value={accordionColor} hideTextfield onChange={(event) => setAccordionColor(event)} />

But the problem is that tooltip is not showing up

How to use it?

Thank you

It fails with error:
Module not found: Can't resolve '@mui/styles'
Which is basically deprecated to use with mui5