@ringcentral/spring-base 1.7.0

package/utils.js

@@ -0,0 +1,333 @@
+import { g as getRefElement } from './chunks/twMerge.js';
+export { a as ariaHideOutside, b as combineClasses, c as combineProps, i as isRef, l as logInDev, o as ownerWindow, t as twMerge } from './chunks/twMerge.js';
+import React__default, { isValidElement, useCallback } from 'react';
+import lodashOmit from 'lodash/omit';
+export { unstable_ownerDocument as ownerDocument } from '@mui/utils';
+import lodashPick from 'lodash/pick';
+import 'lodash/isPlainObject';
+import './config.js';
+import 'tailwind-merge';
+
+const a11yKeyboard = {
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
+    Space: ' ',
+    Escape: 'Escape',
+    Enter: 'Enter',
+    Tab: 'Tab',
+};
+
+// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
+//
+// A strict capitalization should uppercase the first letter of each word in the sentence.
+// We only handle the first word.
+function capitalize(string) {
+    if (typeof string !== 'string') {
+        throw new Error('SPRING: `capitalize(string)` expects a string argument.');
+    }
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+/** check is that event preventDefault */
+const checkDefaultPrevented = (fc) => {
+    return (e, ...args) => {
+        if (e.defaultPrevented)
+            return;
+        fc(e, ...args);
+    };
+};
+
+function checkElementName(element, names) {
+    return (isValidElement(element) &&
+        names.indexOf(element.type?.displayName) !== -1);
+}
+
+const isDeleteKeyboardEvent = (keyboardEvent) => {
+    return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
+};
+
+const globalStateClasses = {
+    active: 'sui-active',
+    checked: 'sui-checked',
+    completed: 'sui-completed',
+    disabled: 'sui-disabled',
+    expanded: 'sui-expanded',
+    focused: 'sui-focused',
+    focusVisible: 'sui-focus-visible',
+    focusVisibleWithin: 'sui-focus-visible-within',
+    required: 'sui-required',
+    selected: 'sui-selected',
+    dragged: 'sui-dragged',
+};
+
+/**
+ * simple camel case for better performance, because this is a very open execution function, below is the benchmark of lodash camelCase vs simpleCamelCase and regex camelCase.
+ *
+ * https://www.measurethat.net/Benchmarks/Show/31672/0/regex-vs-javascript-camelcase-long
+ *
+ * https://www.measurethat.net/Benchmarks/Show/12906/0/lodash-camelcase-vs-javascript-camelcase-long
+ */
+const simpleCamelCase = (str) => str
+    .split('-')
+    .map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item)
+    .join('');
+const DEFAULT_PREFIX = 'sui-';
+/**
+ * Custom hook for generating CSS classes based on input parameters.
+ *
+ * pick class from object with prefix of object like `sui-${prefix}-${key}`
+ *
+ * `className` will be apply to the `cls('root')` class.
+ *
+ * camelCase will be used for the key in the inputClasses object.
+ *
+ * and apply to kebabCase in the class name.
+ *
+ * ```tsx
+ * type BaseButtonClasses =
+ *   | 'root'
+ *   | 'content'
+ *   | 'start-slot';
+ *
+ * const cls = useClasses<BaseButtonClasses>('button', {
+ *    root: 'custom-button-root',
+ *    content: 'custom-button-content',
+ *    startSlot: 'custom-button-start-slot',
+ * }, 'custom-root-class');
+ *
+ * <button className={cls('root')}>Button</button> // 'sui-button-root custom-button-root custom-root-class'
+ * <button className={cls('content')}>Button</button> // 'sui-button-content custom-button-content'
+ *
+ * <button className={cls('start-slot')}>Button</button> // 'sui-button-start-slot custom-button-start-slot'
+ * ```
+ */
+const useClasses = (prefix, inputClasses, className) => {
+    return useCallback((...classValues) => {
+        const classList = [];
+        const selectedMap = new Map();
+        let isRoot = false;
+        const hasCustomClasses = inputClasses && Object.keys(inputClasses).length > 0;
+        const applyClass = (classValue) => {
+            const isDefaultClasses = globalStateClasses[classValue];
+            if (isDefaultClasses) {
+                classList.push(isDefaultClasses);
+            }
+            else {
+                classList.push(`${DEFAULT_PREFIX}${prefix}-${classValue}`);
+            }
+            if (hasCustomClasses) {
+                // add selected class to map for use in inputClasses
+                selectedMap.set(simpleCamelCase(classValue), 1);
+            }
+        };
+        for (let i = 0; i < classValues.length; i++) {
+            const classValue = classValues[i];
+            if (!classValue)
+                continue;
+            if (typeof classValue === 'string') {
+                if (classValue === 'root') {
+                    isRoot = true;
+                    classList.push(`${DEFAULT_PREFIX}${prefix}`);
+                }
+                applyClass(classValue);
+            }
+            else {
+                for (const key in classValue) {
+                    if (classValue[key]) {
+                        applyClass(key);
+                    }
+                }
+            }
+        }
+        selectedMap.forEach((_, key) => {
+            const inputClassValue = inputClasses?.[key];
+            if (inputClassValue) {
+                classList.push(inputClassValue);
+            }
+        });
+        if (isRoot && className) {
+            // add root class and className
+            classList.push(className);
+        }
+        return classList.join(' ');
+    }, [className, inputClasses, prefix]);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getTitle = (text) => {
+    return typeof text === 'string' ? text : undefined;
+};
+
+const isSuiElement = (element, suiNames) => {
+    return (React__default.isValidElement(element) &&
+        suiNames.indexOf(element.type.displayName) !== -1);
+};
+
+function isUrl(url) {
+    // eslint-disable-next-line no-useless-escape
+    const exp = /(\b(https?):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+    return url.match(exp);
+}
+
+// * this whole file should be remove after webkit154 issue be fixed
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+ * Remove this workaround once the WebKit bug fix is released.
+ *
+ * follow up:
+ * https://github.com/mui/material-ui/pull/31975/files
+ * https://github.com/mui/material-ui/pull/32202/files
+ */
+const isWebKit154 = typeof navigator !== 'undefined' &&
+    /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) &&
+    /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+
+/** enhance lodash type */
+const omit = (classes, keys) => {
+    return lodashOmit(classes, keys);
+};
+
+/**
+ * get that full height and margin with margin
+ * that will ignore transform animation
+ */
+function outerSize(el) {
+    const style = getComputedStyle(el);
+    return {
+        get height() {
+            return (el.offsetHeight +
+                parseInt(style.marginTop, 10) +
+                parseInt(style.marginBottom, 10));
+        },
+        get width() {
+            return (el.offsetWidth +
+                parseInt(style.marginLeft, 10) +
+                parseInt(style.marginRight, 10));
+        },
+    };
+}
+
+/** enhance lodash type */
+const pick = (classes, keys) => {
+    return lodashPick(classes, keys);
+};
+
+/** preload image file */
+function preloadImg(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.style.display = 'none';
+        img.onload = () => {
+            document.body.removeChild(img);
+            resolve();
+        };
+        img.onerror = () => {
+            document.body.removeChild(img);
+            reject();
+        };
+        img.src = url;
+        document.body.appendChild(img);
+    });
+}
+
+/**
+ * remove className from element, default will not scan child nodes, if you want to scan child nodes, set `scanChildren` to `true`.
+ *
+ * @param target target element reference or element or callback
+ * @param removeClass className to remove, default will use class `includes` to check, if you want to use full match, set `fullMatch` to `true`
+ *
+ * @example
+ * ```js
+ * elm => <div class="abc bcd efg abc-def"></div>
+ *
+ * removeClassName(elmRef, 'bcd');
+ *
+ * elm => <div class="abc efg abc-def"></div>
+ *
+ * removeClassName(elmRef, 'abc');
+ * elm => <div class="efg"></div>
+ * ```
+ */
+function removeClassName(target, removeClass, { scanChildren = false, fullMatch = false } = {}) {
+    const elm = getRefElement(target);
+    if (!elm)
+        return;
+    if (elm.className.includes(removeClass)) {
+        elm.className = cleanClass(elm, removeClass, fullMatch);
+    }
+    if (scanChildren) {
+        const nodes = elm.querySelectorAll(`[class*="${removeClass}"]`);
+        if (nodes?.length > 0) {
+            nodes.forEach((node) => (node.className = cleanClass(node, removeClass, fullMatch)));
+        }
+    }
+}
+function cleanClass(elm, removeClass, fullMatch) {
+    return elm.className
+        .trim()
+        .split(/\s+/)
+        .filter((className) => !(fullMatch
+        ? className === removeClass
+        : className.includes(removeClass)))
+        .join(' ');
+}
+
+/**
+ * Executes the corresponding key handler function based on the provided keyboard event.
+ * If a handler is found for the pressed key, it will be invoked.
+ * Additionally, it prevents any side effects caused by the event, such as page scrolling.
+ *
+ * @param e - The keyboard event.
+ * @param keyHandlers - An object containing key-handler mappings.
+ */
+const runKeyHandler = (e, keyHandlers) => {
+    const handler = keyHandlers[e.key];
+    if (handler) {
+        handler();
+        // if event was handled prevent other side effects (e.g. page scroll)
+        e.preventDefault();
+    }
+};
+
+/**
+ * get current input element selection position and is that selectRange state
+ */
+function getSelectionPosition(sourceTarget) {
+    const input = getRefElement(sourceTarget);
+    const currentPosition = input?.selectionStart;
+    const currentPositionEnd = input?.selectionEnd;
+    const isSelectRange = currentPosition !== currentPositionEnd;
+    return {
+        isSelectRange,
+        position: { start: currentPosition || 0, end: currentPositionEnd || 0 },
+    };
+}
+/**
+ * set input element selection position position,
+ * if you need scroll that into view set `scrollIntoView` as true
+ */
+function setSelectionPosition(target, options) {
+    const elm = getRefElement(target);
+    if (elm && options.start !== null && options.end !== null) {
+        // * use blur and refocus to refocus position into view
+        if (options.scrollIntoView)
+            elm.blur();
+        elm.setSelectionRange(options.start, options.end, options.direction);
+        if (options.scrollIntoView)
+            elm.focus();
+    }
+}
+/** clean whole selection */
+function clearWindowSelection() {
+    if (window?.getSelection) {
+        const selection = window.getSelection();
+        if (selection) {
+            // Chrome
+            selection.empty?.();
+            // Firefox
+            selection.removeAllRanges?.();
+        }
+    }
+}
+
+export { a11yKeyboard, capitalize, checkDefaultPrevented, checkElementName, clearWindowSelection, getRefElement, getSelectionPosition, getTitle, globalStateClasses, isDeleteKeyboardEvent, isSuiElement, isUrl, isWebKit154, omit, outerSize, pick, preloadImg, removeClassName, runKeyHandler, setSelectionPosition, useClasses };