@rio-cloud/rio-uikit 1.7.0 → 1.7.1

package/components/banner/Banner.d.ts

@@ -38,6 +38,12 @@ type BannerProps = {
      * @default true
      */
     border?: boolean;
+    /**
+     * Enables or disables initial animation.
+     *
+     * @default true
+     */
+    initialAnimation?: boolean;
     /**
      * Additional classname added to the wrapper element.
      */

package/components/banner/Banner.js

@@ -1,21 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, createContext } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { useState, useEffect, createContext, useRef } from 'react';
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
 import classNames from 'classnames';
 import Card from '../card/Card';
 import Button from '../button/Button';
-import FadeExpander from '../fade/FadeExpander';
 import BannerPageActions from './BannerActions';
 import BannerPageContent from './BannerContent';
 import BannerPageIcon from './BannerIcon';
 import BannerPage from './BannerPage';
 const BannerContext = createContext(undefined);
 const Banner = (props) => {
-    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, className = '', children, ...remainingProps } = props;
+    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, initialAnimation = true, className = '', children, ...remainingProps } = props;
     const pages = Array.isArray(children) ? children : [children];
     const pageAmount = pages.length;
     const hasMultiplePages = pageAmount > 1;
     const [currentPage, setCurrentPage] = useState(0);
+    const shouldReduceMotion = useReducedMotion();
+    const hasAnimation = !shouldReduceMotion && initialAnimation;
+    const contentRef = useRef(null);
+    const [contentHeight, setContentHeight] = useState(0);
     // biome-ignore lint/correctness/useExhaustiveDependencies: "currentPage" resets interval on manual page change
     useEffect(() => {
         if (!show || pageAmount === 1) {
@@ -26,6 +29,24 @@ const Banner = (props) => {
         }, pageTimeout);
         return () => clearInterval(interval);
     }, [pageAmount, pageTimeout, show, currentPage]);
+    // Update height measurement after layout is complete
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (!contentRef.current) {
+            return;
+        }
+        // Use ResizeObserver to get accurate measurements after layout
+        const resizeObserver = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry) {
+                // Use getBoundingClientRect for most accurate height
+                const height = entry.target.getBoundingClientRect().height;
+                setContentHeight(height);
+            }
+        });
+        resizeObserver.observe(contentRef.current);
+        return () => resizeObserver.disconnect();
+    }, [show, currentPage]);
     const nextPage = () => {
         if (hasMultiplePages) {
             setCurrentPage(prev => (prev + 1) % pageAmount);
@@ -37,10 +58,14 @@ const Banner = (props) => {
         }
     };
     const cardClasses = classNames('Banner display-flex text-color-darker overflow-hidden', 'position-relative', !border && 'border-color-white', className);
-    return (_jsx(BannerContext.Provider, { value: { nextPage, prevPage }, children: _jsx(FadeExpander, { show: show, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { exitBeforeEnter: true, children: _jsx(motion.div, { initial: { opacity: 0, x: 100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -100 }, layout: true, transition: {
-                                        duration: 1.5,
-                                        ease: [0.25, 1, 0.5, 1], // Custom cubic bezier: fast start, slow end
-                                    }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && (_jsx("div", { className: 'margin-5', children: _jsx("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: _jsxs("div", { className: 'display-flex', children: [_jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), _jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && (_jsx("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: _jsx(Button, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) }));
+    return (_jsx(BannerContext.Provider, { value: { nextPage, prevPage }, children: _jsx(AnimatePresence, { children: show && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                    height: { duration: 0.2 },
+                    opacity: { duration: 0.2 },
+                    ease: 'easeInOut',
+                }, children: _jsx("div", { ref: contentRef, style: { position: 'relative' }, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { exitBeforeEnter: true, children: _jsx(motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
+                                                duration: 1.5,
+                                                ease: [0.25, 1, 0.5, 1],
+                                            }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && (_jsx("div", { className: 'margin-5', children: _jsx("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: _jsxs("div", { className: 'display-flex', children: [_jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), _jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && (_jsx("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: _jsx(Button, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) })) }) }));
 };
 Banner.Page = BannerPage;
 Banner.Icon = BannerPageIcon;

package/components/formLabel/FormLabel.js

@@ -1,17 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 const FormLabel = (props) => {
     const { className = '', children, supportingText, ...remainingProps } = props;
+    const elementRef = useRef(null);
+    const [parentSize, setParentSize] = useState(null);
     const isLabel = 'htmlFor' in remainingProps;
+    useEffect(() => {
+        if (!elementRef.current) {
+            return;
+        }
+        const parent = elementRef.current.parentElement;
+        if (!parent) {
+            return;
+        }
+        if (parent.classList.contains('form-group-lg')) {
+            setParentSize('lg');
+        }
+        else if (parent.classList.contains('form-group-sm')) {
+            setParentSize('sm');
+        }
+    }, []);
+    const supportingTextClasses = classNames('text-color-gray', 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
     if (isLabel) {
-        const labelClasses = classNames('display-inline-flex flex-wrap justify-content-between width-100pct', className);
+        const labelClasses = classNames(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
         return (
         // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-        _jsxs("label", { ...remainingProps, className: labelClasses, children: [_jsx("span", { children: children }), supportingText && _jsx("span", { className: 'text-italic text-size-12 text-color-gray', children: supportingText })] }));
+        _jsxs("label", { ref: elementRef, ...remainingProps, className: labelClasses, children: [_jsx("span", { children: children }), supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
     }
-    const classes = classNames('text-size-12 text-color-dark', 'max-width-100pct', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
+    const classes = classNames('text-color-dark', 'max-width-100pct', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12', !supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
     return (
     // @ts-ignore
-    _jsxs("div", { ...remainingProps, className: classes, children: [children, supportingText && _jsx("span", { className: 'text-italic text-size-12 text-color-gray', children: supportingText })] }));
+    _jsxs("div", { ref: elementRef, ...remainingProps, className: classes, children: [children, supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
 };
 export default FormLabel;

package/components/listMenu/ListMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 import debounce from 'lodash/fp/debounce';
 import classNames from 'classnames';
@@ -38,11 +38,13 @@ const ListMenu = (props) => {
         }
     });
     // Convert the menu to an expandable panel for smaller screens
-    const handleResize = debounce(RESIZE_THROTTLING)(() => {
+    const handleMobileSize = debounce(RESIZE_THROTTLING)(() => {
         buildMobileHeader();
         setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
     });
-    useWindowResize(handleResize);
+    // Render a dropdown menu on mobile on mount
+    useEffect(handleMobileSize, []);
+    useWindowResize(handleMobileSize);
     const focusInput = () => {
         inputRef.current?.focus();
     };
@@ -56,7 +58,8 @@ const ListMenu = (props) => {
     useEffectOnce(() => {
         focusFilter && focusInput();
     });
-    useLayoutEffect(() => buildMobileHeader, [menuItems]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => buildMobileHeader, [menuItems]);
     const handleClear = () => focusFilter && focusInput();
     const handleFilterChange = (value) => {
         setFilterValue(value);

package/components/mapMarker/SingleMapMarker.js

@@ -17,7 +17,7 @@ const SingleMapMarker = (props) => {
     const largeAnchor = anchorSize === 'lg';
     const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable', className);
     const anchorClasses = classNames('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
-    const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
+    const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', typeof name === 'string' && name.length === 1 && 'single-letter', cursor);
     const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
     return (_jsx("div", { className: classes, style: { ...style, color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-'), children: _jsxs("div", { className: 'rio-map-marker-translate', children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", { className: singleClasses, children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", { className: 'rio-map-name', children: name }), exceptionCount > 0 && _jsx("div", { className: 'rio-map-bubble exception', children: exceptionCount }), warningCount > 0 && _jsx("div", { className: 'rio-map-bubble warning', children: warningCount })] }), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", { className: anchorClasses, children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) })] }) }));
 };

package/lib/es/components/banner/Banner.d.ts

@@ -38,6 +38,12 @@ type BannerProps = {
      * @default true
      */
     border?: boolean;
+    /**
+     * Enables or disables initial animation.
+     *
+     * @default true
+     */
+    initialAnimation?: boolean;
     /**
      * Additional classname added to the wrapper element.
      */

package/lib/es/components/banner/Banner.js

@@ -7,18 +7,21 @@ const framer_motion_1 = require("framer-motion");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Card_1 = tslib_1.__importDefault(require("../card/Card"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
-const FadeExpander_1 = tslib_1.__importDefault(require("../fade/FadeExpander"));
 const BannerActions_1 = tslib_1.__importDefault(require("./BannerActions"));
 const BannerContent_1 = tslib_1.__importDefault(require("./BannerContent"));
 const BannerIcon_1 = tslib_1.__importDefault(require("./BannerIcon"));
 const BannerPage_1 = tslib_1.__importDefault(require("./BannerPage"));
 const BannerContext = (0, react_1.createContext)(undefined);
 const Banner = (props) => {
-    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, className = '', children, ...remainingProps } = props;
+    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, initialAnimation = true, className = '', children, ...remainingProps } = props;
     const pages = Array.isArray(children) ? children : [children];
     const pageAmount = pages.length;
     const hasMultiplePages = pageAmount > 1;
     const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    const shouldReduceMotion = (0, framer_motion_1.useReducedMotion)();
+    const hasAnimation = !shouldReduceMotion && initialAnimation;
+    const contentRef = (0, react_1.useRef)(null);
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
     // biome-ignore lint/correctness/useExhaustiveDependencies: "currentPage" resets interval on manual page change
     (0, react_1.useEffect)(() => {
         if (!show || pageAmount === 1) {
@@ -29,6 +32,24 @@ const Banner = (props) => {
         }, pageTimeout);
         return () => clearInterval(interval);
     }, [pageAmount, pageTimeout, show, currentPage]);
+    // Update height measurement after layout is complete
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.useEffect)(() => {
+        if (!contentRef.current) {
+            return;
+        }
+        // Use ResizeObserver to get accurate measurements after layout
+        const resizeObserver = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry) {
+                // Use getBoundingClientRect for most accurate height
+                const height = entry.target.getBoundingClientRect().height;
+                setContentHeight(height);
+            }
+        });
+        resizeObserver.observe(contentRef.current);
+        return () => resizeObserver.disconnect();
+    }, [show, currentPage]);
     const nextPage = () => {
         if (hasMultiplePages) {
             setCurrentPage(prev => (prev + 1) % pageAmount);
@@ -40,10 +61,14 @@ const Banner = (props) => {
         }
     };
     const cardClasses = (0, classnames_1.default)('Banner display-flex text-color-darker overflow-hidden', 'position-relative', !border && 'border-color-white', className);
-    return ((0, jsx_runtime_1.jsx)(BannerContext.Provider, { value: { nextPage, prevPage }, children: (0, jsx_runtime_1.jsx)(FadeExpander_1.default, { show: show, children: (0, jsx_runtime_1.jsxs)(Card_1.default, { className: cardClasses, padding: 20, ...remainingProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 overflow-hidden', children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, x: 100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -100 }, layout: true, transition: {
-                                        duration: 1.5,
-                                        ease: [0.25, 1, 0.5, 1], // Custom cubic bezier: fast start, slow end
-                                    }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && ((0, jsx_runtime_1.jsx)("div", { className: 'margin-5', children: (0, jsx_runtime_1.jsx)("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && ((0, jsx_runtime_1.jsx)("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(BannerContext.Provider, { value: { nextPage, prevPage }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                    height: { duration: 0.2 },
+                    opacity: { duration: 0.2 },
+                    ease: 'easeInOut',
+                }, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, style: { position: 'relative' }, children: (0, jsx_runtime_1.jsxs)(Card_1.default, { className: cardClasses, padding: 20, ...remainingProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 overflow-hidden', children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
+                                                duration: 1.5,
+                                                ease: [0.25, 1, 0.5, 1],
+                                            }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && ((0, jsx_runtime_1.jsx)("div", { className: 'margin-5', children: (0, jsx_runtime_1.jsx)("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && ((0, jsx_runtime_1.jsx)("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) })) }) }));
 };
 Banner.Page = BannerPage_1.default;
 Banner.Icon = BannerIcon_1.default;

package/lib/es/components/formLabel/FormLabel.js

@@ -2,19 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const FormLabel = (props) => {
     const { className = '', children, supportingText, ...remainingProps } = props;
+    const elementRef = (0, react_1.useRef)(null);
+    const [parentSize, setParentSize] = (0, react_1.useState)(null);
     const isLabel = 'htmlFor' in remainingProps;
+    (0, react_1.useEffect)(() => {
+        if (!elementRef.current) {
+            return;
+        }
+        const parent = elementRef.current.parentElement;
+        if (!parent) {
+            return;
+        }
+        if (parent.classList.contains('form-group-lg')) {
+            setParentSize('lg');
+        }
+        else if (parent.classList.contains('form-group-sm')) {
+            setParentSize('sm');
+        }
+    }, []);
+    const supportingTextClasses = (0, classnames_1.default)('text-color-gray', 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
     if (isLabel) {
-        const labelClasses = (0, classnames_1.default)('display-inline-flex flex-wrap justify-content-between width-100pct', className);
+        const labelClasses = (0, classnames_1.default)(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
         return (
         // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-        (0, jsx_runtime_1.jsxs)("label", { ...remainingProps, className: labelClasses, children: [(0, jsx_runtime_1.jsx)("span", { children: children }), supportingText && (0, jsx_runtime_1.jsx)("span", { className: 'text-italic text-size-12 text-color-gray', children: supportingText })] }));
+        (0, jsx_runtime_1.jsxs)("label", { ref: elementRef, ...remainingProps, className: labelClasses, children: [(0, jsx_runtime_1.jsx)("span", { children: children }), supportingText && (0, jsx_runtime_1.jsx)("span", { className: supportingTextClasses, children: supportingText })] }));
     }
-    const classes = (0, classnames_1.default)('text-size-12 text-color-dark', 'max-width-100pct', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
+    const classes = (0, classnames_1.default)('text-color-dark', 'max-width-100pct', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12', !supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
     return (
     // @ts-ignore
-    (0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: classes, children: [children, supportingText && (0, jsx_runtime_1.jsx)("span", { className: 'text-italic text-size-12 text-color-gray', children: supportingText })] }));
+    (0, jsx_runtime_1.jsxs)("div", { ref: elementRef, ...remainingProps, className: classes, children: [children, supportingText && (0, jsx_runtime_1.jsx)("span", { className: supportingTextClasses, children: supportingText })] }));
 };
 exports.default = FormLabel;

package/lib/es/components/listMenu/ListMenu.js

@@ -41,11 +41,13 @@ const ListMenu = (props) => {
         }
     });
     // Convert the menu to an expandable panel for smaller screens
-    const handleResize = (0, debounce_1.default)(RESIZE_THROTTLING)(() => {
+    const handleMobileSize = (0, debounce_1.default)(RESIZE_THROTTLING)(() => {
         buildMobileHeader();
         setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
     });
-    (0, useWindowResize_1.default)(handleResize);
+    // Render a dropdown menu on mobile on mount
+    (0, react_1.useEffect)(handleMobileSize, []);
+    (0, useWindowResize_1.default)(handleMobileSize);
     const focusInput = () => {
         inputRef.current?.focus();
     };
@@ -59,7 +61,8 @@ const ListMenu = (props) => {
     (0, useEffectOnce_1.default)(() => {
         focusFilter && focusInput();
     });
-    (0, react_1.useLayoutEffect)(() => buildMobileHeader, [menuItems]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.useEffect)(() => buildMobileHeader, [menuItems]);
     const handleClear = () => focusFilter && focusInput();
     const handleFilterChange = (value) => {
         setFilterValue(value);

package/lib/es/components/mapMarker/SingleMapMarker.js

@@ -20,7 +20,7 @@ const SingleMapMarker = (props) => {
     const largeAnchor = anchorSize === 'lg';
     const classes = (0, classnames_1.default)(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable', className);
     const anchorClasses = (0, classnames_1.default)('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
-    const singleClasses = (0, classnames_1.default)('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
+    const singleClasses = (0, classnames_1.default)('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', typeof name === 'string' && name.length === 1 && 'single-letter', cursor);
     const markerBackgroundColor = `var(${mapTypes_1.markerColorMapping[markerColor]})`;
     return ((0, jsx_runtime_1.jsx)("div", { className: classes, style: { ...style, color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-'), children: (0, jsx_runtime_1.jsxs)("div", { className: 'rio-map-marker-translate', children: [!anchorOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: singleClasses, children: [(0, jsx_runtime_1.jsx)(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-name', children: name }), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-bubble exception', children: exceptionCount }), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-bubble warning', children: warningCount })] }), (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-anchor-arrow' })] })), (0, jsx_runtime_1.jsx)("div", { className: anchorClasses, children: anchorIconName && largeAnchor && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${anchorIconName}` }) })] }) }));
 };

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.7.0"
+    "version": "1.7.1"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.7.0",
+    "version": "1.7.1",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.7.0"
+    "version": "1.7.1"
 }