@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/utils/fuelTypeUtils.js

@@ -0,0 +1,128 @@
+const fuelGroupMap = {
+    unknown: 'unknown',
+    gas: 'liquid', // Gasoline/petrol
+    diesel: 'liquid', // Diesel
+    kerosene: 'liquid', // Kerosene
+    heavy_fuel_oil: 'liquid', // Heavy Fuel Oil
+    methanol: 'gas', // Methanol
+    ethanol: 'gas', // Ethanol
+    lpg: 'gas', // Liquefied Petroleum Gas (LPG)
+    cng: 'gas', // Compressed Natural Gas (CNG)
+    propane: 'gas', // Propane
+    ng: 'gas', // Natural Gas (NG)
+    ng_compressed: 'gas', // Natural Gas (Compressed or Liquefied Natural Gas)
+    electric: 'electric', // Battery/electric
+    bi_fuel_gas: 'hybrid', // Bi-fuel vehicle using gasoline
+    bi_fuel_methanol: 'hybrid', // Bi-fuel vehicle using methanol
+    bi_fuel_ethanol: 'hybrid', // Bi-fuel vehicle using ethanol
+    bi_fuel_lpg: 'hybrid', // Bi-fuel vehicle using LPG
+    bi_fuel_cng: 'hybrid', // Bi-fuel vehicle using CNG
+    bi_fuel_ng: 'hybrid', // Bi-fuel vehicle using NG
+    bi_fuel_diesel: 'hybrid', // Bi-fuel using diesel
+    bi_fuel_propane: 'hybrid', // Bi-fuel vehicle using propane
+    bi_fuel_battery: 'hybrid', // Bi-fuel vehicle using battery
+    bi_fuel_battery_combustion: 'hybrid', // Bi-fuel vehicle using battery and combustion
+    hybrid_gas: 'hybrid', // Hybrid vehicle using gasoline engine
+    hybrid_gas_ethanol: 'hybrid', // Hybrid vehicle using gasoline engine on ethanol
+    hybrid_diesel: 'hybrid', // Hybrid vehicle using diesel engine
+    hybrid_battery: 'hybrid', // Hybrid vehicle using battery
+    hybrid_battery_combustion: 'hybrid', // Hybrid vehicle using battery and combustion
+    hybrid_regeneration_mode: 'hybrid', // Hybrid vehicle in regeneration mode
+    dual_fuel_diesel_cng: 'hybrid', // Dual Fuel – Diesel and CNG
+    dual_fuel_diesel_lng: 'hybrid', // Dual Fuel – Diesel and LNG
+    hydrogen: 'hydrogen', // Hydrogen Internal Combustion
+    fuel_cell_hydrogen: 'hydrogen', // Fuel Cell Utilizing Hydrogen Engine
+};
+/**
+ * Maps each fuel type group to its representative icon.
+ *
+ * This icon can be used to visually identify the group in the UI,
+ * such as in filter buttons or labels.
+ */
+export const fuelTypeGroupIcons = {
+    liquid: 'rioglyph-fuel-liquid',
+    gas: 'rioglyph-fuel-gas',
+    electric: 'rioglyph-fuel-electric',
+    hydrogen: 'rioglyph-fuel-hydrogen',
+    hybrid: 'rioglyph-fuel-mix',
+    unknown: 'rioglyph-question',
+};
+/**
+ * List of all defined fuel type groups (excluding "unknown").
+ *
+ * Used to render UI elements like filter buttons or fuel group selectors.
+ */
+export const fuelTypeGroups = ['liquid', 'gas', 'electric', 'hydrogen', 'hybrid'];
+/**
+ * Returns the icon for a given fuel type group.
+ *
+ * @param fuelTypeGroup - The fuel group to get the icon for.
+ * @returns The corresponding icon for the group.
+ *
+ * @example
+ * getFuelTypeGroupIcon('gas') // → 'rioglyph-fuel-gas'
+ */
+export const getFuelTypeGroupIcon = (fuelTypeGroup) => fuelTypeGroupIcons[fuelTypeGroup];
+/**
+ * Returns the representative icon for a specific fuel type.
+ *
+ * This function maps a fuel type to its logical fuel group,
+ * and returns the icon associated with that group.
+ *
+ * @param fuelType - The specific fuel type of the item. Default is 'unknown'.
+ * @returns The icon associated with the resolved fuel group.
+ *
+ * @example
+ * getFuelIcon('cng') // → 'rioglyph-fuel-gas'
+ */
+export const getFuelIcon = (fuelType = 'unknown') => {
+    const group = fuelGroupMap[fuelType] ?? 'unknown';
+    return fuelTypeGroupIcons[group] ?? fuelTypeGroupIcons.unknown;
+};
+/**
+ * Filters a list of items by fuel group.
+ *
+ * @param items - The list of items to filter.
+ * @param activeGroups - The selected fuel type groups to include in the result.
+ * @param getFuelType - Function to extract the fuel type from an item.
+ * @returns The filtered list containing only items that belong to one of the specified fuel groups.
+ *
+ * @example
+ * filterByFuelTypeGroup(vehicles, ['electric'], v => v.fuelType);
+ */
+export const filterByFuelTypeGroup = (items, activeGroups, getFuelType) => {
+    if (activeGroups.length === 0) {
+        return items;
+    }
+    return items.filter(item => {
+        const fuelType = getFuelType(item);
+        const group = fuelType ? (fuelGroupMap[fuelType] ?? 'unknown') : 'unknown';
+        return activeGroups.includes(group);
+    });
+};
+/**
+ * Counts how many items belong to each fuel type group.
+ *
+ * @param items - The list of items to count.
+ * @param getFuelType - Function to extract the fuel type from an item.
+ * @returns An object mapping each fuel type group to its count.
+ *
+ * @example
+ * countFuelTypeGroups(vehicles, v => v.fuelType);
+ */
+export const countFuelTypeGroups = (items, getFuelType) => {
+    const counts = {
+        liquid: 0,
+        gas: 0,
+        electric: 0,
+        hydrogen: 0,
+        hybrid: 0,
+        unknown: 0,
+    };
+    for (const item of items) {
+        const fuelType = getFuelType(item);
+        const group = fuelType ? (fuelGroupMap[fuelType] ?? 'unknown') : 'unknown';
+        counts[group]++;
+    }
+    return counts;
+};

package/src/utils/getDropDirection.d.ts

@@ -0,0 +1,5 @@
+declare const getDropDirection: (toggleNode: HTMLElement | null, menuNode: HTMLElement | null) => {
+    dropup: boolean;
+    pullRight: boolean;
+};
+export default getDropDirection;

package/src/utils/getDropDirection.js

@@ -0,0 +1,29 @@
+const ADDITIONAL_SPACING_IN_PX = 10;
+// It requires the DOM node for the toggle (e.g. the dropdown button) and the DOM element
+// that shall be used to calculate remaining space (i.e. the dropdown menu)
+const getDropDirection = (toggleNode, menuNode) => {
+    if (!toggleNode || !menuNode) {
+        return {
+            dropup: false,
+            pullRight: false,
+        };
+    }
+    const clientRect = toggleNode.getBoundingClientRect();
+    const pageX = clientRect.x;
+    const pageY = clientRect.y;
+    const toggleHeight = toggleNode.offsetHeight;
+    // menu has its height and width already when closed because visibility is collapse
+    const menuWidth = menuNode.offsetWidth;
+    const menuHeight = menuNode.offsetHeight;
+    const spaceUp = pageY - toggleHeight - menuHeight - window.scrollY;
+    const spaceDown = window.innerHeight - (pageY + menuHeight + toggleHeight + ADDITIONAL_SPACING_IN_PX);
+    const spaceLeft = pageX - menuWidth - window.scrollX;
+    const spaceRight = window.innerWidth - (pageX + menuWidth);
+    const dropup = spaceDown < 0 && (spaceUp >= 0 || spaceUp > spaceDown);
+    const pullRight = spaceRight < 0 && (spaceLeft >= 0 || spaceLeft > spaceRight);
+    return {
+        dropup,
+        pullRight,
+    };
+};
+export default getDropDirection;

package/src/utils/getWidthInBoundaries.d.ts

@@ -0,0 +1,2 @@
+declare const getWidthInBoundaries: (minWidth: number, maxWidth: number, width: number) => number;
+export default getWidthInBoundaries;

package/src/utils/getWidthInBoundaries.js

@@ -0,0 +1,13 @@
+const getWidthInBoundaries = (minWidth, maxWidth, width) => {
+    if (width > 0 && width < minWidth) {
+        return minWidth;
+    }
+    if (width > 0 && width > maxWidth) {
+        return maxWidth;
+    }
+    if (width > 0 && width > maxWidth) {
+        return maxWidth;
+    }
+    return width;
+};
+export default getWidthInBoundaries;

package/src/utils/hasUtilityClass.d.ts

@@ -0,0 +1,30 @@
+declare const hasAlignContentClass: (classes: string) => boolean;
+declare const hasAlignItemsClass: (classes: string) => boolean;
+declare const hasAlignSelfClass: (classes: string) => boolean;
+declare const hasBgClass: (classes: string) => boolean;
+declare const hasBorderClass: (classes: string) => boolean;
+declare const hasBorderStyleClass: (classes: string) => boolean;
+declare const hasBorderWidthClass: (classes: string) => boolean;
+declare const hasCursorClass: (classes: string) => boolean;
+declare const hasDisplayClass: (classes: string) => boolean;
+declare const hasFlexClass: (classes: string) => boolean;
+declare const hasGapClass: (classes: string) => boolean;
+declare const hasHeightClass: (classes: string) => boolean;
+declare const hasHoverBgClass: (classes: string) => boolean;
+declare const hasHoverOpacityClass: (classes: string) => boolean;
+declare const hasHoverScaleClass: (classes: string) => boolean;
+declare const hasHoverTextColorClass: (classes: string) => boolean;
+declare const hasMarginClass: (classes: string) => boolean;
+declare const hasMaxHeightClass: (classes: string) => boolean;
+declare const hasMinHeightClass: (classes: string) => boolean;
+declare const hasOpacityClass: (classes: string) => boolean;
+declare const hasOverflowClass: (classes: string) => boolean;
+declare const hasPaddingClass: (classes: string) => boolean;
+declare const hasRioglyphClass: (classes: string) => boolean;
+declare const hasRoundedClass: (classes: string) => boolean;
+declare const hasScaleClass: (classes: string) => boolean;
+declare const hasSpaceClass: (classes: string) => boolean;
+declare const hasTextColorClass: (classes: string) => boolean;
+declare const hasTextSizeClass: (classes: string) => boolean;
+declare const hasUserSelectClass: (classes: string) => boolean;
+export { hasAlignContentClass, hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasBorderStyleClass, hasBorderWidthClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasGapClass, hasHeightClass, hasHoverBgClass, hasHoverOpacityClass, hasHoverScaleClass, hasHoverTextColorClass, hasMarginClass, hasMaxHeightClass, hasMinHeightClass, hasOpacityClass, hasOverflowClass, hasPaddingClass, hasRioglyphClass, hasRoundedClass, hasScaleClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, };

package/src/utils/hasUtilityClass.js

@@ -0,0 +1,40 @@
+const hasClass = (utilityClass) => {
+    return (classes) => {
+        if (classes.includes(utilityClass)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+};
+const hasAlignContentClass = hasClass('align-content-');
+const hasAlignItemsClass = hasClass('align-items-');
+const hasAlignSelfClass = hasClass('align-self');
+const hasBgClass = hasClass('bg-');
+const hasBorderClass = hasClass('border-');
+const hasBorderStyleClass = hasClass('border-style-');
+const hasBorderWidthClass = hasClass('border-width');
+const hasCursorClass = hasClass('cursor-');
+const hasDisplayClass = hasClass('display-');
+const hasFlexClass = hasClass('flex-');
+const hasGapClass = hasClass('gap-');
+const hasHeightClass = hasClass('height-');
+const hasHoverBgClass = hasClass('hover-bg-');
+const hasHoverOpacityClass = hasClass('hover-opacity-');
+const hasHoverScaleClass = hasClass('hover-scale-');
+const hasHoverTextColorClass = hasClass('hover-text-color-');
+const hasMarginClass = hasClass('margin-');
+const hasMaxHeightClass = hasClass('max-height-');
+const hasMinHeightClass = hasClass('min-height-');
+const hasOpacityClass = hasClass('opacity-');
+const hasOverflowClass = hasClass('overflow-');
+const hasPaddingClass = hasClass('padding-');
+const hasRioglyphClass = hasClass('rioglyph-');
+const hasRoundedClass = hasClass('rounded-');
+const hasScaleClass = hasClass('scale-');
+const hasSpaceClass = hasClass('space-');
+const hasTextColorClass = hasClass('text-color-');
+const hasTextSizeClass = hasClass('text-size');
+const hasUserSelectClass = hasClass('user-select-');
+export { hasAlignContentClass, hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasBorderStyleClass, hasBorderWidthClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasGapClass, hasHeightClass, hasHoverBgClass, hasHoverOpacityClass, hasHoverScaleClass, hasHoverTextColorClass, hasMarginClass, hasMaxHeightClass, hasMinHeightClass, hasOpacityClass, hasOverflowClass, hasPaddingClass, hasRioglyphClass, hasRoundedClass, hasScaleClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, };

package/src/utils/init/checkForReleaseVersion.d.ts

@@ -0,0 +1 @@
+export declare const checkForReleaseVersion: () => Promise<void>;

package/src/utils/init/checkForReleaseVersion.js

@@ -0,0 +1,17 @@
+import { version } from '../../version.json';
+import { getConsoleStyle } from './styledLogs';
+const versionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+export const checkForReleaseVersion = async () => {
+    const logStyled = (message) => console.log('%c%s', getConsoleStyle(), message);
+    try {
+        const response = await fetch(versionsListUrl);
+        const { latest_release } = await response.json();
+        if (latest_release > version) {
+            logStyled(`🆕 You are using version ${version} of the UIKIT while the latest released version is ` +
+                `${latest_release}. Please consider updating asap.`);
+        }
+    }
+    catch (error) {
+        logStyled('Failed to fetch UIKIT version list.');
+    }
+};

package/src/utils/init/doNotUseTailwind.d.ts

@@ -0,0 +1 @@
+export declare const doNotUseTailwind: () => Promise<boolean>;

package/src/utils/init/doNotUseTailwind.js

@@ -0,0 +1,53 @@
+import { getConsoleStyle } from './styledLogs';
+export const doNotUseTailwind = async () => {
+    // Detect Tailwind CSS in linked stylesheets
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+        try {
+            const response = await fetch(link.href);
+            const cssText = await response.text();
+            if (cssText.includes('--tw')) {
+                return true; // Tailwind detected
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to fetch CSS file: ${link.href}`, error);
+        }
+    }
+    // Detect Tailwind CSS in <style> tags
+    const styleTags = document.querySelectorAll('style');
+    for (const style of styleTags) {
+        if (style.textContent?.includes('--tw')) {
+            return true; // Tailwind detected
+        }
+    }
+    return false; // Tailwind not detected
+};
+// Global flag to track if Tailwind has been detected
+let tailwindDetected = false;
+// Initial detection of Tailwind CSS
+(async () => {
+    try {
+        tailwindDetected = await doNotUseTailwind();
+    }
+    catch (error) {
+        console.error('Error during Tailwind detection:', error);
+    }
+})();
+// Repeatedly log messages every 10 seconds if Tailwind was detected
+setInterval(() => {
+    if (tailwindDetected) {
+        const message = [
+            'TAILWIND DETECTED!!!',
+            'Using Tailwind CSS in combination with the RIO UIKIT is strongly discouraged because it can lead to significant design and development issues.',
+            'The RIO UIKIT is a component-driven design system with carefully crafted styles to ensure consistent branding and user experience.',
+            'Tailwind CSS, as a utility-first framework, introduces inline styling that can conflict with the RIO UIKIT’s predefined component styles.',
+            'This can result in overridden styles, broken layouts, inconsistent spacings, inconsistent design language, and increased maintenance complexity.',
+            'Tailwind’s global reset styles may also disrupt the base styles of the RIO UIKIT, causing unintended visual changes.',
+            'Furthermore, mixing the two systems creates unnecessary redundancy, increases CSS bundle size, and complicates debugging and future updates.',
+            'To ensure a cohesive, maintainable, and professional design system, it is essential to rely solely on the RIO UIKIT and its customization options rather than introducing conflicting styling frameworks.',
+            'WE MAY TECHNICALLY DISABLE TAILWIND FUNCTIONALITY IN THE FUTURE.\nPLEASE DO NOT USE TAILWIND!',
+        ].join('\n\n');
+        console.warn('%c%s', getConsoleStyle(), message);
+    }
+}, 10_000);

package/src/utils/init/initCSS.d.ts

@@ -0,0 +1,2 @@
+export declare const initCSS: () => void;
+export declare const checkCSSVersion: () => void;

package/src/utils/init/initCSS.js

@@ -0,0 +1,74 @@
+import { debug, isInIframe } from './initConfig';
+import { version } from '../../version.json';
+const documentHas = (selector) => !!document.head.querySelector(selector);
+const documentHasAnyOf = (selectors) => selectors.some(documentHas);
+const BRANDS = ['rio', 'man', 'vw', 'scania', 'traton'];
+const isValidBrand = (input) => BRANDS.includes(input);
+const getBrand = (input) => (isValidBrand(input) ? input : 'rio');
+export const initCSS = () => {
+    if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
+        document.documentElement.classList.add('css-no-gap');
+    }
+    if (isInIframe) {
+        document.documentElement.classList.add('window-iframe');
+    }
+    if (document.title?.includes('UIKIT Demo')) {
+        return;
+    }
+    debug('Checking for UIKIT CSS in document head.');
+    const hasUikitCssLink = documentHasAnyOf(['link[href*="rio-uikit.css"]', 'link[href*="rio-uikit-core.css"]']);
+    const isUikitDemoPage = documentHas('style[data-vite-dev-id*="uikit.scss"]');
+    const hasUikitBrandCssLink = documentHasAnyOf([
+        'link[href*="man-uikit.css"]',
+        'link[href*="vw-uikit.css"]',
+        'link[href*="scania-uikit.css"]',
+        'link[href*="traton-uikit.css"]',
+        'link[href*="rio-website.css"]',
+    ]);
+    if (hasUikitCssLink || isUikitDemoPage || hasUikitBrandCssLink) {
+        debug('UIKIT CSS found in document head.');
+        return;
+    }
+    // If nothing is set, add a link tag to fetch the CSS from the UIKIT CDN.
+    // Note: there is no way to differentiate between core + responsive or full CSS
+    debug('No UIKIT CSS found => append link tag to document head.');
+    const brand = getBrand(document.documentElement.dataset.brand);
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = `https://uikit.developers.rio.cloud/${version}/${brand}-uikit.css`;
+    document.head.appendChild(link);
+};
+export const checkCSSVersion = () => {
+    const cssLinks = [...document.querySelectorAll('link[rel="stylesheet"]')];
+    cssLinks.forEach(cssLink => {
+        const { href } = cssLink;
+        if (href.includes('uikit.developers.rio.cloud')) {
+            const [, uikitVersionCSS] = new URL(href).pathname.split('/');
+            if (!href.includes(version)) {
+                console.warn(
+                // biome-ignore lint/style/useTemplate: <explanation>
+                'You are using different UIKIT JS and CSS versions.\n' +
+                    `Your current JS version is ${version} and ` +
+                    `your current CSS version is ${uikitVersionCSS}.\n` +
+                    'If this is not on purpose, please fix it. Otherwise, this may lead to UI bugs.');
+            }
+        }
+        else if (href.includes('cdn.rio.cloud/libs/rio-uikit')) {
+            console.error('You are still using an old "cdn.rio.cloud" css import. This will most likely cause major UI bugs! ' +
+                'Please update to the CSS URLs as explained on https://uikit.developers.rio.cloud/#start/howto.');
+        }
+    });
+};
+// remote URL is not supported by most browsers yet
+// export const addTabsClippingSVG = () => {
+//     const clippingSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+//     clippingSVG.setAttribute('width', '0');
+//     clippingSVG.setAttribute('height', '0');
+//     clippingSVG.setAttribute('id', 'tabs-rounded-clipping-mask');
+//     clippingSVG.innerHTML = `
+//         <clipPath id='tabs-rounded-clip-mask'>
+//             <path fill-rule='evenodd' d='M0 4a4 4 0 0 0 4-4v4z' />
+//         </clipPath>`;
+//     document.body.appendChild(clippingSVG);
+// };

package/src/utils/init/initConfig.d.ts

@@ -0,0 +1,4 @@
+export declare const isProd: boolean;
+export declare const isTest: boolean;
+export declare const isInIframe: boolean;
+export declare const debug: (message: string) => false | void;

package/src/utils/init/initConfig.js

@@ -0,0 +1,7 @@
+import process from 'process';
+import { inIframe } from '../deviceUtils';
+// Note: using import.meta.env.DEV does not work here due to backward compatibility with webpack and jest setups
+export const isProd = process.env.NODE_ENV === 'production' || location.protocol.startsWith('https');
+export const isTest = process.env.NODE_ENV === 'test';
+export const isInIframe = inIframe();
+export const debug = (message) => !isTest && console.debug(message);

package/src/utils/init/initDocumentBootstrapping.d.ts

@@ -0,0 +1 @@
+export declare const initDocumentBootstrapping: () => Promise<void>;

package/src/utils/init/initDocumentBootstrapping.js

@@ -0,0 +1,35 @@
+import { getColorScheme, listenForSchemeChange } from '../colorScheme';
+import { isTest, isInIframe } from './initConfig';
+import { usedUikitVersion } from './usedUikitVersion';
+import { weAreHiring } from './weAreHiring';
+import { doNotUseTailwind } from './doNotUseTailwind';
+import { checkCSSVersion, initCSS } from './initCSS';
+import { checkForReleaseVersion } from './checkForReleaseVersion';
+import { getConsoleStyle } from './styledLogs';
+export const initDocumentBootstrapping = async () => {
+    if (!document || !document.documentElement) {
+        return;
+    }
+    // Initialize the CSS setup
+    initCSS();
+    if (!isTest) {
+        // Handle the current color scheme (e.g., light/dark mode)
+        getColorScheme();
+        listenForSchemeChange();
+        // Verify the UIKIT version of the application
+        await checkForReleaseVersion();
+        // Ensure the correct CSS version is being used
+        checkCSSVersion();
+        if (!isInIframe) {
+            const logStyled = (message) => console.log('%c%s', getConsoleStyle(), message);
+            logStyled('- - - - - - - - - - - - - - - - - -');
+            // Log or validate the UI Kit version
+            usedUikitVersion();
+            // Show a hiring message
+            weAreHiring();
+            logStyled('- - - - - - - - - - - - - - - - - -');
+        }
+    }
+    // Enforce the rule that Tailwind CSS should not be used
+    await doNotUseTailwind();
+};

package/src/utils/init/styledLogs.d.ts

@@ -0,0 +1,3 @@
+export declare const getConsoleStyle: (params?: {
+    isBold?: boolean;
+}) => string;

package/src/utils/init/styledLogs.js

@@ -0,0 +1,3 @@
+export const getConsoleStyle = (params) => {
+    return `color: #697a8b; ${params?.isBold ? 'font-weight: 800' : ''}`;
+};

package/src/utils/init/usedUikitVersion.d.ts

@@ -0,0 +1 @@
+export declare const usedUikitVersion: () => void;

package/src/utils/init/usedUikitVersion.js

@@ -0,0 +1,7 @@
+import { version } from '../../version.json';
+import { getConsoleStyle } from './styledLogs';
+const logStyled = (message) => console.log('%c%s', getConsoleStyle(), message);
+export const usedUikitVersion = () => {
+    const message = `RIO UIKIT Version ${version}\nhttps://uikit.developers.rio.cloud`;
+    logStyled(message);
+};

package/src/utils/init/weAreHiring.d.ts

@@ -0,0 +1 @@
+export declare const weAreHiring: () => void;

package/src/utils/init/weAreHiring.js

@@ -0,0 +1,6 @@
+import { getConsoleStyle } from './styledLogs';
+const logStyled = (message) => console.log('%c%s', getConsoleStyle(), message);
+export const weAreHiring = () => {
+    const message = 'You are a Developer? RIO is hiring!\nhttps://company.rio.cloud/en/career/jobs';
+    logStyled(message);
+};

package/src/utils/logDeprecatedWarnings.d.ts

@@ -0,0 +1,9 @@
+export declare const BASE_URL = "https://uikit.developers.rio.cloud/";
+type DeprecatedPropType = {
+    prop: string;
+    propCaption?: string;
+    replacement?: string;
+    url?: string;
+};
+export declare const logDeprecatedWarnings: (deprecatedProps: DeprecatedPropType[], props: unknown, componentName?: string, removeVersion?: string, additionalText?: string) => void;
+export default logDeprecatedWarnings;

package/src/utils/logDeprecatedWarnings.js

@@ -0,0 +1,22 @@
+import has from 'lodash/fp/has';
+export const BASE_URL = 'https://uikit.developers.rio.cloud/';
+// Logs deprecation warnings to console if prop is used.
+// use this function in the render method of a component.
+export const logDeprecatedWarnings = (deprecatedProps, props, componentName, removeVersion, additionalText) => {
+    deprecatedProps.forEach(deprecatedProp => {
+        // Check whether the deprecated prop is used by checking the component props
+        if (has(deprecatedProp.prop, props)) {
+            console.warn([
+                'RIO UIKIT: ',
+                deprecatedProp.propCaption ? deprecatedProp.propCaption : 'Prop',
+                ` "${deprecatedProp.prop}" is deprecated`,
+                componentName ? ` for "${componentName}"` : '',
+                removeVersion ? ` and will be removed in v${removeVersion}` : '',
+                deprecatedProp.replacement ? `. Please use "${deprecatedProp.replacement}" instead` : '',
+                deprecatedProp.url ? ` as documented in ${BASE_URL}${deprecatedProp.url}. ` : '.',
+                additionalText ? ` ${additionalText}` : '',
+            ].join(''));
+        }
+    });
+};
+export default logDeprecatedWarnings;

package/src/utils/mergeRefs.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from 'react';
+declare const mergeRefs: <T>(refs: Ref<T>[]) => Ref<T>;
+export default mergeRefs;

package/src/utils/mergeRefs.js

@@ -0,0 +1,14 @@
+// Utility function to merge multiple refs
+const mergeRefs = (refs) => {
+    return (value) => {
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else if (ref) {
+                ref.current = value;
+            }
+        });
+    };
+};
+export default mergeRefs;

package/src/utils/portalRoot.d.ts

@@ -0,0 +1,2 @@
+export declare const PORTAL_ROOT_ID = "uikit-root";
+export declare const getOrCreatePortalRoot: () => HTMLElement;

package/src/utils/portalRoot.js

@@ -0,0 +1,7 @@
+export const PORTAL_ROOT_ID = 'uikit-root';
+export const getOrCreatePortalRoot = () => {
+    const dropdownRoot = document.getElementById(PORTAL_ROOT_ID);
+    const newRoot = document.createElement('div');
+    newRoot.setAttribute('id', PORTAL_ROOT_ID);
+    return dropdownRoot ? dropdownRoot : document.body.appendChild(newRoot);
+};

package/src/utils/routeUtils.d.ts

@@ -0,0 +1,15 @@
+export type ColumnsSettings = {
+    columnOrder: string[];
+    hiddenColumns: string[];
+    columnsDetails: Record<string, {
+        width: number;
+        defaultWidth?: number;
+    }>;
+};
+export declare const getSortDirShort: (sortDir: string) => "-" | "+";
+export declare const parseSorting: (sortValueShort: string) => {
+    sortBy: string;
+    sortDir: "desc" | "asc";
+};
+export declare const mapColumnsSettingsToStrings: ({ columnOrder, hiddenColumns, columnsDetails, }: ColumnsSettings) => string[];
+export declare const parseColumnsSettingsStrings: (settings: string[], defaultColumnsDetails: ColumnsSettings["columnsDetails"]) => ColumnsSettings;

package/src/utils/routeUtils.js

@@ -0,0 +1,48 @@
+import get from 'lodash/fp/get';
+import isFinite from 'lodash/fp/isFinite';
+import { SortDirection } from './SortUtils';
+export const getSortDirShort = (sortDir) => (sortDir === SortDirection.DESCENDING ? '-' : '+');
+export const parseSorting = (sortValueShort) => {
+    const sortDir = sortValueShort.startsWith('-') ? SortDirection.DESCENDING : SortDirection.ASCENDING;
+    // Note: due to a bug in qs 6.7.0 the '+' sorting will be parsed as a space by qs even though decoding is disabled
+    // therefore, we need to trim the value
+    return {
+        sortBy: sortValueShort.replace(/^[+-]/, '').trim(),
+        sortDir,
+    };
+};
+export const mapColumnsSettingsToStrings = ({ columnOrder = [], hiddenColumns = [], columnsDetails = {}, }) => {
+    const mappedColumns = columnOrder.map(column => {
+        const currentWidth = get('width')(columnsDetails[column]);
+        const defaultWidth = get('defaultWidth')(columnsDetails[column]);
+        const width = currentWidth !== 0 && currentWidth !== defaultWidth ? `:${currentWidth}` : '';
+        const hiddenSign = hiddenColumns.includes(column) ? '-' : '';
+        return `${hiddenSign}${column}${width}`;
+    });
+    return mappedColumns;
+};
+export const parseColumnsSettingsStrings = (settings, defaultColumnsDetails) => {
+    const columns = {
+        columnOrder: [],
+        hiddenColumns: [],
+        columnsDetails: { ...defaultColumnsDetails },
+    };
+    settings.map(setting => {
+        const [column, columnWidth] = setting.split(':');
+        const columnKey = column.startsWith('-') ? column.substr(1) : column;
+        columns.columnOrder = [...columns.columnOrder, columnKey];
+        if (columnWidth) {
+            const width = parseInt(columnWidth, 10);
+            if (isFinite(width)) {
+                columns.columnsDetails[columnKey] = { ...columns.columnsDetails[columnKey], width };
+            }
+        }
+        else {
+            columns.columnsDetails[columnKey] = { ...defaultColumnsDetails[columnKey] };
+        }
+        if (column.startsWith('-')) {
+            columns.hiddenColumns = [...columns.hiddenColumns, columnKey];
+        }
+    });
+    return columns;
+};

package/src/utils/scrollItemIntoView.d.ts

@@ -0,0 +1,3 @@
+export declare const UP = "up";
+export declare const DOWN = "down";
+export declare const scrollItemIntoView: (direction: string, dropDownDOMNode: HTMLElement | null, focusedItemDOMNode: HTMLElement | null | undefined) => void;