@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.4

package/lib/es/utils/buttonEffect.js

@@ -14,7 +14,8 @@ const createButtonRipple = (event, target = null) => {
     }
     // The TouchEvent does not contain clientX/clientY by definition. Most browsers will emulate/add it, though.
     // Nevertheless, we read the client values from the first touch object to be compliant.
-    if (event instanceof TouchEvent) {
+    // Note: some browsers don't provide the global "TouchEvent" constructor!
+    if (!!window.TouchEvent && event instanceof window.TouchEvent) {
         const firstTouch = event.touches[0];
         circle.style.left = `${firstTouch.clientX - buttonRect.left - radius}px`;
         circle.style.top = `${firstTouch.clientY - buttonRect.top - radius}px`;
@@ -35,7 +36,11 @@ const isTargetEligibleForEffect = (target) => {
     if (!target || !target.className) {
         return false;
     }
-    const { className } = target;
+    const { className = '' } = target;
+    // In case the target is not a button but an SVG or anything else
+    if (typeof className !== 'string') {
+        return false;
+    }
     const isButton = className.includes('btn ');
     const isNotButtonComponent = !className.includes('btn-component');
     const isNotLinkButton = !className.includes('btn-link');

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

@@ -4,6 +4,6 @@ export const THEME_DEFAULT: "default";
 export const THEME_SYSTEM: "system";
 export const THEME_LIGHT: "light";
 export const THEME_DARK: "dark";
-export function getColorScheme(): "default" | "dark" | "light" | "system" | undefined;
+export function getColorScheme(): "default" | "system" | "light" | "dark" | undefined;
 export function setColorScheme(scheme: any): void;
 export function listenForSchemeChange(): void;

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

@@ -1,3 +1,3 @@
 declare const COOKIE_NAME: "uikit-color-scheme";
-declare function readColorSchemeFromCookie(): "default" | "dark" | "light" | "system" | undefined;
+declare function readColorSchemeFromCookie(): "default" | "system" | "light" | "dark" | undefined;
 declare function listenForCookieChange(): void;

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

@@ -7,5 +7,6 @@ export const SCREEN_XL: 1700;
 export function isMobileScreen(): boolean;
 export function isMobile(): boolean;
 export function isDesktop(): boolean;
+export function isRetinaDevice(): boolean;
 export function inIframe(): boolean;
 export function 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.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.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
@@ -40,6 +40,8 @@ const isMobile = () => document && document.documentElement.classList.contains('
 exports.isMobile = isMobile;
 const isDesktop = () => document && document.documentElement.classList.contains('ua-desktop');
 exports.isDesktop = isDesktop;
+const isRetinaDevice = () => window.devicePixelRatio > 1;
+exports.isRetinaDevice = isRetinaDevice;
 const inIframe = () => {
     try {
         return window.self !== window.top;

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

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

package/lib/es/utils/getDropDirection.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+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)
-function getDropDirection(toggleNode, menuNode) {
+const getDropDirection = (toggleNode, menuNode) => {
     if (!toggleNode || !menuNode) {
-        return {};
+        return {
+            dropup: false,
+            pullRight: false,
+        };
     }
     const clientRect = toggleNode.getBoundingClientRect();
     const pageX = clientRect.x;
@@ -13,15 +17,15 @@ function getDropDirection(toggleNode, menuNode) {
     // 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.pageYOffset;
-    const spaceDown = window.innerHeight - (pageY + menuHeight + toggleHeight);
-    const spaceLeft = pageX - menuWidth - window.pageXOffset;
+    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: dropup,
-        pullRight: pullRight,
+        dropup,
+        pullRight,
     };
-}
+};
 exports.default = getDropDirection;

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

@@ -1,2 +1,2 @@
-export function initDocumentBootstrapping(document: any): void;
-export const autoInitDocumentBootstrapping: void;
+export declare const initDocumentBootstrapping: (document: Document) => void;
+export declare const autoInitDocumentBootstrapping: void;

package/lib/es/utils/init.js

@@ -17,7 +17,7 @@ const calcViewportUnits = () => {
     const vh = window.innerHeight * 0.01;
     return `--vh: ${vh}px`;
 };
-const logStyled = log => console.log('%c%s', 'color: #697a8b;', log);
+const logStyled = (log) => console.log('%c%s', 'color: #697a8b;', log);
 const printPoweredByRIO = () => {
     logStyled('- - - - - - - - - - - - - - - - - -');
     const message = [`RIO UIKIT Version ${uikitVersion}\nhttps://uikit.developers.rio.cloud`];
@@ -42,11 +42,12 @@ const checkForReleaseVersion = () => tslib_1.__awaiter(void 0, void 0, void 0, f
     }
     catch (error) {
         // console.warn(error);
-        console.warn(`Faild to fetch versionsList from ${remoteVersionsListUrl}`);
+        console.warn(`Failed to fetch versionsList from ${remoteVersionsListUrl}`);
     }
 });
 const checkMatchingUkitVersions = () => {
-    Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(cssLink => {
+    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('/');
@@ -64,7 +65,28 @@ const checkMatchingUkitVersions = () => {
         }
     });
 };
-const initDocumentBootstrapping = document => {
+const experimentalLoadUikitCSS = () => {
+    // check for existing uikit CSS in document head
+    console.debug('Check for UIKIT CSS in document head');
+    const hasUikitCssLink = !!document.head.querySelector('link[href*="rio-uikit"]');
+    const isUikitDemoPage = !!document.head.querySelector('style[data-vite-dev-id*="uikit.less"]');
+    if (hasUikitCssLink || isUikitDemoPage) {
+        console.debug('Existing 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
+    console.debug('No UIKIT CSS found. Add link tag to document head');
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = `https://uikit.developers.rio.cloud/${uikitVersion}/rio-uikit.css`;
+    link.onload = () => console.debug(`Loaded CSS link ${link.href}`);
+    link.onerror = () => console.error(`Failed to load ${link.href}`);
+    document.head.appendChild(link);
+    // TODO: Cleanup for uikit demo page
+};
+const initDocumentBootstrapping = (document) => {
     if (!document || !document.documentElement) {
         return;
     }
@@ -72,6 +94,7 @@ const initDocumentBootstrapping = document => {
         console.group('UIKIT');
         console.log(`Init document bootstrapping for ${document.location.href}`);
     }
+    experimentalLoadUikitCSS();
     const html = document.documentElement;
     const setViewportUnits = () => html.setAttribute('style', calcViewportUnits());
     window.addEventListener('orientationchange', (0, throttle_1.default)(1000, setViewportUnits));
@@ -80,7 +103,7 @@ const initDocumentBootstrapping = document => {
     if (!window.CSS || !window.CSS.supports || !window.CSS.supports('gap: 1px')) {
         html.classList.add('css-no-gap');
     }
-    if (html && (0, deviceUtils_1.inIframe)()) {
+    if ((0, deviceUtils_1.inIframe)()) {
         html.classList.add('window-iframe');
     }
     if (!isTestEnv()) {
@@ -89,7 +112,7 @@ const initDocumentBootstrapping = document => {
         printPoweredByRIO();
         checkForReleaseVersion();
         checkMatchingUkitVersions();
-        console.groupEnd('UIKIT');
+        console.groupEnd();
     }
 };
 exports.initDocumentBootstrapping = initDocumentBootstrapping;

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

@@ -1,3 +1,9 @@
-export const BASE_URL: "https://uikit.developers.rio.cloud/";
-export function logDeprecatedWarnings(deprecatedProps: any[] | undefined, props: any, componentName: any, removeVersion: any, additionalText: any): void;
+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/lib/es/utils/logDeprecatedWarnings.js

@@ -6,11 +6,10 @@ const has_1 = tslib_1.__importDefault(require("lodash/fp/has"));
 exports.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.
-const logDeprecatedWarnings = (deprecatedProps = [], props, componentName, removeVersion, additionalText) => {
+const logDeprecatedWarnings = (deprecatedProps, props, componentName, removeVersion, additionalText) => {
     deprecatedProps.forEach(deprecatedProp => {
-        // Check whether the deprected prop is used by checking the component props
+        // Check whether the deprecated prop is used by checking the component props
         if ((0, has_1.default)(deprecatedProp.prop, props)) {
-            /* eslint-disable no-console */
             console.warn([
                 'RIO UIKIT: ',
                 deprecatedProp.propCaption ? deprecatedProp.propCaption : 'Prop',

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export type DropDirection = {
+    pullRight: boolean;
+    dropup: boolean;
+};
+export type UseDropDirection = {
+    pullRight: boolean;
+    dropup: boolean;
+    autoDropDirection: boolean;
+    dropdownMenuRef: React.RefObject<HTMLUListElement>;
+};
+export declare const useDropDirection: ({ pullRight, dropup, autoDropDirection, dropdownMenuRef }: UseDropDirection, dependencies: unknown[]) => DropDirection;

package/lib/es/utils/useDropDirection.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropDirection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const getDropDirection_1 = tslib_1.__importDefault(require("./getDropDirection"));
+const useDropDirection = ({ pullRight = false, dropup = false, autoDropDirection = false, dropdownMenuRef }, dependencies) => {
+    // Note: Using an object for local state has lead to tests getting stuck here.
+    // The solution was to split the values into dedicated state primitives here.
+    const [internalPullRight, setInternalPullRight] = (0, react_1.useState)(pullRight);
+    const [internalDropup, setInternalDropup] = (0, react_1.useState)(dropup);
+    const isAutoDropActive = () => !(!autoDropDirection || dropup || pullRight);
+    // Overwrite position of dropdown menu in case auto drop is enabled
+    (0, react_1.useEffect)(() => {
+        if (dropdownMenuRef.current && isAutoDropActive()) {
+            const result = (0, getDropDirection_1.default)(dropdownMenuRef.current.parentNode, dropdownMenuRef.current);
+            setInternalPullRight(result.pullRight);
+            setInternalDropup(result.dropup);
+        }
+    }, [...dependencies, dropdownMenuRef.current]);
+    return {
+        pullRight: internalPullRight,
+        dropup: internalDropup,
+    };
+};
+exports.useDropDirection = useDropDirection;

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.2"
+    "version": "0.16.4-beta.4"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.4-beta.2",
+    "version": "0.16.4-beta.4",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/utils/buttonEffect.js

@@ -11,7 +11,8 @@ export const createButtonRipple = (event, target = null) => {
     }
     // The TouchEvent does not contain clientX/clientY by definition. Most browsers will emulate/add it, though.
     // Nevertheless, we read the client values from the first touch object to be compliant.
-    if (event instanceof TouchEvent) {
+    // Note: some browsers don't provide the global "TouchEvent" constructor!
+    if (!!TouchEvent && event instanceof TouchEvent) {
         const firstTouch = event.touches[0];
         circle.style.left = `${firstTouch.clientX - buttonRect.left - radius}px`;
         circle.style.top = `${firstTouch.clientY - buttonRect.top - radius}px`;

package/utils/deviceUtils.d.ts

@@ -7,5 +7,6 @@ export const SCREEN_XL: 1700;
 export function isMobileScreen(): boolean;
 export function isMobile(): boolean;
 export function isDesktop(): boolean;
+export function isRetinaDevice(): boolean;
 export function inIframe(): boolean;
 export function toggleZoomOnMobile(): void;

package/utils/deviceUtils.js

@@ -33,6 +33,7 @@ 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 isRetinaDevice = () => window.devicePixelRatio > 1;
 export const inIframe = () => {
     try {
         return window.self !== window.top;

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.2"
+    "version": "0.16.4-beta.4"
 }