@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/utils/deviceUtils.js

@@ -1,19 +1,21 @@
 import { cssua } from './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
-if (document && document.documentElement) {
+if (document === null || document === void 0 ? void 0 : document.documentElement) {
     cssua(document.documentElement, navigator.userAgent, navigator.standalone);
 }
-const isDefined = val => val !== undefined && val !== null;
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const isDefined = (val) => val !== undefined && val !== null;
 // see https://patrickhlauke.github.io/touch/touchscreen-detection/ for reference
 export const hasTouch = () => {
+    var _a;
     if (window.PointerEvent && isDefined(navigator.maxTouchPoints)) {
         // if Pointer Events are supported, just check maxTouchPoints
         if (navigator.maxTouchPoints > 0) {
             return true;
         }
     }
-    else if (window.matchMedia && window.matchMedia('(any-pointer:coarse)').matches) {
+    else if ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(any-pointer:coarse)').matches) {
         // no Pointer Events...
         // check for any-pointer:coarse which mostly means touchscreen
         return true;
@@ -31,8 +33,8 @@ export const SCREEN_MD = 992;
 export const SCREEN_LG = 1200;
 export const SCREEN_XL = 1700;
 export const isMobileScreen = () => window.matchMedia(`(max-width: ${MOBILE_SCREEN}px)`).matches;
-export const isMobile = () => document && document.documentElement.classList.contains('ua-mobile');
-export const isDesktop = () => document && document.documentElement.classList.contains('ua-desktop');
+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 isRetinaDevice = () => window.devicePixelRatio > 1;
 export const inIframe = () => {
     try {

package/utils/getWidthInBoundaries.d.ts

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

package/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/utils/init/initCSS.d.ts

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

package/utils/init/initCSS.js

@@ -0,0 +1,63 @@
+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 = () => {
+    var _a;
+    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 ((_a = document.title) === null || _a === void 0 ? void 0 : _a.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.less"]');
+    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.');
+        }
+    });
+};

package/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/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/utils/init/initDocumentBootstrapping.d.ts

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

package/utils/init/initDocumentBootstrapping.js

@@ -0,0 +1,39 @@
+import { __awaiter } from "tslib";
+import { getColorScheme, listenForSchemeChange } from '../colorScheme';
+import { version } from '../../version.json';
+import { isProd, isTest } from './initConfig';
+import { printPoweredByRIO } from './printPoweredByRIO';
+import { checkCSSVersion, initCSS } from './initCSS';
+const versionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+const checkForReleaseVersion = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!isProd) {
+        return;
+    }
+    try {
+        const response = yield fetch(versionsListUrl);
+        const { latest_release } = yield response.json();
+        if (latest_release > version) {
+            console.log(`🆕 You are using version ${version} of the UIKIT while the latest released version is` +
+                ` ${latest_release}. Please consider updating.`);
+        }
+    }
+    catch (error) {
+        console.debug('Failed to fetch UIKIT version list.');
+    }
+});
+export const initDocumentBootstrapping = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!document || !document.documentElement) {
+        return;
+    }
+    initCSS();
+    if (!isTest) {
+        console.group('UIKIT');
+        console.log(`Init UIKIT for ${document.location.href}.`);
+        getColorScheme();
+        listenForSchemeChange();
+        printPoweredByRIO();
+        yield checkForReleaseVersion();
+        checkCSSVersion();
+        console.groupEnd();
+    }
+});

package/utils/init/printPoweredByRIO.d.ts

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

package/utils/init/printPoweredByRIO.js

@@ -0,0 +1,12 @@
+import { version } from '../../version.json';
+import { isInIframe, isProd } from './initConfig';
+const logStyled = (message) => console.log('%c%s', 'color: #697a8b;', message);
+export const printPoweredByRIO = () => {
+    logStyled('- - - - - - - - - - - - - - - - - -');
+    const message = [`RIO UIKIT Version ${version}\nhttps://uikit.developers.rio.cloud`];
+    if (isProd && !isInIframe) {
+        message.push('\n\nYou are a Developer? RIO is hiring!\n👉 https://rio.cloud/en/career 👈');
+    }
+    logStyled(message.join(''));
+    logStyled('- - - - - - - - - - - - - - - - - -');
+};

package/utils/init.js

@@ -1,5 +1,5 @@
 import { __awaiter } from "tslib";
-import throttle from 'lodash/fp/throttle';
+import 'lodash/fp/throttle';
 import process from 'process';
 import { inIframe } from './deviceUtils';
 import { getColorScheme, listenForSchemeChange } from './colorScheme';
@@ -9,11 +9,6 @@ const uikitVersion = versionJson.version;
 const isProdEnv = () => process.env.NODE_ENV === 'production' || location.protocol.startsWith('https');
 const isTestEnv = () => process.env.NODE_ENV === 'test';
 const isLocalhost = () => { var _a; return ((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.hostname) === 'localhost'; };
-// https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-const calcViewportUnits = () => {
-    const vh = window.innerHeight * 0.01;
-    return `--vh: ${vh}px`;
-};
 const debug = (message) => !isTestEnv() && console.debug(message);
 const log = (message) => !isTestEnv() && console.log(message);
 const logStyled = (message) => console.log('%c%s', 'color: #697a8b;', message);
@@ -71,9 +66,15 @@ const experimentalLoadUikitCSS = () => {
     }
     // check for existing uikit CSS in document head
     debug('Check for UIKIT CSS in document head');
-    const hasUikitCssLink = !!document.head.querySelector('link[href*="rio-uikit"]');
+    const hasUikitCssLink = !!document.head.querySelector('link[href*="rio-uikit.css"]') ||
+        !!document.head.querySelector('link[href*="rio-uikit-core.css"]');
     const isUikitDemoPage = !!document.head.querySelector('style[data-vite-dev-id*="uikit.less"]');
-    if (hasUikitCssLink || isUikitDemoPage) {
+    const hasUikitThemeCssLink = !!document.head.querySelector('link[href*="man-uikit.css"]') ||
+        !!document.head.querySelector('link[href*="vw-uikit.css"]') ||
+        !!document.head.querySelector('link[href*="scania-uikit.css"]') ||
+        !!document.head.querySelector('link[href*="traton-uikit.css"]') ||
+        !!document.head.querySelector('link[href*="rio-website.css"]');
+    if (hasUikitCssLink || isUikitDemoPage || hasUikitThemeCssLink) {
         debug('Existing UIKIT CSS found in document head');
         return;
     }
@@ -98,10 +99,6 @@ export const initDocumentBootstrapping = (document) => {
     }
     experimentalLoadUikitCSS();
     const html = document.documentElement;
-    const setViewportUnits = () => html.setAttribute('style', calcViewportUnits());
-    window.addEventListener('orientationchange', throttle(1000, setViewportUnits));
-    window.addEventListener('resize', throttle(1000, setViewportUnits));
-    setViewportUnits();
     if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
         html.classList.add('css-no-gap');
     }

package/utils/mergeRefs.d.ts

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

package/utils/mergeRefs.js

@@ -0,0 +1,16 @@
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+// 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/utils/portalRoot.d.ts

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

package/utils/routeUtils.d.ts

@@ -1,15 +1,15 @@
-export function getSortDirShort(sortDir: any): "-" | "+";
-export function parseSorting(sortValueShort: any): {
-    sortBy: any;
-    sortDir: string;
+export type ColumnsSettings = {
+    columnOrder: string[];
+    hiddenColumns: string[];
+    columnsDetails: Record<string, {
+        width: number;
+        defaultWidth?: number;
+    }>;
 };
-export function mapColumnsSettingsToStrings({ columnOrder, hiddenColumns, columnsDetails }: {
-    columnOrder?: any[] | undefined;
-    hiddenColumns?: any[] | undefined;
-    columnsDetails?: {} | undefined;
-}): string[];
-export function parseColumnsSettingsStrings(settings: any[] | undefined, defaultColumnsDetails: any): {
-    columnOrder: never[];
-    hiddenColumns: never[];
-    columnsDetails: any;
+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/utils/routeUtils.js

@@ -1,8 +1,8 @@
 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 => {
+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
@@ -11,7 +11,7 @@ export const parseSorting = sortValueShort => {
         sortDir,
     };
 };
-export const mapColumnsSettingsToStrings = ({ columnOrder = [], hiddenColumns = [], columnsDetails = {} }) => {
+export const mapColumnsSettingsToStrings = ({ columnOrder = [], hiddenColumns = [], columnsDetails = {}, }) => {
     const mappedColumns = columnOrder.map(column => {
         const currentWidth = get('width')(columnsDetails[column]);
         const defaultWidth = get('defaultWidth')(columnsDetails[column]);
@@ -21,7 +21,7 @@ export const mapColumnsSettingsToStrings = ({ columnOrder = [], hiddenColumns =
     });
     return mappedColumns;
 };
-export const parseColumnsSettingsStrings = (settings = [], defaultColumnsDetails) => {
+export const parseColumnsSettingsStrings = (settings, defaultColumnsDetails) => {
     const columns = {
         columnOrder: [],
         hiddenColumns: [],

package/utils/scrollItemIntoView.d.ts

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

package/utils/searchNormalized.d.ts

@@ -1,2 +1,2 @@
-export function normalizeForSearch(input: any): any;
-export function searchNormalized(input: any, search: any): any;
+export declare const normalizeForSearch: (input: string) => string;
+export declare const searchNormalized: (input: string, search: string) => boolean;

package/utils/searchNormalized.js

@@ -1,2 +1,2 @@
-export const normalizeForSearch = input => input.replaceAll(/\s+/g, ' ').toLowerCase();
+export const normalizeForSearch = (input) => input.replaceAll(/\s+/g, ' ').toLowerCase();
 export const searchNormalized = (input, search) => normalizeForSearch(input).includes(normalizeForSearch(search));

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.7"
+    "version": "1.0.0"
 }