@rolster/react-components 19.6.3 → 19.6.7

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

@@ -414,13 +414,21 @@ function requireReactJsxRuntime_development () {
 	return reactJsxRuntime_development;
 }
 
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
 }
 
-var jsxRuntimeExports = jsxRuntime.exports;
+var jsxRuntimeExports = requireJsxRuntime();
 
 function renderClassStatus(base, status = {}, additionals) {
     const _classElement = [base];
@@ -1139,13 +1147,8 @@ function oklabToLinearRgb(l, a, b) {
 }
 const inGamut = ([r, g, b]) => {
     const e = 1e-4;
-    return r >= -e && r <= 1 + e && g >= -e && g <= 1 + e && b >= -e && b <= 1 + e;
+    return (r >= -e && r <= 1 + e && g >= -e && g <= 1 + e && b >= -e && b <= 1 + e);
 };
-/**
- * Converts an OKLCH color to sRGB. If the requested chroma falls outside the
- * sRGB gamut, chroma is reduced (binary search) while keeping lightness and
- * hue fixed — this preserves the intended tone instead of clipping channels.
- */
 function oklchToRgb({ l, c, h }) {
     const a = Math.cos(h);
     const b = Math.sin(h);
@@ -1167,10 +1170,6 @@ function oklchToRgb({ l, c, h }) {
     const [lr, lg, lb] = linearAt(c);
     return { r: linearToSrgb(lr), g: linearToSrgb(lg), b: linearToSrgb(lb) };
 }
-/**
- * Scales chroma down toward the lightness extremes (very light / very dark) so
- * shades do not look oversaturated at the ends. Peaks at L=0.5 (factor 1).
- */
 const chromaFactor = (lightness) => 0.4 + 0.6 * (1 - Math.abs(lightness - 0.5) * 2);
 function detectShadeLevel(lightness) {
     let bestLevel = '500';
@@ -1574,9 +1573,9 @@ function RlsFieldArea(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(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 }) {
+function RlsFieldFile({ accept, children, disabled: _disabled, 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]);
+    const disabled = require$$0.useMemo(() => formControl?.disabled || _disabled, [formControl?.disabled, _disabled]);
     const className = require$$0.useMemo(() => renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
@@ -1608,7 +1607,7 @@ function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, i
     const onClickControl = require$$0.useCallback(() => {
         !readOnly && !disabled && inputRef.current?.click();
     }, [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", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach-2', disabled: disabled, onClick: onClickAction })] }) }), !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", onClick: onClickControl, children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-input__component", readOnly: true, type: "text", value: displayValue, placeholder: placeholder }), jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-field-file__input", type: "file", accept: accept, disabled: disabled || readOnly, onChange: onChangeInput }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: currentFile ? 'close' : 'attach', disabled: disabled, onClick: onClickAction })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 const reactI18n = i18n.i18n({
@@ -2596,7 +2595,7 @@ function useListController(props) {
     };
 }
 
-const DURATION_ANIMATION$1 = 240;
+const DURATION_ANIMATION$2 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
     const controller = useListController(props);
@@ -2653,7 +2652,7 @@ function useFieldAutocomplete(props) {
             clearTimeout(focusTimeoutId.current);
             focusTimeoutId.current = setTimeout(() => {
                 controller.refInput?.current?.focus();
-            }, DURATION_ANIMATION$1);
+            }, DURATION_ANIMATION$2);
         }
     }, [controller.setState, props.readOnly]);
     require$$0.useEffect(() => {
@@ -3979,8 +3978,8 @@ function useResize(props) {
     }, []);
 }
 
-const minValueSlider = 50;
-const maxValueSlider = 100;
+const MIN_SLIDER_VALUE = 50;
+const MAX_SLIDER_VALUE = 100;
 function getRatioFactor(ratio) {
     switch (ratio) {
         case '16:9':
@@ -4028,6 +4027,7 @@ function RlsImageEditor(props) {
     const refPicture = require$$0.useRef(null);
     const image = require$$0.useRef(new Image());
     const originalImage = require$$0.useRef(undefined);
+    const hasInteracted = require$$0.useRef(false);
     const ratio = require$$0.useMemo(() => {
         return props.ratio || '1:1';
     }, [props.ratio]);
@@ -4086,18 +4086,22 @@ function RlsImageEditor(props) {
             image.current.width > 0 &&
             image.current.height > 0) {
             const { height, width } = image.current.width >= image.current.height
-                ? refreshSelectionFromHeight(rateSelection)
-                : refreshSelectionFromWidth(rateSelection);
+                ? refreshSelectionFromWidth(rateSelection)
+                : refreshSelectionFromHeight(rateSelection);
             refSelection.current.style.width = `${width}px`;
             refSelection.current.style.height = `${height}px`;
+            const left = refImage.current.offsetWidth - width;
+            const top = refImage.current.offsetHeight - height;
+            if (!hasInteracted.current) {
+                refSelection.current.style.left = `${left / 2}px`;
+                refSelection.current.style.top = `${top / 2}px`;
+            }
             if (refSelection.current.offsetLeft + width >
                 refImage.current.offsetWidth) {
-                const left = refImage.current.offsetWidth - width;
                 refSelection.current.style.left = `${left < 0 ? 0 : left}px`;
             }
             if (refSelection.current.offsetTop + height >
                 refImage.current.offsetHeight) {
-                const top = refImage.current.offsetHeight - height;
                 refSelection.current.style.top = `${top < 0 ? 0 : top}px`;
             }
             refreshOverlaysStyle();
@@ -4121,7 +4125,7 @@ function RlsImageEditor(props) {
         const width = (refBody.current.offsetHeight * image.current.width) /
             image.current.height;
         return setImageStyle(`${width}px`, '100%');
-    }, [ratio]);
+    }, []);
     require$$0.useEffect(() => {
         image.current.onload = () => {
             const context = refCanvas.current.getContext('2d', {
@@ -4160,7 +4164,10 @@ function RlsImageEditor(props) {
     useRelocationOnComponent({
         container: refImage,
         element: refSelection,
-        onDrag: refreshOverlaysStyle
+        onDrag: () => {
+            hasInteracted.current = true;
+            refreshOverlaysStyle();
+        }
     });
     useResize({ refElement: refImage, onResize: onResizeElement });
     const onCropImage = require$$0.useCallback(() => {
@@ -4199,7 +4206,7 @@ function RlsImageEditor(props) {
             context?.putImageData(originalImage.current, 0, 0);
         }
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: minValueSlider, maxValue: maxValueSlider, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "classic", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "standard", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", rlsTheme: "primary", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
 }
 
 function RlsImageEditorModal(props) {
@@ -4295,6 +4302,60 @@ function RlsModalSheet({ autoclose, children, className, controller, onAutoClose
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
+const DURATION_ANIMATION$1 = 240;
+const DURATION_DEFAULT = 4000;
+let _id = 0;
+function generateId() {
+    return `rls-notification-${++_id}`;
+}
+function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-notification', { visible });
+    }, [visible]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-notification__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-notification__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-notification__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-notification__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-notification__content", children: content })] })] }));
+}
+function useNotifications() {
+    const [notifications, setNotifications] = require$$0.useState([]);
+    const timersRef = require$$0.useRef(new Map());
+    require$$0.useEffect(() => {
+        const timers = timersRef.current;
+        return () => {
+            timers.forEach((timer) => clearTimeout(timer));
+            timers.clear();
+        };
+    }, []);
+    const remove = require$$0.useCallback((id) => {
+        const timer = timersRef.current.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+        }
+        setNotifications((notifications) => notifications.map((notification) => notification.id === id
+            ? { ...notification, visible: false }
+            : notification));
+        setTimeout(() => {
+            setNotifications((notifications) => notifications.filter((notification) => notification.id !== id));
+        }, DURATION_ANIMATION$1);
+    }, []);
+    const notify = require$$0.useCallback((config) => {
+        const id = generateId();
+        const duration = config.duration ?? DURATION_DEFAULT;
+        setNotifications((notifications) => [
+            ...notifications,
+            { id, config, visible: true }
+        ]);
+        const timer = setTimeout(() => {
+            remove(id);
+        }, duration);
+        timersRef.current.set(id, timer);
+    }, [remove]);
+    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: "rls-notifications", children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+    return {
+        RlsNotifications,
+        notify
+    };
+}
+
 const DURATION_ANIMATION = 240;
 const DURATION_CHAR = 75;
 const DURATION_MAX = 9000;
@@ -4358,17 +4419,17 @@ function useSnackbar() {
     };
 }
 
-const RlsContext = require$$0.createContext({
-    confirmation: () => {
-        return Promise.resolve(ConfirmationResult.approved());
-    },
-    snackbar: () => { },
-    setIsMobile: () => { },
-    setNavbarInApp: () => { },
-    setNavbarIsCondense: () => { }
-});
+const RlsContext = require$$0.createContext(null);
+function useRlsContext() {
+    const state = require$$0.useContext(RlsContext);
+    if (!state) {
+        throw new Error('RlsApplication not wrapped in Project');
+    }
+    return state;
+}
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
+    const { RlsNotifications, notify } = useNotifications();
     const { RlsSnackbar, snackbar } = useSnackbar();
     const [navbarInApp, setNavbarInApp] = require$$0.useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = require$$0.useState(false);
@@ -4382,11 +4443,12 @@ function RlsApplication({ children }) {
     }, [appIsMobile, navbarInApp, navbarIsCondense]);
     return (jsxRuntimeExports.jsxs(RlsContext, { value: {
             confirmation,
+            notify,
             snackbar,
             setIsMobile,
             setNavbarInApp,
             setNavbarIsCondense
-        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
+        }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, RlsConfirmation] }));
 }
 
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
@@ -4647,8 +4709,10 @@ exports.useFormSingleSelectionController = useFormSingleSelectionController;
 exports.useFormToggleController = useFormToggleController;
 exports.useImageEditorController = useImageEditorController;
 exports.useListController = useListController;
+exports.useNotifications = useNotifications;
 exports.usePortalController = usePortalController;
 exports.useRelocationOnComponent = useRelocationOnComponent;
 exports.useResize = useResize;
+exports.useRlsContext = useRlsContext;
 exports.useSnackbar = useSnackbar;
 //# sourceMappingURL=index.cjs.map