@ringcentral/spring-base 1.7.0 → 1.8.0

package/utils.js

@@ -17,10 +17,6 @@ const a11yKeyboard = {
     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.');
@@ -28,7 +24,6 @@ function capitalize(string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-/** check is that event preventDefault */
 const checkDefaultPrevented = (fc) => {
     return (e, ...args) => {
         if (e.defaultPrevented)
@@ -60,47 +55,11 @@ const globalStateClasses = {
     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 = [];
@@ -116,7 +75,6 @@ const useClasses = (prefix, inputClasses, className) => {
                 classList.push(`${DEFAULT_PREFIX}${prefix}-${classValue}`);
             }
             if (hasCustomClasses) {
-                // add selected class to map for use in inputClasses
                 selectedMap.set(simpleCamelCase(classValue), 1);
             }
         };
@@ -146,14 +104,12 @@ const useClasses = (prefix, inputClasses, className) => {
             }
         });
         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;
 };
@@ -164,33 +120,18 @@ const isSuiElement = (element, suiNames) => {
 };
 
 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 {
@@ -207,12 +148,10 @@ function outerSize(el) {
     };
 }
 
-/** 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();
@@ -230,24 +169,6 @@ function preloadImg(url) {
     });
 }
 
-/**
- * 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)
@@ -272,26 +193,14 @@ function cleanClass(elm, removeClass, fullMatch) {
         .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;
@@ -302,14 +211,9 @@ function getSelectionPosition(sourceTarget) {
         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);
@@ -317,14 +221,11 @@ function setSelectionPosition(target, options) {
             elm.focus();
     }
 }
-/** clean whole selection */
 function clearWindowSelection() {
     if (window?.getSelection) {
         const selection = window.getSelection();
         if (selection) {
-            // Chrome
             selection.empty?.();
-            // Firefox
             selection.removeAllRanges?.();
         }
     }