@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/utils/scrollItemIntoView.js

@@ -0,0 +1,25 @@
+export const UP = 'up';
+export const DOWN = 'down';
+// Scroll to selected dropdown menu-item in case the item is not visible due to overflow
+export const scrollItemIntoView = (direction, dropDownDOMNode, focusedItemDOMNode) => {
+    if (!dropDownDOMNode || !focusedItemDOMNode) {
+        return;
+    }
+    const menuHeight = dropDownDOMNode.clientHeight;
+    const itemHeight = focusedItemDOMNode.clientHeight;
+    const itemOffsetTop = focusedItemDOMNode.offsetTop;
+    switch (direction) {
+        case UP:
+            if (itemOffsetTop < dropDownDOMNode.scrollTop) {
+                dropDownDOMNode.scrollTop = dropDownDOMNode.scrollTop - itemHeight;
+            }
+            break;
+        case DOWN:
+            if (itemOffsetTop > menuHeight - itemHeight) {
+                dropDownDOMNode.scrollTop = dropDownDOMNode.scrollTop + itemHeight;
+            }
+            break;
+        default:
+            break;
+    }
+};

package/src/utils/searchNormalized.d.ts

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

package/src/utils/searchNormalized.js

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

package/src/utils/storageUtils.d.ts

@@ -0,0 +1,5 @@
+export declare const storage: {
+    save: (key: string, value: string, prefix?: string) => string | null;
+    load: (key: string, prefix?: string) => string | null;
+    removeItem: (key: string, prefix?: string) => void;
+};

package/src/utils/storageUtils.js

@@ -0,0 +1,31 @@
+const localStorage = window.localStorage;
+const STORAGE_PREFIX = '';
+const save = (key, value, prefix = STORAGE_PREFIX) => {
+    try {
+        localStorage.setItem(`${prefix}${key}`, JSON.stringify(value));
+        return value;
+    }
+    catch (_) {
+        // Intentionally left blank
+    }
+    return null;
+};
+const removeItem = (key, prefix = STORAGE_PREFIX) => {
+    try {
+        localStorage.removeItem(`${prefix}${key}`);
+    }
+    catch (_) {
+        // Intentionally left blank
+    }
+};
+const load = (key, prefix = STORAGE_PREFIX) => {
+    try {
+        const item = localStorage.getItem(`${prefix}${key}`);
+        return item && JSON.parse(item);
+    }
+    catch (_) {
+        // Intentionally left blank
+    }
+    return null;
+};
+export const storage = { save, load, removeItem };

package/src/utils/urlFeatureToggles.d.ts

@@ -0,0 +1,15 @@
+export declare const DEFAULT_PREFIX = "featureToggle.";
+export type ToggleType = string | boolean | number;
+export declare const cleanupOldToggles: (oldToggles: string[], prefix: string) => void;
+export declare const asBoolean: (urlParamName: string) => (prefix: string) => boolean | null;
+export declare const asBooleanWithDefault: (urlParamName: string, defaultValue: boolean) => (prefix: string) => boolean;
+export declare const asString: (urlParamName: string) => (prefix: string) => string | null;
+export declare const asStringWithDefault: (urlParamName: string, defaultValue: string) => (prefix: string) => string;
+export declare const asNumber: (urlParamName: string) => (prefix: string) => number | null;
+export declare const asNumberWithDefault: (urlParamName: string, defaultValue: number) => (prefix: string) => number;
+type ToggleValueExtractor = (prefix: string) => ToggleType | null;
+type ToggleValues<TOGGLE_DEFS> = TOGGLE_DEFS extends Record<string, ToggleValueExtractor> ? {
+    [K in keyof TOGGLE_DEFS]: ReturnType<TOGGLE_DEFS[K]>;
+} : never;
+export declare const detectFeatureToggles: <TOGGLE_DEFS extends Record<string, ToggleValueExtractor>>(toggleDefinitions: TOGGLE_DEFS, oldToggles?: string[], prefix?: string) => ToggleValues<TOGGLE_DEFS>;
+export {};

package/src/utils/urlFeatureToggles.js

@@ -0,0 +1,34 @@
+import qs from 'qs';
+import mapValues from 'lodash/fp/mapValues';
+import forEach from 'lodash/fp/forEach';
+import get from 'lodash/fp/get';
+import { storage } from './storageUtils';
+export const DEFAULT_PREFIX = 'featureToggle.';
+export const cleanupOldToggles = (oldToggles, prefix) => {
+    try {
+        forEach(toggle => storage.removeItem(toggle, prefix), oldToggles);
+    }
+    catch (error) {
+        console.error(error);
+    }
+};
+const detectToggle = (param, prefix, transformFn, defaultValue) => {
+    const [_, searchParams = ''] = window.location.hash.split('?');
+    const urlSearchParams = qs.parse(searchParams);
+    const urlValue = get(param, urlSearchParams)?.toString() || '';
+    const storageValue = urlValue ? storage.save(param, urlValue, prefix) : storage.load(param, prefix);
+    return storageValue ? transformFn(storageValue) : defaultValue;
+};
+const transformBoolean = (value) => value === 'true' || value === '1';
+const transformString = (value) => value;
+const transformNumber = (value) => Number.parseFloat(value);
+export const asBoolean = (urlParamName) => (prefix) => detectToggle(urlParamName, prefix, transformBoolean, null);
+export const asBooleanWithDefault = (urlParamName, defaultValue) => (prefix) => detectToggle(urlParamName, prefix, transformBoolean, defaultValue);
+export const asString = (urlParamName) => (prefix) => detectToggle(urlParamName, prefix, transformString, null);
+export const asStringWithDefault = (urlParamName, defaultValue) => (prefix) => detectToggle(urlParamName, prefix, transformString, defaultValue);
+export const asNumber = (urlParamName) => (prefix) => detectToggle(urlParamName, prefix, transformNumber, null);
+export const asNumberWithDefault = (urlParamName, defaultValue) => (prefix) => detectToggle(urlParamName, prefix, transformNumber, defaultValue);
+export const detectFeatureToggles = (toggleDefinitions, oldToggles = [], prefix = DEFAULT_PREFIX) => {
+    cleanupOldToggles(oldToggles, prefix);
+    return mapValues(toggleFn => toggleFn(prefix), toggleDefinitions);
+};

package/src/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/src/utils/useDropDirection.js

@@ -0,0 +1,22 @@
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { useEffect, useState } from 'react';
+import getDropDirection from './getDropDirection';
+export 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] = useState(pullRight);
+    const [internalDropup, setInternalDropup] = useState(dropup);
+    const isAutoDropActive = () => !(!autoDropDirection || dropup || pullRight);
+    // Overwrite position of dropdown menu in case auto drop is enabled
+    useEffect(() => {
+        if (dropdownMenuRef.current && isAutoDropActive()) {
+            const result = getDropDirection(dropdownMenuRef.current.parentNode, dropdownMenuRef.current);
+            setInternalPullRight(result.pullRight);
+            setInternalDropup(result.dropup);
+        }
+    }, [...dependencies, dropdownMenuRef.current]);
+    return {
+        pullRight: internalPullRight,
+        dropup: internalDropup,
+    };
+};

package/src/values/Placement.d.ts

@@ -0,0 +1,19 @@
+import type { ObjectValues } from '../utils/ObjectValues';
+export declare const PLACEMENT: {
+    readonly AUTO_START: "auto-start";
+    readonly AUTO: "auto";
+    readonly AUTO_END: "auto-end";
+    readonly TOP_START: "top-start";
+    readonly TOP: "top";
+    readonly TOP_END: "top-end";
+    readonly RIGHT_START: "right-start";
+    readonly RIGHT: "right";
+    readonly RIGHT_END: "right-end";
+    readonly BOTTOM_START: "bottom-start";
+    readonly BOTTOM: "bottom";
+    readonly BOTTOM_END: "bottom-end";
+    readonly LEFT_START: "left-start";
+    readonly LEFT: "left";
+    readonly LEFT_END: "left-end";
+};
+export type Placement = ObjectValues<typeof PLACEMENT>;

package/src/values/Placement.js

@@ -0,0 +1,17 @@
+export const PLACEMENT = {
+    AUTO_START: 'auto-start',
+    AUTO: 'auto',
+    AUTO_END: 'auto-end',
+    TOP_START: 'top-start',
+    TOP: 'top',
+    TOP_END: 'top-end',
+    RIGHT_START: 'right-start',
+    RIGHT: 'right',
+    RIGHT_END: 'right-end',
+    BOTTOM_START: 'bottom-start',
+    BOTTOM: 'bottom',
+    BOTTOM_END: 'bottom-end',
+    LEFT_START: 'left-start',
+    LEFT: 'left',
+    LEFT_END: 'left-end',
+};

package/src/values/TextAlignment.d.ts

@@ -0,0 +1,7 @@
+import type { ObjectValues } from '../utils/ObjectValues';
+export declare const TEXT_ALIGNMENT: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+    readonly RIGHT: "right";
+};
+export type TextAlignment = ObjectValues<typeof TEXT_ALIGNMENT>;

package/src/values/TextAlignment.js

@@ -0,0 +1,5 @@
+export const TEXT_ALIGNMENT = {
+    LEFT: 'left',
+    CENTER: 'center',
+    RIGHT: 'right',
+};

package/src/values/Trigger.d.ts

@@ -0,0 +1,8 @@
+import type { ObjectValues } from '../utils/ObjectValues';
+export declare const TRIGGER: {
+    readonly HOVER: "hover";
+    readonly CLICK: "click";
+    readonly FOCUS: "focus";
+};
+export type TriggerType = ObjectValues<typeof TRIGGER>;
+export type Trigger = TriggerType | TriggerType[];

package/src/values/Trigger.js

@@ -0,0 +1,5 @@
+export const TRIGGER = {
+    HOVER: 'hover',
+    CLICK: 'click',
+    FOCUS: 'focus',
+};

package/src/version.json

@@ -0,0 +1,3 @@
+{
+    "version": "1.12.0"
+}

package/useAverage.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useAverage';
+export * from './hooks/useAverage';

package/useAverage.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useAverage';
+export * from './hooks/useAverage';

package/useCount.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useCount';
+export * from './hooks/useCount';

package/useCount.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useCount';
+export * from './hooks/useCount';

package/useMax.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useMax';
+export * from './hooks/useMax';

package/useMax.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useMax';
+export * from './hooks/useMax';

package/useMin.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useMin';
+export * from './hooks/useMin';

package/useMin.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useMin';
+export * from './hooks/useMin';

package/useSum.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useSum';
+export * from './hooks/useSum';

package/useSum.js

@@ -0,0 +1,2 @@
+export { default } from './hooks/useSum';
+export * from './hooks/useSum';

package/utils/formatUtils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Helper to extract a number from a string that may have units or grouping delimiters. It take localization into account.
+ *
+ * @param value
+ * @param locale
+ * @returns parsed number
+ */
+export declare const parseNumberFromValue: (value: unknown, locale: string) => number;
+/**
+ * Retrieves a nested property value from an object using dot-notation.
+ *
+ * @param obj - The object to retrieve the value from.
+ * @param path - Dot-separated path to the desired property (e.g. "price.amount").
+ * @returns The value at the given path or undefined if not found.
+ */
+export declare const getValueByPath: (obj: unknown, path: string) => unknown;

package/utils/formatUtils.js

@@ -0,0 +1,49 @@
+import isNil from 'lodash/fp/isNil';
+/**
+ * Helper to extract a number from a string that may have units or grouping delimiters. It take localization into account.
+ *
+ * @param value
+ * @param locale
+ * @returns parsed number
+ */
+export const parseNumberFromValue = (value, locale) => {
+    if (isNil(value)) {
+        return 0;
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (typeof value !== 'string') {
+        return 0;
+    }
+    const example = 1234567.89;
+    const parts = new Intl.NumberFormat(locale).formatToParts(example);
+    const groupSymbol = parts.find(p => p.type === 'group')?.value ?? ',';
+    const decimalSymbol = parts.find(p => p.type === 'decimal')?.value ?? '.';
+    // Extract numeric part only (up to last digit or decimal), ignore units
+    const match = value.match(/[-\d.,'\u00A0\s]+/);
+    if (!match) {
+        return 0;
+    }
+    let numeric = match[0].trim();
+    // Normalize: remove group symbols (thousand delimiter)
+    if (groupSymbol !== decimalSymbol) {
+        numeric = numeric.replaceAll(groupSymbol, '');
+    }
+    // Replace decimal with dot for number parsing
+    if (decimalSymbol !== '.') {
+        numeric = numeric.replace(decimalSymbol, '.');
+    }
+    const parsed = Number.parseFloat(numeric);
+    return Number.isNaN(parsed) ? Number.NaN : parsed;
+};
+/**
+ * Retrieves a nested property value from an object using dot-notation.
+ *
+ * @param obj - The object to retrieve the value from.
+ * @param path - Dot-separated path to the desired property (e.g. "price.amount").
+ * @returns The value at the given path or undefined if not found.
+ */
+export const getValueByPath = (obj, path) => {
+    return path.split('.').reduce((acc, key) => (acc && typeof acc === 'object' ? acc[key] : undefined), obj);
+};

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.10.1"
+    "version": "1.12.0"
 }