@alfalab/core-components-input - npm Package Compare versions

Comparing version 15.2.1 to 15.3.0

components/base-input/Component.js

@@ -20,9 +20,9 @@ 'use strict';
 
-var defaultColors = {"input":"input__input_nczeg","hasInnerLabel":"input__hasInnerLabel_nczeg","disableUserInput":"input__disableUserInput_nczeg","error":"input__error_nczeg"};
+var defaultColors = {"input":"input__input_1be21","hasInnerLabel":"input__hasInnerLabel_1be21","disableUserInput":"input__disableUserInput_1be21","error":"input__error_1be21"};
 require('./default.css')
 
-var styles = {"input":"input__input_1h0iw","hasInnerLabel":"input__hasInnerLabel_1h0iw","size-48":"input__size-48_1h0iw","size-56":"input__size-56_1h0iw","size-64":"input__size-64_1h0iw","size-72":"input__size-72_1h0iw","block":"input__block_1h0iw","errorIcon":"input__errorIcon_1h0iw","successIcon":"input__successIcon_1h0iw","focusVisible":"input__focusVisible_1h0iw","onautofillstart":"input__onautofillstart_1h0iw","onautofillcancel":"input__onautofillcancel_1h0iw"};
+var styles = {"input":"input__input_1kow1","hasInnerLabel":"input__hasInnerLabel_1kow1","size-48":"input__size-48_1kow1","size-56":"input__size-56_1kow1","size-64":"input__size-64_1kow1","size-72":"input__size-72_1kow1","block":"input__block_1kow1","errorIcon":"input__errorIcon_1kow1","successIcon":"input__successIcon_1kow1","disableUserInput":"input__disableUserInput_1kow1","focusVisible":"input__focusVisible_1kow1","onautofillstart":"input__onautofillstart_1kow1","onautofillcancel":"input__onautofillcancel_1kow1"};
 require('./index.css')
 
-var invertedColors = {"input":"input__input_gmksc","hasInnerLabel":"input__hasInnerLabel_gmksc","disableUserInput":"input__disableUserInput_gmksc","error":"input__error_gmksc"};
+var invertedColors = {"input":"input__input_14nnf","hasInnerLabel":"input__hasInnerLabel_14nnf","disableUserInput":"input__disableUserInput_14nnf","error":"input__error_14nnf"};
 require('./inverted.css')
@@ -58,4 +58,13 @@
     var hasInnerLabel = label && labelView === 'inner';
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        // https://github.com/facebook/react/issues/14125
+        if (restProps.autoFocus) {
+            var input = inputRef.current;
+            if (input) {
+                input.setSelectionRange(input.value.length, input.value.length);
+            }
+        }
+    }, []);
     var handleInputFocus = React.useCallback(function (event) {
-        if (!readOnly) {
+        if (!readOnlyProp || disableUserInput) {
             setFocused(true);
@@ -66,3 +75,3 @@ }
         }
-    }, [onFocus, readOnly]);
+    }, [onFocus, readOnlyProp, disableUserInput]);
     var handleInputBlur = React.useCallback(function (event) {
@@ -115,2 +124,3 @@ setFocused(false);
         React__default.default.createElement("input", tslib.__assign({}, restProps, { className: cn__default.default(styles.input, colorCommonStyles[colors].input, (_c = {},
+                _c[styles.disableUserInput] = disableUserInput,
                 _c[colorCommonStyles[colors].disableUserInput] = disableUserInput,
@@ -117,0 +127,0 @@ _c[colorCommonStyles[colors].error] = error,

components/clear-button/Component.js

@@ -15,9 +15,9 @@ 'use strict';
 
-var defaultColors = {"clearIcon":"input__clearIcon_z22ac"};
+var defaultColors = {"clearIcon":"input__clearIcon_1n34x"};
 require('./default.css')
 
-var styles = {"clearIcon":"input__clearIcon_hb7ig","clearButton":"input__clearButton_hb7ig"};
+var styles = {"clearIcon":"input__clearIcon_kzkn3","clearButton":"input__clearButton_kzkn3"};
 require('./index.css')
 
-var invertedColors = {"clearIcon":"input__clearIcon_9jjzw"};
+var invertedColors = {"clearIcon":"input__clearIcon_xkmmy"};
 require('./inverted.css')
@@ -24,0 +24,0 @@

cssm/components/base-input/Component.js

@@ -54,4 +54,13 @@ 'use strict';
     var hasInnerLabel = label && labelView === 'inner';
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        // https://github.com/facebook/react/issues/14125
+        if (restProps.autoFocus) {
+            var input = inputRef.current;
+            if (input) {
+                input.setSelectionRange(input.value.length, input.value.length);
+            }
+        }
+    }, []);
     var handleInputFocus = React.useCallback(function (event) {
-        if (!readOnly) {
+        if (!readOnlyProp || disableUserInput) {
             setFocused(true);
@@ -62,3 +71,3 @@ }
         }
-    }, [onFocus, readOnly]);
+    }, [onFocus, readOnlyProp, disableUserInput]);
     var handleInputBlur = React.useCallback(function (event) {
@@ -111,2 +120,3 @@ setFocused(false);
         React__default.default.createElement("input", tslib.__assign({}, restProps, { className: cn__default.default(styles__default.default.input, colorCommonStyles[colors].input, (_c = {},
+                _c[styles__default.default.disableUserInput] = disableUserInput,
                 _c[colorCommonStyles[colors].disableUserInput] = disableUserInput,
@@ -113,0 +123,0 @@ _c[colorCommonStyles[colors].error] = error,

esm/components/base-input/Component.js

@@ -7,12 +7,12 @@ import { __rest, __assign } from 'tslib';
 import { StatusBadge } from '@alfalab/core-components-status-badge/esm';
-import { useFocus } from '@alfalab/hooks';
+import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { ClearButton } from '../clear-button/Component.js';
 
-var defaultColors = {"input":"input__input_nczeg","hasInnerLabel":"input__hasInnerLabel_nczeg","disableUserInput":"input__disableUserInput_nczeg","error":"input__error_nczeg"};
+var defaultColors = {"input":"input__input_1be21","hasInnerLabel":"input__hasInnerLabel_1be21","disableUserInput":"input__disableUserInput_1be21","error":"input__error_1be21"};
 require('./default.css')
 
-var styles = {"input":"input__input_1h0iw","hasInnerLabel":"input__hasInnerLabel_1h0iw","size-48":"input__size-48_1h0iw","size-56":"input__size-56_1h0iw","size-64":"input__size-64_1h0iw","size-72":"input__size-72_1h0iw","block":"input__block_1h0iw","errorIcon":"input__errorIcon_1h0iw","successIcon":"input__successIcon_1h0iw","focusVisible":"input__focusVisible_1h0iw","onautofillstart":"input__onautofillstart_1h0iw","onautofillcancel":"input__onautofillcancel_1h0iw"};
+var styles = {"input":"input__input_1kow1","hasInnerLabel":"input__hasInnerLabel_1kow1","size-48":"input__size-48_1kow1","size-56":"input__size-56_1kow1","size-64":"input__size-64_1kow1","size-72":"input__size-72_1kow1","block":"input__block_1kow1","errorIcon":"input__errorIcon_1kow1","successIcon":"input__successIcon_1kow1","disableUserInput":"input__disableUserInput_1kow1","focusVisible":"input__focusVisible_1kow1","onautofillstart":"input__onautofillstart_1kow1","onautofillcancel":"input__onautofillcancel_1kow1"};
 require('./index.css')
 
-var invertedColors = {"input":"input__input_gmksc","hasInnerLabel":"input__hasInnerLabel_gmksc","disableUserInput":"input__disableUserInput_gmksc","error":"input__error_gmksc"};
+var invertedColors = {"input":"input__input_14nnf","hasInnerLabel":"input__hasInnerLabel_14nnf","disableUserInput":"input__disableUserInput_14nnf","error":"input__error_14nnf"};
 require('./inverted.css')
@@ -48,4 +48,13 @@
     var hasInnerLabel = label && labelView === 'inner';
+    useLayoutEffect_SAFE_FOR_SSR(function () {
+        // https://github.com/facebook/react/issues/14125
+        if (restProps.autoFocus) {
+            var input = inputRef.current;
+            if (input) {
+                input.setSelectionRange(input.value.length, input.value.length);
+            }
+        }
+    }, []);
     var handleInputFocus = useCallback(function (event) {
-        if (!readOnly) {
+        if (!readOnlyProp || disableUserInput) {
             setFocused(true);
@@ -56,3 +65,3 @@ }
         }
-    }, [onFocus, readOnly]);
+    }, [onFocus, readOnlyProp, disableUserInput]);
     var handleInputBlur = useCallback(function (event) {
@@ -105,2 +114,3 @@ setFocused(false);
         React.createElement("input", __assign({}, restProps, { className: cn(styles.input, colorCommonStyles[colors].input, (_c = {},
+                _c[styles.disableUserInput] = disableUserInput,
                 _c[colorCommonStyles[colors].disableUserInput] = disableUserInput,
@@ -107,0 +117,0 @@ _c[colorCommonStyles[colors].error] = error,

esm/components/clear-button/Component.js

@@ -6,9 +6,9 @@ import React from 'react';
 
-var defaultColors = {"clearIcon":"input__clearIcon_z22ac"};
+var defaultColors = {"clearIcon":"input__clearIcon_1n34x"};
 require('./default.css')
 
-var styles = {"clearIcon":"input__clearIcon_hb7ig","clearButton":"input__clearButton_hb7ig"};
+var styles = {"clearIcon":"input__clearIcon_kzkn3","clearButton":"input__clearButton_kzkn3"};
 require('./index.css')
 
-var invertedColors = {"clearIcon":"input__clearIcon_9jjzw"};
+var invertedColors = {"clearIcon":"input__clearIcon_xkmmy"};
 require('./inverted.css')
@@ -15,0 +15,0 @@

modern/components/base-input/Component.js

@@ -6,12 +6,12 @@ import React, { useRef, useState, useCallback, Fragment } from 'react';
 import { StatusBadge } from '@alfalab/core-components-status-badge/modern';
-import { useFocus } from '@alfalab/hooks';
+import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { ClearButton } from '../clear-button/Component.js';
 
-const defaultColors = {"input":"input__input_nczeg","hasInnerLabel":"input__hasInnerLabel_nczeg","disableUserInput":"input__disableUserInput_nczeg","error":"input__error_nczeg"};
+const defaultColors = {"input":"input__input_1be21","hasInnerLabel":"input__hasInnerLabel_1be21","disableUserInput":"input__disableUserInput_1be21","error":"input__error_1be21"};
 require('./default.css')
 
-const styles = {"input":"input__input_1h0iw","hasInnerLabel":"input__hasInnerLabel_1h0iw","size-48":"input__size-48_1h0iw","size-56":"input__size-56_1h0iw","size-64":"input__size-64_1h0iw","size-72":"input__size-72_1h0iw","block":"input__block_1h0iw","errorIcon":"input__errorIcon_1h0iw","successIcon":"input__successIcon_1h0iw","focusVisible":"input__focusVisible_1h0iw","onautofillstart":"input__onautofillstart_1h0iw","onautofillcancel":"input__onautofillcancel_1h0iw"};
+const styles = {"input":"input__input_1kow1","hasInnerLabel":"input__hasInnerLabel_1kow1","size-48":"input__size-48_1kow1","size-56":"input__size-56_1kow1","size-64":"input__size-64_1kow1","size-72":"input__size-72_1kow1","block":"input__block_1kow1","errorIcon":"input__errorIcon_1kow1","successIcon":"input__successIcon_1kow1","disableUserInput":"input__disableUserInput_1kow1","focusVisible":"input__focusVisible_1kow1","onautofillstart":"input__onautofillstart_1kow1","onautofillcancel":"input__onautofillcancel_1kow1"};
 require('./index.css')
 
-const invertedColors = {"input":"input__input_gmksc","hasInnerLabel":"input__hasInnerLabel_gmksc","disableUserInput":"input__disableUserInput_gmksc","error":"input__error_gmksc"};
+const invertedColors = {"input":"input__input_14nnf","hasInnerLabel":"input__hasInnerLabel_14nnf","disableUserInput":"input__disableUserInput_14nnf","error":"input__error_14nnf"};
 require('./inverted.css')
@@ -45,4 +45,13 @@
     const hasInnerLabel = label && labelView === 'inner';
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        // https://github.com/facebook/react/issues/14125
+        if (restProps.autoFocus) {
+            const input = inputRef.current;
+            if (input) {
+                input.setSelectionRange(input.value.length, input.value.length);
+            }
+        }
+    }, []);
     const handleInputFocus = useCallback((event) => {
-        if (!readOnly) {
+        if (!readOnlyProp || disableUserInput) {
             setFocused(true);
@@ -53,3 +62,3 @@ }
         }
-    }, [onFocus, readOnly]);
+    }, [onFocus, readOnlyProp, disableUserInput]);
     const handleInputBlur = useCallback((event) => {
@@ -102,2 +111,3 @@ setFocused(false);
         React.createElement("input", { ...restProps, className: cn(styles.input, colorCommonStyles[colors].input, {
+                [styles.disableUserInput]: disableUserInput,
                 [colorCommonStyles[colors].disableUserInput]: disableUserInput,
@@ -104,0 +114,0 @@ [colorCommonStyles[colors].error]: error,

modern/components/clear-button/Component.js

@@ -6,9 +6,9 @@ import React from 'react';
 
-const defaultColors = {"clearIcon":"input__clearIcon_z22ac"};
+const defaultColors = {"clearIcon":"input__clearIcon_1n34x"};
 require('./default.css')
 
-const styles = {"clearIcon":"input__clearIcon_hb7ig","clearButton":"input__clearButton_hb7ig"};
+const styles = {"clearIcon":"input__clearIcon_kzkn3","clearButton":"input__clearButton_kzkn3"};
 require('./index.css')
 
-const invertedColors = {"clearIcon":"input__clearIcon_9jjzw"};
+const invertedColors = {"clearIcon":"input__clearIcon_xkmmy"};
 require('./inverted.css')
@@ -15,0 +15,0 @@

moderncssm/components/base-input/Component.js

@@ -6,3 +6,3 @@ import React, { useRef, useState, useCallback, Fragment } from 'react';
 import { StatusBadge } from '@alfalab/core-components-status-badge/moderncssm';
-import { useFocus } from '@alfalab/hooks';
+import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { ClearButton } from '../clear-button/Component.js';
@@ -39,4 +39,13 @@ import defaultColors from './default.module.css';
     const hasInnerLabel = label && labelView === 'inner';
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        // https://github.com/facebook/react/issues/14125
+        if (restProps.autoFocus) {
+            const input = inputRef.current;
+            if (input) {
+                input.setSelectionRange(input.value.length, input.value.length);
+            }
+        }
+    }, []);
     const handleInputFocus = useCallback((event) => {
-        if (!readOnly) {
+        if (!readOnlyProp || disableUserInput) {
             setFocused(true);
@@ -47,3 +56,3 @@ }
         }
-    }, [onFocus, readOnly]);
+    }, [onFocus, readOnlyProp, disableUserInput]);
     const handleInputBlur = useCallback((event) => {
@@ -96,2 +105,3 @@ setFocused(false);
         React.createElement("input", { ...restProps, className: cn(styles.input, colorCommonStyles[colors].input, {
+                [styles.disableUserInput]: disableUserInput,
                 [colorCommonStyles[colors].disableUserInput]: disableUserInput,
@@ -98,0 +108,0 @@ [colorCommonStyles[colors].error]: error,

package.json

 {
     "name": "@alfalab/core-components-input",
-    "version": "15.2.1",
+    "version": "15.3.0",
     "description": "",
@@ -5,0 +5,0 @@ "keywords": [],

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

538802

increased by0.64%

Lines of code

6352

increased by1.1%

No dependency changes