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

Comparing version 3.0.13-beta.8 to 3.0.13-beta.9

dist/cjs/components/Inputs.js

@@ -48,3 +48,3 @@ "use strict";
     var _c = (0, react_1.useState)(value), temp = _c[0], setTemp = _c[1];
-    var width = hideOpacity ? '22%' : '16.5%';
+    var width = hideOpacity ? '25%' : '20%';
     (0, react_1.useEffect)(function () {
@@ -58,3 +58,3 @@ setTemp(value);
     };
-    return (react_1.default.createElement("div", { style: { width: width }, id: "rbgcp-".concat(label, "-input-wrapper").concat(pickerIdSuffix) },
+    return (react_1.default.createElement("div", { style: { width: width, flexShrink: 1 }, id: "rbgcp-".concat(label, "-input-wrapper").concat(pickerIdSuffix) },
         react_1.default.createElement("input", { value: temp, onChange: function (e) { return onChange(e); }, style: __assign({}, defaultStyles.rbgcpInput), id: "rbgcp-".concat(label, "-input").concat(pickerIdSuffix) }),
@@ -90,3 +90,3 @@ react_1.default.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, label)));
     var label = showHexAlpha ? 'HEXA' : 'HEX';
-    return (react_1.default.createElement("div", { style: { width: '26%' }, id: "rbgcp-hex-input-wrapper".concat(pickerIdSuffix) },
+    return (react_1.default.createElement("div", { style: { width: 84, flexShrink: 0 }, id: "rbgcp-hex-input-wrapper".concat(pickerIdSuffix) },
         react_1.default.createElement("input", { onBlur: hexBlur, onFocus: hexFocus, onChange: function (e) { return handleHex(e); }, value: displayValue === null || displayValue === void 0 ? void 0 : displayValue.toUpperCase(), id: "rbgcp-hex-input".concat(pickerIdSuffix), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
@@ -154,3 +154,3 @@ react_1.default.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, label)));
     var _a = (0, context_js_1.usePicker)(), hc = _a.hc, setHc = _a.setHc, inputType = _a.inputType, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, showHexAlpha = _a.showHexAlpha, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
-    return (react_1.default.createElement("div", { style: __assign({ paddingTop: 14, display: 'flex', justifyContent: 'space-between' }, defaultStyles.rbgcpInputsWrap), id: "rbgcp-inputs-wrap".concat(pickerIdSuffix) },
+    return (react_1.default.createElement("div", { style: __assign({ columnGap: 8, paddingTop: 14, display: 'flex', justifyContent: 'space-between' }, defaultStyles.rbgcpInputsWrap), id: "rbgcp-inputs-wrap".concat(pickerIdSuffix) },
         inputType !== 'cmyk' && (react_1.default.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a, tinyColor: tinyColor, showHexAlpha: showHexAlpha, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
@@ -157,0 +157,0 @@ inputType === 'hsl' && (react_1.default.createElement(HSLInputs, { hc: hc, setHc: setHc, tinyColor: tinyColor, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),

dist/esm/components/Inputs.js

@@ -20,3 +20,3 @@ var __assign = (this && this.__assign) || function () {
     var _c = useState(value), temp = _c[0], setTemp = _c[1];
-    var width = hideOpacity ? '22%' : '16.5%';
+    var width = hideOpacity ? '25%' : '20%';
     useEffect(function () {
@@ -30,3 +30,3 @@ setTemp(value);
     };
-    return (React.createElement("div", { style: { width: width }, id: "rbgcp-".concat(label, "-input-wrapper").concat(pickerIdSuffix) },
+    return (React.createElement("div", { style: { width: width, flexShrink: 1 }, id: "rbgcp-".concat(label, "-input-wrapper").concat(pickerIdSuffix) },
         React.createElement("input", { value: temp, onChange: function (e) { return onChange(e); }, style: __assign({}, defaultStyles.rbgcpInput), id: "rbgcp-".concat(label, "-input").concat(pickerIdSuffix) }),
@@ -62,3 +62,3 @@ React.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, label)));
     var label = showHexAlpha ? 'HEXA' : 'HEX';
-    return (React.createElement("div", { style: { width: '26%' }, id: "rbgcp-hex-input-wrapper".concat(pickerIdSuffix) },
+    return (React.createElement("div", { style: { width: 84, flexShrink: 0 }, id: "rbgcp-hex-input-wrapper".concat(pickerIdSuffix) },
         React.createElement("input", { onBlur: hexBlur, onFocus: hexFocus, onChange: function (e) { return handleHex(e); }, value: displayValue === null || displayValue === void 0 ? void 0 : displayValue.toUpperCase(), id: "rbgcp-hex-input".concat(pickerIdSuffix), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
@@ -126,3 +126,3 @@ React.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, label)));
     var _a = usePicker(), hc = _a.hc, setHc = _a.setHc, inputType = _a.inputType, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, showHexAlpha = _a.showHexAlpha, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
-    return (React.createElement("div", { style: __assign({ paddingTop: 14, display: 'flex', justifyContent: 'space-between' }, defaultStyles.rbgcpInputsWrap), id: "rbgcp-inputs-wrap".concat(pickerIdSuffix) },
+    return (React.createElement("div", { style: __assign({ columnGap: 8, paddingTop: 14, display: 'flex', justifyContent: 'space-between' }, defaultStyles.rbgcpInputsWrap), id: "rbgcp-inputs-wrap".concat(pickerIdSuffix) },
         inputType !== 'cmyk' && (React.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a, tinyColor: tinyColor, showHexAlpha: showHexAlpha, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
@@ -129,0 +129,0 @@ inputType === 'hsl' && (React.createElement(HSLInputs, { hc: hc, setHc: setHc, tinyColor: tinyColor, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.13-beta.8",
+  "version": "3.0.13-beta.9",
   "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

477062

increased by0.03%

Lines of code

11307

increased by0.01%

No dependency changes