react-best-gradient-color-picker - npm Package Compare versions

Comparing version 3.0.10-beta.4 to 3.0.10-beta.5

dist/cjs/components/Controls.js

@@ -71,2 +71,3 @@ "use strict";
     return (react_1.default.createElement("div", { style: {
+            ...defaultStyles.rbgcpColorModelDropdown,
             visibility: openInputType ? 'visible' : 'hidden',
@@ -76,3 +77,2 @@ zIndex: openInputType ? '' : -100,
             transition: `${oTrans}, ${vTrans}, ${zTrans}`,
-            ...defaultStyles.rbgcpColorModelDropdown,
         } },
@@ -79,0 +79,0 @@ react_1.default.createElement("div", { onClick: (e) => handleInputType(e, 'rgb'), style: (0, styles_js_1.modalBtnStyles)(inputType === 'rgb', defaultStyles) }, "RGB"),

dist/cjs/components/EyeDropper.js

@@ -40,16 +40,18 @@ "use strict";
     const col = color || '';
-    const style1 = {
-        fill: 'none',
-        stroke: col,
-        strokeWidth: '1.4px',
-    };
-    const style2 = {
-        fill: col,
-        stroke: col,
-        strokeWidth: '1.4px',
-    };
     return (react_1.default.createElement("svg", { id: "Layer_1", "data-name": "Layer 1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", style: { width: 16 } },
-        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", style: { ...defaultStyles.rbgcpControlIcon, ...style1 }, d: "M15.6,7h0L7.78,14.86c-.37.37-1.61.38-2,.75s-.5,1.53-.76,2a3.53,3.53,0,0,1-.52.52,1.6,1.6,0,0,1-2.27-.06l-.32-.32a1.61,1.61,0,0,1-.06-2.27A3.25,3.25,0,0,1,2.4,15c.47-.26,1.65-.35,2-.73s.34-1.64.71-2c1.68-1.73,5.61-5.65,7.91-7.93h0l1.14,1.38L15.6,7Z" }),
-        react_1.default.createElement("polygon", { strokeLinecap: "round", strokeLinejoin: "round", style: { ...defaultStyles.rbgcpControlIcon2, ...style2 }, points: "15.7 8.87 11.13 4.29 12.69 2.73 17.25 7.31 15.7 8.87" }),
-        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", style: { ...defaultStyles.rbgcpControlIcon2, ...style2 }, d: "M18.18,3.71,16.36,5.53a1.33,1.33,0,0,1-1.88,0h0a1.34,1.34,0,0,1,0-1.89l1.81-1.82a1.34,1.34,0,0,1,1.89,0h0A1.34,1.34,0,0,1,18.18,3.71Z" })));
+        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", style: {
+                strokeWidth: '1.4px',
+                ...defaultStyles.rbgcpControlIcon,
+                ...(col && { stroke: col }),
+            }, d: "M15.6,7h0L7.78,14.86c-.37.37-1.61.38-2,.75s-.5,1.53-.76,2a3.53,3.53,0,0,1-.52.52,1.6,1.6,0,0,1-2.27-.06l-.32-.32a1.61,1.61,0,0,1-.06-2.27A3.25,3.25,0,0,1,2.4,15c.47-.26,1.65-.35,2-.73s.34-1.64.71-2c1.68-1.73,5.61-5.65,7.91-7.93h0l1.14,1.38L15.6,7Z" }),
+        react_1.default.createElement("polygon", { strokeLinecap: "round", strokeLinejoin: "round", style: {
+                strokeWidth: '1.4px',
+                ...defaultStyles.rbgcpControlIcon2,
+                ...(col && { stroke: col, fill: col }),
+            }, points: "15.7 8.87 11.13 4.29 12.69 2.73 17.25 7.31 15.7 8.87" }),
+        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", style: {
+                strokeWidth: '1.4px',
+                ...defaultStyles.rbgcpControlIcon2,
+                ...(col && { stroke: col, fill: col }),
+            }, d: "M18.18,3.71,16.36,5.53a1.33,1.33,0,0,1-1.88,0h0a1.34,1.34,0,0,1,0-1.89l1.81-1.82a1.34,1.34,0,0,1,1.89,0h0A1.34,1.34,0,0,1,18.18,3.71Z" })));
 };
@@ -109,9 +111,9 @@ const Dropper = ({ onSelect }) => {
         react_1.default.createElement("div", { onClick: getEyeDrop, id: "rbgcp-eyedropper-btn", style: {
+                ...defaultStyles.rbgcpEyedropperBtn,
                 ...(0, styles_js_1.controlBtnStyles)(coverUp, defaultStyles),
-                ...defaultStyles.rbgcpEyedropperBtn,
             } },
             react_1.default.createElement(DropperIcon, { color: coverUp ? 'rgb(86, 140, 245)' : '' })),
         coverUp && (react_1.default.createElement(Portal_js_1.default, null,
-            react_1.default.createElement("div", { onClick: (e) => getColorLegacy(e), style: { ...defaultStyles.rbgcpEyedropperCover } })))));
+            react_1.default.createElement("div", { onClick: (e) => getColorLegacy(e), style: defaultStyles.rbgcpEyedropperCover })))));
 };
 exports.default = Dropper;

dist/cjs/components/index.d.ts

 import React from 'react';
 import { ColorPickerProps } from '../shared/types.js';
-export declare function ColorPicker({ value, onChange, hideControls, hideInputs, hideOpacity, hidePresets, hideHue, presets, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientType, hideGradientAngle, hideGradientStop, hideGradientControls, locales, width, height, style, className, }: ColorPickerProps): React.JSX.Element;
+export declare function ColorPicker({ value, onChange, hideControls, hideInputs, hideOpacity, hidePresets, hideHue, presets, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientType, hideGradientAngle, hideGradientStop, hideGradientControls, locales, width, height, style, className, disableDarkMode, }: ColorPickerProps): React.JSX.Element;

dist/cjs/components/index.js

@@ -37,6 +37,6 @@ "use strict";
 const styles_js_1 = require("../styles/styles.js");
-function ColorPicker({ value = 'rgba(175, 51, 242, 1)', onChange, hideControls = false, hideInputs = false, hideOpacity = false, hidePresets = false, hideHue = false, presets = [], hideEyeDrop = false, hideAdvancedSliders = false, hideColorGuide = false, hideInputType = false, hideColorTypeBtns = false, hideGradientType = false, hideGradientAngle = false, hideGradientStop = false, hideGradientControls = false, locales = constants_js_1.defaultLocales, width = 294, height = 294, style = {}, className, }) {
+function ColorPicker({ value = 'rgba(175, 51, 242, 1)', onChange, hideControls = false, hideInputs = false, hideOpacity = false, hidePresets = false, hideHue = false, presets = [], hideEyeDrop = false, hideAdvancedSliders = false, hideColorGuide = false, hideInputType = false, hideColorTypeBtns = false, hideGradientType = false, hideGradientAngle = false, hideGradientStop = false, hideGradientControls = false, locales = constants_js_1.defaultLocales, width = 294, height = 294, style = {}, className, disableDarkMode = false, }) {
     const safeValue = (0, utils_js_1.objectToString)(value);
     const contRef = (0, react_1.useRef)(null);
-    const defaultStyles = (0, styles_js_1.getStyles)(false);
+    const defaultStyles = (0, styles_js_1.getStyles)(disableDarkMode);
     return (react_1.default.createElement("div", { ref: contRef, className: className, style: { ...style, width: width } },
@@ -43,0 +43,0 @@ react_1.default.createElement(context_js_1.default, { value: safeValue, classes: core_module_css_1.default, onChange: onChange, squareWidth: width, squareHeight: height, hideOpacity: hideOpacity, defaultStyles: defaultStyles },

dist/cjs/components/Square.js

@@ -105,3 +105,3 @@ "use strict";
                     transform: `translate(${dragPos?.x || 0}px, ${dragPos?.y || 0}px)`,
-                }, onMouseDown: handleMouseDown, role: "button", tabIndex: 0 }),
+                }, onMouseDown: handleMouseDown }),
             react_1.default.createElement("div", { style: { ...defaultStyles.rbgcpCanvasWrapper, height: squareHeight }, onClick: (e) => handleClick(e) },
@@ -108,0 +108,0 @@ react_1.default.createElement("canvas", { ref: canvas, id: "paintSquare", width: `${squareWidth}px`, height: `${squareHeight}px` })))));

dist/esm/components/Controls.js

@@ -43,2 +43,3 @@ /* eslint-disable react/jsx-no-leaked-render */
     return (React.createElement("div", { style: {
+            ...defaultStyles.rbgcpColorModelDropdown,
             visibility: openInputType ? 'visible' : 'hidden',
@@ -48,3 +49,2 @@ zIndex: openInputType ? '' : -100,
             transition: `${oTrans}, ${vTrans}, ${zTrans}`,
-            ...defaultStyles.rbgcpColorModelDropdown,
         } },
@@ -51,0 +51,0 @@ React.createElement("div", { onClick: (e) => handleInputType(e, 'rgb'), style: modalBtnStyles(inputType === 'rgb', defaultStyles) }, "RGB"),

dist/esm/components/EyeDropper.js

@@ -12,16 +12,18 @@ /* eslint-disable react/jsx-no-leaked-render */
     const col = color || '';
-    const style1 = {
-        fill: 'none',
-        stroke: col,
-        strokeWidth: '1.4px',
-    };
-    const style2 = {
-        fill: col,
-        stroke: col,
-        strokeWidth: '1.4px',
-    };
     return (React.createElement("svg", { id: "Layer_1", "data-name": "Layer 1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", style: { width: 16 } },
-        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", style: { ...defaultStyles.rbgcpControlIcon, ...style1 }, d: "M15.6,7h0L7.78,14.86c-.37.37-1.61.38-2,.75s-.5,1.53-.76,2a3.53,3.53,0,0,1-.52.52,1.6,1.6,0,0,1-2.27-.06l-.32-.32a1.61,1.61,0,0,1-.06-2.27A3.25,3.25,0,0,1,2.4,15c.47-.26,1.65-.35,2-.73s.34-1.64.71-2c1.68-1.73,5.61-5.65,7.91-7.93h0l1.14,1.38L15.6,7Z" }),
-        React.createElement("polygon", { strokeLinecap: "round", strokeLinejoin: "round", style: { ...defaultStyles.rbgcpControlIcon2, ...style2 }, points: "15.7 8.87 11.13 4.29 12.69 2.73 17.25 7.31 15.7 8.87" }),
-        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", style: { ...defaultStyles.rbgcpControlIcon2, ...style2 }, d: "M18.18,3.71,16.36,5.53a1.33,1.33,0,0,1-1.88,0h0a1.34,1.34,0,0,1,0-1.89l1.81-1.82a1.34,1.34,0,0,1,1.89,0h0A1.34,1.34,0,0,1,18.18,3.71Z" })));
+        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", style: {
+                strokeWidth: '1.4px',
+                ...defaultStyles.rbgcpControlIcon,
+                ...(col && { stroke: col }),
+            }, d: "M15.6,7h0L7.78,14.86c-.37.37-1.61.38-2,.75s-.5,1.53-.76,2a3.53,3.53,0,0,1-.52.52,1.6,1.6,0,0,1-2.27-.06l-.32-.32a1.61,1.61,0,0,1-.06-2.27A3.25,3.25,0,0,1,2.4,15c.47-.26,1.65-.35,2-.73s.34-1.64.71-2c1.68-1.73,5.61-5.65,7.91-7.93h0l1.14,1.38L15.6,7Z" }),
+        React.createElement("polygon", { strokeLinecap: "round", strokeLinejoin: "round", style: {
+                strokeWidth: '1.4px',
+                ...defaultStyles.rbgcpControlIcon2,
+                ...(col && { stroke: col, fill: col }),
+            }, points: "15.7 8.87 11.13 4.29 12.69 2.73 17.25 7.31 15.7 8.87" }),
+        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", style: {
+                strokeWidth: '1.4px',
+                ...defaultStyles.rbgcpControlIcon2,
+                ...(col && { stroke: col, fill: col }),
+            }, d: "M18.18,3.71,16.36,5.53a1.33,1.33,0,0,1-1.88,0h0a1.34,1.34,0,0,1,0-1.89l1.81-1.82a1.34,1.34,0,0,1,1.89,0h0A1.34,1.34,0,0,1,18.18,3.71Z" })));
 };
@@ -81,9 +83,9 @@ const Dropper = ({ onSelect }) => {
         React.createElement("div", { onClick: getEyeDrop, id: "rbgcp-eyedropper-btn", style: {
+                ...defaultStyles.rbgcpEyedropperBtn,
                 ...controlBtnStyles(coverUp, defaultStyles),
-                ...defaultStyles.rbgcpEyedropperBtn,
             } },
             React.createElement(DropperIcon, { color: coverUp ? 'rgb(86, 140, 245)' : '' })),
         coverUp && (React.createElement(Portal, null,
-            React.createElement("div", { onClick: (e) => getColorLegacy(e), style: { ...defaultStyles.rbgcpEyedropperCover } })))));
+            React.createElement("div", { onClick: (e) => getColorLegacy(e), style: defaultStyles.rbgcpEyedropperCover })))));
 };
 export default Dropper;

dist/esm/components/index.d.ts

 import React from 'react';
 import { ColorPickerProps } from '../shared/types.js';
-export declare function ColorPicker({ value, onChange, hideControls, hideInputs, hideOpacity, hidePresets, hideHue, presets, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientType, hideGradientAngle, hideGradientStop, hideGradientControls, locales, width, height, style, className, }: ColorPickerProps): React.JSX.Element;
+export declare function ColorPicker({ value, onChange, hideControls, hideInputs, hideOpacity, hidePresets, hideHue, presets, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientType, hideGradientAngle, hideGradientStop, hideGradientControls, locales, width, height, style, className, disableDarkMode, }: ColorPickerProps): React.JSX.Element;

dist/esm/components/index.js

@@ -8,6 +8,6 @@ import React, { useRef } from 'react';
 import { getStyles } from '../styles/styles.js';
-export function ColorPicker({ value = 'rgba(175, 51, 242, 1)', onChange, hideControls = false, hideInputs = false, hideOpacity = false, hidePresets = false, hideHue = false, presets = [], hideEyeDrop = false, hideAdvancedSliders = false, hideColorGuide = false, hideInputType = false, hideColorTypeBtns = false, hideGradientType = false, hideGradientAngle = false, hideGradientStop = false, hideGradientControls = false, locales = defaultLocales, width = 294, height = 294, style = {}, className, }) {
+export function ColorPicker({ value = 'rgba(175, 51, 242, 1)', onChange, hideControls = false, hideInputs = false, hideOpacity = false, hidePresets = false, hideHue = false, presets = [], hideEyeDrop = false, hideAdvancedSliders = false, hideColorGuide = false, hideInputType = false, hideColorTypeBtns = false, hideGradientType = false, hideGradientAngle = false, hideGradientStop = false, hideGradientControls = false, locales = defaultLocales, width = 294, height = 294, style = {}, className, disableDarkMode = false, }) {
     const safeValue = objectToString(value);
     const contRef = useRef(null);
-    const defaultStyles = getStyles(false);
+    const defaultStyles = getStyles(disableDarkMode);
     return (React.createElement("div", { ref: contRef, className: className, style: { ...style, width: width } },
@@ -14,0 +14,0 @@ React.createElement(PickerContextWrapper, { value: safeValue, classes: coreCss, onChange: onChange, squareWidth: width, squareHeight: height, hideOpacity: hideOpacity, defaultStyles: defaultStyles },

dist/esm/components/Square.js

@@ -77,3 +77,3 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */
                     transform: `translate(${dragPos?.x || 0}px, ${dragPos?.y || 0}px)`,
-                }, onMouseDown: handleMouseDown, role: "button", tabIndex: 0 }),
+                }, onMouseDown: handleMouseDown }),
             React.createElement("div", { style: { ...defaultStyles.rbgcpCanvasWrapper, height: squareHeight }, onClick: (e) => handleClick(e) },
@@ -80,0 +80,0 @@ React.createElement("canvas", { ref: canvas, id: "paintSquare", width: `${squareWidth}px`, height: `${squareHeight}px` })))));

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.10-beta.4",
+  "version": "3.0.10-beta.5",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

406413

increased by0.08%

No dependency changes