@rio-cloud/rio-uikit 1.1.0 → 1.2.1

package/lib/es/components/mapMarker/SingleMapMarker.d.ts

@@ -114,6 +114,10 @@ export type SingleMapMarkerProps = {
      * Shows only the anchor without the rest of the marker.
      */
     anchorOnly?: boolean;
+    /**
+     * Marker cursor
+     */
+    cursor?: 'cursor-pointer' | 'cursor-grab' | 'cursor-not-allowed';
 };
 declare const SingleMapMarker: (props: SingleMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleMapMarker;

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

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

package/lib/es/components/selects/DropdownHeader.d.ts

@@ -3,6 +3,7 @@ export type DropdownHeaderProps = {
     icon?: React.ReactNode;
     center?: boolean;
     label: string | React.ReactNode;
+    className?: string;
 };
 declare const DropdownHeader: (props: DropdownHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownHeader;

package/lib/es/components/selects/DropdownHeader.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
 require("react");
 const DropdownHeader = (props) => {
-    const { icon, label, center = true } = props;
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
+    const { icon, label, center = true, className = '' } = props;
+    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''} ${className}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
 };
 exports.default = DropdownHeader;

package/lib/es/components/selects/Multiselect.js

@@ -77,7 +77,7 @@ const Multiselect = (props) => {
         const wrapperClassNames = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
         const showPlaceholder = (0, isEmpty_1.default)(selectedItemIds) && !showUnselectedItemIcons;
         const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
-        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle }, { children: [showPlaceholder ? (0, jsx_runtime_1.jsx)(MultiselectTogglePlaceholder_1.default, { placeholder: placeholder }) : renderSelection(), showFilter && !multiline && renderFilter(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
+        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle }, { children: [showPlaceholder ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MultiselectTogglePlaceholder_1.default, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
         if (!inputAddon && !errorMessage && !warningMessage) {
             return toggleButton;
         }

package/lib/es/components/selects/MultiselectToggleFilter.js

@@ -8,7 +8,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const MultiselectToggleFilter = (props) => {
     const { isActive, selectedItemIds, filterValue, multiline, onFilterChange } = props;
-    const inputClasses = (0, classnames_1.default)('multiselect-filter-input', (0, isEmpty_1.default)(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active', multiline && 'padding-left-0');
+    const inputClasses = (0, classnames_1.default)('multiselect-filter-input', (0, isEmpty_1.default)(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active');
     return ((0, jsx_runtime_1.jsx)("input", { type: 'text', role: 'searchbox', className: inputClasses, 
         // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
         autoFocus: true, onChange: onFilterChange, defaultValue: filterValue }));

package/lib/es/components/states/CustomState.js

@@ -21,9 +21,9 @@ const renderButtons = (buttons) => {
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: (0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttons[0])) })));
     }
     if (buttons.length === 2) {
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: buttons.map((buttonProps, index) => ((0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttonProps), index))) })));
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar margin-top-20 justify-content-center-xs' }, { children: buttons.map((buttonProps, index) => ((0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttonProps), index))) })));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: [(0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttons[0]), '1'), (0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttons[1]), '2')] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar' }, { children: buttons.map((buttonProps, index) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar margin-top-20 justify-content-center-xs' }, { children: [(0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttons[0]), '1'), (0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttons[1]), '2')] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar' }, { children: buttons.map((buttonProps, index) => {
                     return index > 1 && (0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttonProps), index);
                 }) }))] }));
 };

package/lib/es/hooks/useAfterMount.js

@@ -8,12 +8,16 @@ const react_1 = require("react");
  * @param deps The deps of the callback (the same as if you were using useCallback or useEffect).
  */
 const useAfterMount = (callback, deps) => {
-    const componentJustMountedRef = (0, react_1.useRef)(true);
+    const hasMountedRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
-        if (!componentJustMountedRef.current) {
-            return callback();
+        if (hasMountedRef.current) {
+            // Run the callback only after the first render and
+            // whenever the dependencies change afterwards
+            callback();
+        }
+        else {
+            hasMountedRef.current = true;
         }
-        componentJustMountedRef.current = false;
     }, deps);
 };
 exports.default = useAfterMount;

package/lib/es/utils/deviceUtils.d.ts

@@ -7,6 +7,7 @@ export declare const SCREEN_XL = 1700;
 export declare const isMobileScreen: () => boolean;
 export declare const isMobile: () => boolean;
 export declare const isDesktop: () => boolean;
+export declare const isMac: () => boolean;
 export declare const isRetinaDevice: () => boolean;
 export declare const inIframe: () => boolean;
 export declare const toggleZoomOnMobile: () => void;

package/lib/es/utils/deviceUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toggleZoomOnMobile = exports.inIframe = exports.isRetinaDevice = exports.isDesktop = exports.isMobile = exports.isMobileScreen = exports.SCREEN_XL = exports.SCREEN_LG = exports.SCREEN_MD = exports.SCREEN_SM = exports.MOBILE_SCREEN = exports.hasTouch = void 0;
+exports.toggleZoomOnMobile = exports.inIframe = exports.isRetinaDevice = exports.isMac = exports.isDesktop = exports.isMobile = exports.isMobileScreen = exports.SCREEN_XL = exports.SCREEN_LG = exports.SCREEN_MD = exports.SCREEN_SM = exports.MOBILE_SCREEN = exports.hasTouch = void 0;
 const cssuseragent_1 = require("./cssuseragent");
 // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not,
 // we need to initialize only when html really exists. This avoids issues when running the UIKIT in a web-worker
@@ -42,6 +42,8 @@ const isMobile = () => document === null || document === void 0 ? void 0 : docum
 exports.isMobile = isMobile;
 const isDesktop = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-desktop');
 exports.isDesktop = isDesktop;
+const isMac = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-desktop-macintosh');
+exports.isMac = isMac;
 const isRetinaDevice = () => window.devicePixelRatio > 1;
 exports.isRetinaDevice = isRetinaDevice;
 const inIframe = () => {

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.1.0"
+    "version": "1.2.1"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "1.1.0",
+    "version": "1.2.1",
     "description": "The RIO UIKIT component library",
     "repository": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/utils/deviceUtils.d.ts

@@ -7,6 +7,7 @@ export declare const SCREEN_XL = 1700;
 export declare const isMobileScreen: () => boolean;
 export declare const isMobile: () => boolean;
 export declare const isDesktop: () => boolean;
+export declare const isMac: () => boolean;
 export declare const isRetinaDevice: () => boolean;
 export declare const inIframe: () => boolean;
 export declare const toggleZoomOnMobile: () => void;

package/utils/deviceUtils.js

@@ -35,6 +35,7 @@ export const SCREEN_XL = 1700;
 export const isMobileScreen = () => window.matchMedia(`(max-width: ${MOBILE_SCREEN}px)`).matches;
 export const isMobile = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-mobile');
 export const isDesktop = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-desktop');
+export const isMac = () => document === null || document === void 0 ? void 0 : document.documentElement.classList.contains('ua-desktop-macintosh');
 export const isRetinaDevice = () => window.devicePixelRatio > 1;
 export const inIframe = () => {
     try {

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.1.0"
+    "version": "1.2.1"
 }