@rolster/react-components 19.8.15 → 19.8.17

package/dist/cjs/index.cjs

@@ -430,6 +430,14 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+const FALLBACK_REM_SIZE$1 = 16;
+function getRemSize$1() {
+    if (typeof window === 'undefined') {
+        return FALLBACK_REM_SIZE$1;
+    }
+    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE$1;
+}
 function renderClassStatus(base, status = {}, additionals) {
     const classElement = [base];
     Object.entries(status).forEach(([key, state]) => {
@@ -1257,6 +1265,11 @@ function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
 }
 const RlsSkeletonText = require$$0.memo(RlsSkeletonTextComponent);
 
+function RlsSwapHoverComponent({ children, content, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-swap-hover", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-swap-hover__primary", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-swap-hover__secondary", children: content })] }));
+}
+const RlsHoverSwap = require$$0.memo(RlsSwapHoverComponent);
+
 function RlsSwitchComponent({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
     const className = renderClassStatus('rls-switch', {
         checked,
@@ -1633,6 +1646,19 @@ const reactI18n = i18n.i18n({
     }
 });
 
+function useEventCallback(callback) {
+    const refCallback = require$$0.useRef(callback);
+    require$$0.useInsertionEffect(() => {
+        refCallback.current = callback;
+    });
+    return require$$0.useCallback((...args) => refCallback.current(...args), []);
+}
+
+const MAX_LIST_HEIGHT_REM$2 = 180;
+const MOBILE_MEDIA_QUERY = '(max-width: 480px)';
+const SUGGESTIONS_OFFSET_REM = 6;
+const SUGGESTIONS_OVERLAP_REM = 4;
+const VIEWPORT_GAP_REM$1 = 8;
 function getScrollableAncestors(element) {
     const ancestors = [];
     let parent = element.parentElement;
@@ -1665,14 +1691,22 @@ function anchorIsVisible(rect, scrollables) {
         rect.right > left &&
         rect.left < right);
 }
-function useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor) {
+function getMaxHeight(rect, higher) {
+    const remSize = getRemSize$1();
+    const gap = VIEWPORT_GAP_REM$1 * remSize;
+    const available = higher
+        ? rect.top + SUGGESTIONS_OVERLAP_REM * remSize - gap
+        : window.innerHeight - rect.bottom - SUGGESTIONS_OFFSET_REM * remSize - gap;
+    return Math.max(0, Math.round(available));
+}
+function useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor, higher) {
     const [mounted, setMounted] = require$$0.useState(false);
     const [style, setStyle] = require$$0.useState();
     const [theme, setTheme] = require$$0.useState();
     require$$0.useEffect(() => {
         setMounted(true);
     }, []);
-    const onAnchorHidden = require$$0.useEffectEvent(() => {
+    const onAnchorHidden = useEventCallback(() => {
         onHiddenAnchor?.();
     });
     require$$0.useEffect(() => {
@@ -1690,15 +1724,20 @@ function useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor) {
             }
             const rect = anchor.getBoundingClientRect();
             if (!anchorIsVisible(rect, scrollables)) {
-                onAnchorHidden();
-                return;
+                return onAnchorHidden();
             }
-            setStyle({
+            const style = {
                 '--pvt-portal-top': `${rect.bottom}px`,
                 '--pvt-portal-bottom': `${window.innerHeight - rect.top}px`,
                 '--pvt-portal-left': `${rect.left}px`,
                 '--pvt-portal-width': `${rect.width}px`
-            });
+            };
+            if (!window.matchMedia?.(MOBILE_MEDIA_QUERY).matches) {
+                const maxHeight = `min(${MAX_LIST_HEIGHT_REM$2}rem, ${getMaxHeight(rect, higher)}px)`;
+                style['--pvt-list-max-height'] = maxHeight;
+                style['--pvt-list-body-max-height'] = maxHeight;
+            }
+            setStyle(style);
         }
         function requestReposition() {
             cancelAnimationFrame(frame);
@@ -1712,7 +1751,7 @@ function useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor) {
             window.removeEventListener('scroll', requestReposition, true);
             window.removeEventListener('resize', requestReposition);
         };
-    }, [mounted, visible, refAnchor]);
+    }, [mounted, visible, refAnchor, higher]);
     return { active: mounted && !!refAnchor, style, theme };
 }
 
@@ -1726,7 +1765,7 @@ function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
     return (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClick, onKeyDown: onKeyDown, children: render(element) }));
 }
 function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onHiddenAnchor, onKeydownElement, refAnchor, refList, refSuggestions, rlsTheme }) {
-    const portal = useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor);
+    const portal = useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor, higher);
     const [labels, setLabels] = require$$0.useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle')
@@ -2459,14 +2498,7 @@ function RlsCardComponent({ children, className, outline, rlsTheme }) {
 const RlsCard = require$$0.memo(RlsCardComponent);
 
 const MAX_LIST_HEIGHT_REM$1 = 90;
-const FALLBACK_REM_SIZE$1 = 16;
-function getRemSize$1() {
-    if (typeof window === 'undefined') {
-        return FALLBACK_REM_SIZE$1;
-    }
-    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE$1;
-}
+const VIEWPORT_GAP_REM = 8;
 function suggestionsShallowEqual(a, b) {
     return (a === b ||
         (a.length === b.length && a.every((element, index) => element === b[index])));
@@ -2482,10 +2514,12 @@ function shouldDisplayHigher$1(content, list) {
     if (!content) {
         return false;
     }
+    const remSize = getRemSize$1();
+    const gap = VIEWPORT_GAP_REM * remSize;
     const { top, bottom } = content.getBoundingClientRect();
-    const spaceAbove = top;
-    const spaceBelow = window.innerHeight - bottom;
-    const maxHeight = MAX_LIST_HEIGHT_REM$1 * getRemSize$1();
+    const spaceAbove = top - gap;
+    const spaceBelow = window.innerHeight - bottom - gap;
+    const maxHeight = MAX_LIST_HEIGHT_REM$1 * remSize;
     const desiredHeight = Math.min(list?.scrollHeight || maxHeight, maxHeight);
     if (spaceBelow >= desiredHeight) {
         return false;
@@ -2554,7 +2588,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
             formControl?.setValue(element?.value);
         }
     }, [formControl]);
-    const reconcileFormValue = require$$0.useEffectEvent(() => {
+    const reconcileFormValue = useEventCallback(() => {
         if (!changeValueInternal.current) {
             if (formControl?.value) {
                 const element = collection.find(formControl.value);
@@ -3498,10 +3532,10 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
     const classNamePM = renderClassStatus('rls-picker-clock__zone__value', {
         active: zoneIsPM
     });
-    const refreshClockHour = require$$0.useEffectEvent(() => {
+    const refreshClockHour = useEventCallback(() => {
         refreshClock(hour > 12 ? hour - 12 : hour);
     });
-    const refreshClockMinute = require$$0.useEffectEvent(() => {
+    const refreshClockMinute = useEventCallback(() => {
         refreshClock(minute);
     });
     require$$0.useEffect(() => {
@@ -3765,7 +3799,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
             y: (clientY - rect.top) / rect.height
         };
     }, []);
-    const updateColorOnCanvas = require$$0.useEffectEvent((clientX, clientY) => {
+    const updateColorOnCanvas = useEventCallback((clientX, clientY) => {
         if (!canvasRef.current)
             return;
         const pos = getPositionInElement(canvasRef.current, clientX, clientY);
@@ -3775,7 +3809,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
             v: Math.round(Math.min(1, Math.max(0, 1 - pos.y)) * 100)
         }));
     });
-    const updateHueOnSlider = require$$0.useEffectEvent((clientX, clientY) => {
+    const updateHueOnSlider = useEventCallback((clientX, clientY) => {
         if (!hueRef.current)
             return;
         const pos = getPositionInElement(hueRef.current, clientX, clientY);
@@ -3784,7 +3818,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
             h: Math.round(Math.min(1, Math.max(0, pos.x)) * 360)
         }));
     });
-    const updateAlphaOnSlider = require$$0.useEffectEvent((clientX, clientY) => {
+    const updateAlphaOnSlider = useEventCallback((clientX, clientY) => {
         if (!alphaRef.current)
             return;
         const pos = getPositionInElement(alphaRef.current, clientX, clientY);
@@ -3879,7 +3913,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
     const onHexFocus = require$$0.useCallback(() => {
         hexEditing.current = true;
     }, []);
-    const onHexBlur = require$$0.useEffectEvent(() => {
+    const onHexBlur = useEventCallback(() => {
         hexEditing.current = false;
         const normalized = normalizeHex(hexInput);
         if (normalized) {
@@ -4324,7 +4358,7 @@ function useRelocationOnComponent({ container: containerRef, element: elementRef
         }
         return clientY;
     }
-    const start = require$$0.useEffectEvent((positionX, positionY) => {
+    const start = useEventCallback((positionX, positionY) => {
         dragOffset.current = {
             x: positionX,
             y: positionY
@@ -4335,7 +4369,7 @@ function useRelocationOnComponent({ container: containerRef, element: elementRef
         };
         dragging.current = true;
     });
-    const relocation = require$$0.useEffectEvent((positionX, positionY) => {
+    const relocation = useEventCallback((positionX, positionY) => {
         const clientX = getClientX(positionX);
         const clientY = getClientY(positionY);
         elementRef.current.style.top = `${clientY}px`;
@@ -4388,7 +4422,7 @@ function useRelocationOnComponent({ container: containerRef, element: elementRef
 
 function useResize({ refElement, onResize }) {
     const dimension = require$$0.useRef({ height: 0, width: 0 });
-    const observer = require$$0.useEffectEvent((entries) => {
+    const observer = useEventCallback((entries) => {
         const { height, width } = entries[0].contentRect;
         onResize?.({
             current: dimension.current,
@@ -5132,6 +5166,7 @@ exports.RlsFieldSelect = RlsFieldSelect;
 exports.RlsFieldSelectTemplate = RlsFieldSelectTemplate;
 exports.RlsFieldText = RlsFieldText;
 exports.RlsFormNavigation = RlsFormNavigation;
+exports.RlsHoverSwap = RlsHoverSwap;
 exports.RlsIcon = RlsIcon;
 exports.RlsImage = RlsImage;
 exports.RlsImageChooser = RlsImageChooser;
@@ -5187,6 +5222,7 @@ exports.RlsToolbar = RlsToolbar;
 exports.calculateImgDimension = calculateImgDimension;
 exports.generateThemePalette = generateThemePalette;
 exports.getAppTheme = getAppTheme;
+exports.getRemSize = getRemSize$1;
 exports.hexIsValid = hexIsValid;
 exports.hexToHsl = hexToHsl;
 exports.hexToHsv = hexToHsv;
@@ -5209,6 +5245,7 @@ exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useDesingSystemController = useDesingSystemController;
 exports.useDropdownController = useDropdownController;
+exports.useEventCallback = useEventCallback;
 exports.useFieldAutocomplete = useFieldAutocomplete;
 exports.useFieldList = useFieldList;
 exports.useFieldSelect = useFieldSelect;