@rolster/react-components 19.4.6 → 19.4.8

package/dist/cjs/assets/{index-ChnUq-Oa.css → index-CP_fr3gi.css}

@@ -70,6 +70,86 @@
   align-self: flex-end;
 } /*# sourceMappingURL=Amount.css.map */
 
+.rls-area-text {
+  --pvt-font-color: var(--rlc-area-text-font-color, var(--rls-app-color-900));
+  --pvt-font-size: var(--rlc-area-text-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-area-text-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-line-height: var(--rlc-area-text-line-height, 1.5);
+  --pvt-min-height: var(
+    --rlc-area-text-min-height,
+    calc(var(--rls-sizing-x12) * 3)
+  );
+  --pvt-padding: var(--rlc-area-text-padding, var(--rls-sizing-x3) 0rem);
+  --pvt-text-align: var(--rlc-area-text-text-align, left);
+  --pvt-value-font-color: var(--pvt-font-color);
+  --pvt-value-opacity: 1;
+  --pvt-component-font-color: transparent;
+  position: relative;
+  width: var(--rlc-area-text-width, 100%);
+}
+.rls-area-text--focused {
+  --pvt-component-font-color: var(--pvt-font-color);
+  --pvt-value-font-color: transparent;
+}
+.rls-area-text--disabled {
+  --pvt-value-opacity: 0.5;
+}
+.rls-area-text__component {
+  position: relative;
+  width: 100%;
+  min-height: var(--pvt-min-height);
+  padding: var(--pvt-padding);
+  cursor: text;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--pvt-component-font-color);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  line-height: var(--pvt-line-height);
+  text-align: var(--pvt-text-align);
+  letter-spacing: var(--pvt-letter-spacing);
+  font-family: inherit;
+  overflow: hidden;
+  resize: none;
+}
+.rls-area-text__component::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-area-text__component::selection {
+  background: var(--rls-theme-color-700);
+  color: var(--rls-app-color-050);
+}
+.rls-area-text__component:read-only {
+  pointer-events: none;
+}
+.rls-area-text__component:disabled {
+  opacity: 0.5;
+}
+.rls-area-text__value {
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  min-height: var(--pvt-min-height);
+  padding: var(--pvt-padding);
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  overflow: hidden;
+  white-space: pre-wrap;
+  word-break: break-word;
+  opacity: var(--pvt-value-opacity);
+  color: var(--pvt-value-font-color);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  line-height: var(--pvt-line-height);
+  text-align: var(--pvt-text-align);
+  letter-spacing: var(--pvt-letter-spacing);
+} /*# sourceMappingURL=AreaText.css.map */
+
 .rls-avatar {
   --rlc-image-width: var(--rlc-avatar-width);
   --rlc-image-height: var(--rlc-avatar-height);
@@ -1458,6 +1538,13 @@
   box-sizing: border-box;
 } /*# sourceMappingURL=FieldDecimal.css.map */
 
+.rls-field-area {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+} /*# sourceMappingURL=FieldArea.css.map */
+
 .rls-field-file {
   --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
   --rlc-action-ripple-dimension: var(--rls-sizing-x12);
@@ -2645,12 +2732,14 @@
   opacity: 0;
   width: auto;
   z-index: -16;
+  pointer-events: none;
   transition: opacity 240ms 0ms var(--rls-standard-curve);
 }
 .rls-dropdown--visible {
   --pvt-content-opacity: 1;
   --pvt-content-transform: scale(1, 1);
   opacity: 1;
+  pointer-events: initial;
   z-index: var(--rlc-dropdown-z-index, var(--rls-z-index-4));
 }
 .rls-dropdown__content {

package/dist/cjs/index.cjs

@@ -469,6 +469,73 @@ function RlsAmount({ value, className, decimals, rlsTheme, symbol }) {
     return (jsxRuntimeExports.jsxs("div", { className: classNameAmount, "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
 }
 
+function RlsAreaText({ autoComplete, children, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows, value }) {
+    const valueInitial = String(formControl?.value ?? value ?? '');
+    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 refreshHeight = require$$0.useCallback(() => {
+        const element = areaRef.current;
+        if (!element) {
+            return;
+        }
+        element.style.height = 'auto';
+        element.style.height = `${element.scrollHeight}px`;
+    }, [areaRef]);
+    require$$0.useEffect(() => {
+        if (!changeIsInternal.current) {
+            const nextValue = String(formControl?.value ?? value ?? '');
+            valueArea !== nextValue && setValueArea(nextValue);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value, value, valueArea]);
+    require$$0.useEffect(() => {
+        refreshHeight();
+    }, [refreshHeight, valueArea]);
+    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);
+        event.key === 'Enter' && onEnter?.();
+    }, [onKeyDown, onEnter]);
+    const onKeyUpArea = require$$0.useCallback((event) => {
+        onKeyUp?.(event);
+    }, [onKeyUp]);
+    const onFocusArea = require$$0.useCallback(() => {
+        formControl?.focus();
+        setFocused(() => true);
+        onFocus?.();
+    }, [formControl, onFocus]);
+    const onBlurArea = require$$0.useCallback(() => {
+        formControl?.blur();
+        setFocused(() => false);
+        onBlur?.();
+    }, [formControl, onBlur]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-area-text', {
+            disabled: formControl?.disabled || disabled,
+            focused: formControl?.focused ?? focused,
+            readonly: readOnly
+        });
+    }, [
+        formControl?.disabled,
+        formControl?.focused,
+        disabled,
+        focused,
+        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: children ?? valueArea })] }));
+}
+
 function RlsAvatar({ children, contrasted, rounded, skeleton, rlsTheme }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-avatar', { contrasted, rounded, skeleton });
@@ -980,6 +1047,22 @@ function RlsFieldDecimal(props) {
     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(RlsInputDecimal, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
+function RlsFieldArea(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-area');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    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 }))] }));
+}
+
 function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
     const inputRef = require$$0.useRef(null);
     const disabled = require$$0.useMemo(() => formControl?.disabled || disabledProp, [formControl?.disabled, disabledProp]);
@@ -2103,8 +2186,8 @@ function RlsFieldAutocompleteTemplate(props) {
         });
     }, []);
     require$$0.useEffect(() => {
-        props.onInput?.(autocomplete.value);
-    }, [autocomplete.value, props.onInput]);
+        props.onInput?.(autocomplete.pattern);
+    }, [autocomplete.pattern, props.onInput]);
     const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -3344,15 +3427,16 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
-function useDropdownController() {
+function useDropdownController(effect = '0% 0%') {
     const [visible, setVisible] = require$$0.useState(false);
     const component = require$$0.useRef(null);
     const open = require$$0.useCallback((positionX, positionY) => {
-        component.current.style.transformOrigin = '0% 0%';
+        const content = component.current.querySelector('.rls-dropdown__content');
+        content.style.transformOrigin = effect;
         component.current.style.top = `${positionY}px`;
         component.current.style.left = `${positionX}px`;
         setVisible(true);
-    }, []);
+    }, [effect]);
     const openWithEvent = require$$0.useCallback((event) => {
         const rectContent = component.current.getBoundingClientRect();
         const rectElement = event.target.getBoundingClientRect();
@@ -3400,7 +3484,8 @@ function useDropdownController() {
                 effect = '0% 0%';
                 break;
         }
-        component.current.style.transformOrigin = effect;
+        const content = component.current.querySelector('.rls-dropdown__content');
+        content.style.transformOrigin = effect;
         component.current.style.top = `${positionY}px`;
         component.current.style.left = `${positionX}px`;
         setVisible(true);
@@ -3433,6 +3518,7 @@ exports.ConfirmationResult = ConfirmationResult;
 exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
 exports.RlsApplication = RlsApplication;
+exports.RlsAreaText = RlsAreaText;
 exports.RlsAvatar = RlsAvatar;
 exports.RlsBadge = RlsBadge;
 exports.RlsBallot = RlsBallot;
@@ -3459,6 +3545,7 @@ exports.RlsDatatableSubheader = RlsDatatableSubheader;
 exports.RlsDatatableTitle = RlsDatatableTitle;
 exports.RlsDatatableTotals = RlsDatatableTotals;
 exports.RlsDropdown = RlsDropdown;
+exports.RlsFieldArea = RlsFieldArea;
 exports.RlsFieldAutocomplete = RlsFieldAutocomplete;
 exports.RlsFieldAutocompleteTemplate = RlsFieldAutocompleteTemplate;
 exports.RlsFieldClock = RlsFieldClock;