@rolster/react-components 19.8.16 → 19.8.18

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]) => {
@@ -1638,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;
@@ -1670,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(() => {
@@ -1695,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);
@@ -1717,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 };
 }
 
@@ -1731,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')
@@ -2464,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])));
@@ -2487,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;
@@ -2551,7 +2580,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
             ...state,
             value: element?.description || ''
         }));
-        changeValueInternal.current = true;
+        changeValueInternal.current = !Object.is(element?.value, formControl?.value);
         if (valueIsDefault) {
             formControl?.setDefaultValue(element?.value);
         }
@@ -2559,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);
@@ -2581,6 +2610,9 @@ function useListController({ suggestions, automatic, formControl, reference }) {
                 if (element) {
                     setFormValue(element);
                 }
+                else if (automatic) {
+                    setFormValue(collection.value[0], true);
+                }
                 else {
                     refreshState((state) => ({ ...state, value: '' }));
                 }
@@ -3503,10 +3535,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(() => {
@@ -3770,7 +3802,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);
@@ -3780,7 +3812,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);
@@ -3789,7 +3821,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);
@@ -3884,7 +3916,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) {
@@ -4329,7 +4361,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
@@ -4340,7 +4372,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`;
@@ -4393,7 +4425,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,
@@ -5193,6 +5225,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;
@@ -5215,6 +5248,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;