@uiw/react-color-editable-input - npm Package Compare versions

Comparing version 2.9.5 to 2.9.6

cjs/index.js

@@ -41,2 +41,4 @@ "use strict";
   var isFocus = (0, _react.useRef)(false);
+  var inputIdRef = (0, _react.useRef)(other.id || "".concat(prefixCls, "-").concat(Math.random().toString(36).slice(2, 11)));
+  var inputId = other.id || inputIdRef.current;
   (0, _react.useEffect)(function () {
@@ -106,2 +108,3 @@ if (props.value !== value) {
   }, other), {}, {
+    id: inputId,
     style: editableStyle,
@@ -118,3 +121,4 @@ onFocusCapture: function onFocusCapture(e) {
       ref: ref
-    }, inputProps)), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }, inputProps)), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      htmlFor: inputId,
       style: (0, _objectSpread2["default"])({
@@ -121,0 +125,0 @@ color: 'var(--editable-input-label-color)',

esm/index.js

@@ -26,2 +26,4 @@ import _extends from "@babel/runtime/helpers/extends";
   var isFocus = useRef(false);
+  var inputIdRef = useRef(other.id || prefixCls + "-" + Math.random().toString(36).slice(2, 11));
+  var inputId = other.id || inputIdRef.current;
   useEffect(() => {
@@ -89,2 +91,3 @@ if (props.value !== value) {
   }, other, {
+    id: inputId,
     style: editableStyle,
@@ -101,3 +104,4 @@ onFocusCapture: e => {
       ref: ref
-    }, inputProps)), label && /*#__PURE__*/_jsx("span", {
+    }, inputProps)), label && /*#__PURE__*/_jsx("label", {
+      htmlFor: inputId,
       style: _extends({
@@ -104,0 +108,0 @@ color: 'var(--editable-input-label-color)',

package.json

 {
   "name": "@uiw/react-color-editable-input",
-  "version": "2.9.5",
+  "version": "2.9.6",
   "description": "Color Editable Input",
@@ -5,0 +5,0 @@ "author": "Kenny Wong <[e-mail]>",

README.md

 <div markdown="1">
   <sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup>
   <br>
+  <a target="_blank" href="https://apps.apple.com/app/6758053530" title="Scap: Screenshot & Markup Edit for macOS"><img alt="Scap: Screenshot & Markup Edit" height="52" width="52" src="https://wangchujiang.com/appicon/scap.png"></a>
   <a target="_blank" href="https://apps.apple.com/app/6757317079" title="Screen Test for macOS"><img alt="Screen Test" height="52" width="52" src="https://wangchujiang.com/appicon/screen-test.png"></a>
@@ -5,0 +6,0 @@ <a target="_blank" href="https://apps.apple.com/app/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" width="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>

src/index.tsx

@@ -36,2 +36,4 @@ import React from 'react';
   const isFocus = useRef(false);
+  const inputIdRef = useRef(other.id || `${prefixCls}-${Math.random().toString(36).slice(2, 11)}`);
+  const inputId = other.id || inputIdRef.current;
 
@@ -107,2 +109,3 @@ useEffect(() => {
     ...other,
+    id: inputId,
     style: editableStyle,
@@ -118,3 +121,4 @@ onFocusCapture: (e) => {
       {label && (
-        <span
+        <label
+          htmlFor={inputId}
           style={{
@@ -121,0 +125,0 @@ color: 'var(--editable-input-label-color)',

No alert changes

Improved metrics

Total package byte prevSize

24926

3.46%

Lines of code

394

3.14%

Number of lines in readme file

112

0.9%

No dependency changes