@rolster/react-components 19.8.16 → 19.8.17

package/dist/es/index.mjs

@@ -1,4 +1,4 @@
-import require$$0, { memo, useMemo, useState, useRef, useCallback, useEffect, useEffectEvent, createContext, useContext } from 'react';
+import require$$0, { memo, useMemo, useState, useRef, useCallback, useEffect, useInsertionEffect, createContext, useContext } from 'react';
 import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -428,6 +428,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]) => {
@@ -1636,6 +1644,19 @@ const reactI18n = i18n({
     }
 });
 
+function useEventCallback(callback) {
+    const refCallback = useRef(callback);
+    useInsertionEffect(() => {
+        refCallback.current = callback;
+    });
+    return 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;
@@ -1668,14 +1689,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] = useState(false);
     const [style, setStyle] = useState();
     const [theme, setTheme] = useState();
     useEffect(() => {
         setMounted(true);
     }, []);
-    const onAnchorHidden = useEffectEvent(() => {
+    const onAnchorHidden = useEventCallback(() => {
         onHiddenAnchor?.();
     });
     useEffect(() => {
@@ -1693,15 +1722,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);
@@ -1715,7 +1749,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 };
 }
 
@@ -1729,7 +1763,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] = useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle')
@@ -2462,14 +2496,7 @@ function RlsCardComponent({ children, className, outline, rlsTheme }) {
 const RlsCard = 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])));
@@ -2485,10 +2512,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;
@@ -2557,7 +2586,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
             formControl?.setValue(element?.value);
         }
     }, [formControl]);
-    const reconcileFormValue = useEffectEvent(() => {
+    const reconcileFormValue = useEventCallback(() => {
         if (!changeValueInternal.current) {
             if (formControl?.value) {
                 const element = collection.find(formControl.value);
@@ -3501,10 +3530,10 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
     const classNamePM = renderClassStatus('rls-picker-clock__zone__value', {
         active: zoneIsPM
     });
-    const refreshClockHour = useEffectEvent(() => {
+    const refreshClockHour = useEventCallback(() => {
         refreshClock(hour > 12 ? hour - 12 : hour);
     });
-    const refreshClockMinute = useEffectEvent(() => {
+    const refreshClockMinute = useEventCallback(() => {
         refreshClock(minute);
     });
     useEffect(() => {
@@ -3768,7 +3797,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
             y: (clientY - rect.top) / rect.height
         };
     }, []);
-    const updateColorOnCanvas = useEffectEvent((clientX, clientY) => {
+    const updateColorOnCanvas = useEventCallback((clientX, clientY) => {
         if (!canvasRef.current)
             return;
         const pos = getPositionInElement(canvasRef.current, clientX, clientY);
@@ -3778,7 +3807,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
             v: Math.round(Math.min(1, Math.max(0, 1 - pos.y)) * 100)
         }));
     });
-    const updateHueOnSlider = useEffectEvent((clientX, clientY) => {
+    const updateHueOnSlider = useEventCallback((clientX, clientY) => {
         if (!hueRef.current)
             return;
         const pos = getPositionInElement(hueRef.current, clientX, clientY);
@@ -3787,7 +3816,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
             h: Math.round(Math.min(1, Math.max(0, pos.x)) * 360)
         }));
     });
-    const updateAlphaOnSlider = useEffectEvent((clientX, clientY) => {
+    const updateAlphaOnSlider = useEventCallback((clientX, clientY) => {
         if (!alphaRef.current)
             return;
         const pos = getPositionInElement(alphaRef.current, clientX, clientY);
@@ -3882,7 +3911,7 @@ function RlsPickerColorComponent({ color, formControl, onListener, rlsTheme }) {
     const onHexFocus = useCallback(() => {
         hexEditing.current = true;
     }, []);
-    const onHexBlur = useEffectEvent(() => {
+    const onHexBlur = useEventCallback(() => {
         hexEditing.current = false;
         const normalized = normalizeHex(hexInput);
         if (normalized) {
@@ -4327,7 +4356,7 @@ function useRelocationOnComponent({ container: containerRef, element: elementRef
         }
         return clientY;
     }
-    const start = useEffectEvent((positionX, positionY) => {
+    const start = useEventCallback((positionX, positionY) => {
         dragOffset.current = {
             x: positionX,
             y: positionY
@@ -4338,7 +4367,7 @@ function useRelocationOnComponent({ container: containerRef, element: elementRef
         };
         dragging.current = true;
     });
-    const relocation = useEffectEvent((positionX, positionY) => {
+    const relocation = useEventCallback((positionX, positionY) => {
         const clientX = getClientX(positionX);
         const clientY = getClientY(positionY);
         elementRef.current.style.top = `${clientY}px`;
@@ -4391,7 +4420,7 @@ function useRelocationOnComponent({ container: containerRef, element: elementRef
 
 function useResize({ refElement, onResize }) {
     const dimension = useRef({ height: 0, width: 0 });
-    const observer = useEffectEvent((entries) => {
+    const observer = useEventCallback((entries) => {
         const { height, width } = entries[0].contentRect;
         onResize?.({
             current: dimension.current,
@@ -5072,5 +5101,5 @@ function toggleAppTheme() {
     return theme;
 }
 
-export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
+export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, getRemSize$1 as getRemSize, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useEventCallback, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
 //# sourceMappingURL=index.mjs.map