@rolster/react-components 19.8.21 → 19.8.22

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Rolster Technology
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 Rolster Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/index.cjs

@@ -484,20 +484,41 @@ function RlsAmountComponent({ value, className, decimals, rlsTheme, symbol }) {
 }
 const RlsAmount = require$$0.memo(RlsAmountComponent);
 
-function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows = 1, value }) {
+const AREA_TEXT_MAX_ROWS = 8;
+const AREA_TEXT_MIN_ROWS = 3;
+function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
     const valueInitial = String(formControl?.value ?? value ?? '');
+    const rowsMin = minRows ?? AREA_TEXT_MIN_ROWS;
+    const rowsMax = Math.max(maxRows ?? AREA_TEXT_MAX_ROWS, rowsMin);
     const [valueArea, setValueArea] = require$$0.useState(valueInitial);
     const [focused, setFocused] = require$$0.useState(false);
     const elementRef = require$$0.useRef(null);
     const areaRef = formControl?.elementRef ?? elementRef;
     const changeIsInternal = require$$0.useRef(false);
+    const heightIsManual = require$$0.useRef(false);
+    const heightApplied = require$$0.useRef(0);
     const refreshHeight = require$$0.useCallback(() => {
         const element = areaRef.current;
-        if (element) {
-            element.style.height = 'auto';
-            element.style.height = `${element.scrollHeight}px`;
+        if (!element || heightIsManual.current) {
+            return;
+        }
+        element.style.height = 'auto';
+        const { lineHeight, paddingBottom, paddingTop } = getComputedStyle(element);
+        const heightLine = parseFloat(lineHeight);
+        const heightContent = element.scrollHeight;
+        if (!heightLine) {
+            element.style.height = `${heightContent}px`;
+            heightApplied.current = heightContent;
+            return;
         }
-    }, [areaRef]);
+        const heightPadding = parseFloat(paddingTop) + parseFloat(paddingBottom);
+        const heightMin = heightLine * rowsMin + heightPadding;
+        const heightMax = heightLine * rowsMax + heightPadding;
+        const height = Math.min(Math.max(heightContent, heightMin), heightMax);
+        element.style.height = `${height}px`;
+        element.style.overflowY = heightContent > heightMax ? 'auto' : 'hidden';
+        heightApplied.current = height;
+    }, [areaRef, rowsMax, rowsMin]);
     require$$0.useEffect(() => {
         if (!changeIsInternal.current) {
             const nextValue = String(formControl?.value ?? value ?? '');
@@ -510,14 +531,31 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
     require$$0.useEffect(() => {
         refreshHeight();
     }, [refreshHeight, valueArea]);
+    require$$0.useEffect(() => {
+        const element = areaRef.current;
+        if (!element ||
+            resize === 'none' ||
+            typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            if (heightIsManual.current || !heightApplied.current) {
+                return;
+            }
+            if (Math.abs(element.offsetHeight - heightApplied.current) > 1) {
+                heightIsManual.current = true;
+                element.style.overflowY = 'auto';
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [areaRef, resize]);
     const onChangeArea = require$$0.useCallback((event) => {
         const nextValue = event.target.value;
         changeIsInternal.current = true;
         onValue?.(nextValue);
         setValueArea(nextValue);
         formControl?.setValue(nextValue);
-        event.target.style.height = 'auto';
-        event.target.style.height = `${event.target.scrollHeight}px`;
     }, [formControl, onValue]);
     const onKeyDownArea = require$$0.useCallback((event) => {
         onKeyDown?.(event);
@@ -538,12 +576,14 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         setFocused(() => false);
         onBlur?.();
     }, [formControl, onBlur]);
+    const disabledArea = formControl?.disabled || disabled;
     const className = renderClassStatus('rls-area-text', {
-        disabled: formControl?.disabled || disabled,
+        disabled: disabledArea,
         focused: formControl?.focused ?? focused,
-        readonly: readOnly
+        readonly: readOnly,
+        resizable: resize !== 'none' && !disabledArea && !readOnly
     });
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, rows: rows, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", children: valueArea })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
 }
 const RlsAreaText = require$$0.memo(RlsAreaTextComponent);
 
@@ -650,8 +690,11 @@ function RlsCheckBoxControlComponent({ formControl, disabled, identifier, rlsThe
 }
 const RlsCheckBoxControl = require$$0.memo(RlsCheckBoxControlComponent);
 
-function RlsSkeletonComponent({ rlsTheme }) {
-    return jsxRuntimeExports.jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
+function RlsSkeletonComponent({ animation, rlsTheme }) {
+    const className = renderClassStatus('rls-skeleton', {
+        animation: animation !== 'shimmer' && animation
+    });
+    return jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme });
 }
 const RlsSkeleton = require$$0.memo(RlsSkeletonComponent);
 
@@ -1260,8 +1303,8 @@ function RlsRadioButtonComponent({ checked, disabled, identifier, rlsTheme, onCl
 }
 const RlsRadioButton = require$$0.memo(RlsRadioButtonComponent);
 
-function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
+function RlsSkeletonTextComponent({ active, animation, children, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, { animation: animation })) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
 const RlsSkeletonText = require$$0.memo(RlsSkeletonTextComponent);
 
@@ -1550,17 +1593,31 @@ function RlsMessageFormErrorComponent({ className, formControl }) {
 const RlsMessageFormError = require$$0.memo(RlsMessageFormErrorComponent);
 
 function RlsFieldAreaComponent(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { children, formControl, identifier, maxLength, rlsTheme } = props;
+    const { onValue } = props;
     const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
+    const valueSource = formControl?.value ?? props.value;
+    const [valueLength, setValueLength] = require$$0.useState(() => {
+        return (valueSource ?? '').length;
+    });
+    require$$0.useEffect(() => {
+        if (valueSource !== undefined) {
+            setValueLength(valueSource.length);
+        }
+    }, [valueSource]);
+    const onValueArea = require$$0.useCallback((value) => {
+        setValueLength(value.length);
+        onValue?.(value);
+    }, [onValue]);
     const className = renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
         focused: formControl?.focused && !disabled,
         readonly: props.readOnly
     }, 'rls-field-area');
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props, onValue: onValueArea }) }) }), props.counter && (jsxRuntimeExports.jsx("span", { className: "rls-field-box__helper rls-field-area__counter", children: maxLength ? `${valueLength} / ${maxLength}` : valueLength })), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 const RlsFieldArea = require$$0.memo(RlsFieldAreaComponent);