funda-ui 4.7.335 → 4.7.345

package/lib/esm/CascadingSelect/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
+import React, { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
 
 import RootPortal from 'funda-root-portal';
 
@@ -8,6 +8,8 @@ import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
 import {
     extractorExist,
     extractContentsOfBraces,
+    extractContentsOfMixedCharactersWithBraces, 
+    extractContentsOfMixedCharactersWithComma
 } from 'funda-utils/dist/cjs/extract';
 import {
     convertArrToValByBraces
@@ -24,7 +26,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import Group from './Group';
 
 
-export type CascadingSelectOptionChangeFnType = (input: any, currentData: any, index: any, depth: any, value: any, closeFunc: any) => void;
+export type CascadingSelectOptionChangeFnType = (input: any, currentData: any, index: any, depth: any, value: string, closeFunc: any) => void;
 
 
 export type CascadingSelectProps = {
@@ -32,6 +34,8 @@ export type CascadingSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;
+    controlGroupWrapperClassName?: string;
+    controlGroupTextClassName?: string;
     searchable?: boolean;
     searchPlaceholder?: string;
     perColumnHeadersShow?: boolean;
@@ -40,8 +44,15 @@ export type CascadingSelectProps = {
     label?: React.ReactNode | string;
     name?: string;
     placeholder?: string;
+    readOnly?: any;
     disabled?: any;
     required?: any;
+    requiredLabel?: React.ReactNode | string;
+    units?: React.ReactNode | string;
+    iconLeft?: React.ReactNode | string;
+    iconRight?: React.ReactNode | string;
+    minLength?: any;
+    maxLength?: any;
     /** Whether to use curly braces to save result and initialize default value */
     extractValueByBraces?: boolean;
     /** Set headers for each column group */
@@ -58,8 +69,8 @@ export type CascadingSelectProps = {
     /** Set a loader component to show while the component waits for the next load of data. 
      * e.g. `<span>Loading...</span>` or any fancy loader element */
     loader?: React.ReactNode;
-    /** Whether to show breadcrumb result */
-    displayResult?: boolean;
+    /** Whether it can be modified in the input box */
+    inputable?: boolean;
     /** Set an arrow of breadcrumb result */
     displayResultArrow?: React.ReactNode;
     /** Set an arrow of control */
@@ -85,21 +96,35 @@ export type CascadingSelectProps = {
     onChange?: CascadingSelectOptionChangeFnType | null;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;
+    /**
+     * Customize the function of formatting the value of the input input box, and the parameters are labels, values, and queryIds
+     * Returns a string as the value of the input
+     */
+    formatInputResult?: (param: Array<{label: string, value: string | number}>) => string;
 };
 
 
-const CascadingSelect = (props: CascadingSelectProps) => {
+const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: any) => {
     const {
         popupRef,
         wrapperClassName,
         controlClassName,
         controlExClassName,
+        controlGroupWrapperClassName,
+        controlGroupTextClassName,
         searchable = false,
         searchPlaceholder = '',
         perColumnHeadersShow = true,
         exceededSidePosOffset,
+        readOnly,
         disabled,
         required,
+        requiredLabel,
+        units,
+        iconLeft,
+        iconRight,
+        minLength,
+        maxLength,
         value,
         label,
         placeholder,
@@ -109,7 +134,7 @@ const CascadingSelect = (props: CascadingSelectProps) => {
         columnTitle,
         depth,
         loader,
-        displayResult,
+        inputable = false,
         displayResultArrow,
         controlArrow,
         valueType,
@@ -128,6 +153,7 @@ const CascadingSelect = (props: CascadingSelectProps) => {
         onChange,
         onBlur,
         onFocus,
+        formatInputResult,
         ...attributes
     } = props;
 
@@ -139,12 +165,29 @@ const CascadingSelect = (props: CascadingSelectProps) => {
     const uniqueID = useComId();
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
-    const valRef = useRef<any>(null);
+    const inputRef = useRef<any>(null);
     const listRef = useRef<any>(null);
 
     // searchable
     const [columnSearchKeywords, setColumnSearchKeywords] = useState<string[]>([]);
 
+
+    const propExist = (p: any) => {
+        return typeof p !== 'undefined' && p !== null && p !== '';
+    };
+
+    const resultInput = (curData: string[] | number[], curQueryIdsData: string[] | number[]) => {
+        return VALUE_BY_BRACES ? convertArrToValByBraces(curData.map((item: any, i: number) => `${item}[${curQueryIdsData[i]}]`)) : curData.map((item: any, i: number) => `${item}[${curQueryIdsData[i]}]`)!.join(',');
+    };
+
+    const resultInputPureText = (inputStr: string) => {
+        return VALUE_BY_BRACES ? `{${inputStr}[]}` : `${inputStr}[]`;
+
+        // value1: {{curLabel[curValue]}[]}
+        // value2: curLabel[curValue][]
+    };
+
+
     // exposes the following methods
     useImperativeHandle(
         popupRef,
@@ -214,18 +257,17 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
 
     function popwinPosInit(showAct: boolean = true) {
-        if (rootRef.current === null || valRef.current === null) return
+        if (rootRef.current === null || inputRef.current === null) return
 
         // update modal position
-        const _modalRef: any = document.querySelector(`#cas-select__items-wrapper-${idRes}`);
-        const _triggerRef: any = valRef.current;
-        const _triggerXaxisRef: any = rootRef.current;
+        const _modalRef: any = document.querySelector(`#casc-select__items-wrapper-${idRes}`);
+        const _triggerRef: any = inputRef.current;
 
         // console.log(getAbsolutePositionOfStage(_triggerRef));
 
         if (_modalRef === null) return;
 
-        const { x } = getAbsolutePositionOfStage(_triggerXaxisRef);
+        const { x } = getAbsolutePositionOfStage(_triggerRef);
         const { y, width, height } = getAbsolutePositionOfStage(_triggerRef);
         const _triggerBox = _triggerRef.getBoundingClientRect();
         let targetPos = '';
@@ -301,7 +343,7 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
     function popwinPosHide() {
 
-        const _modalRef: any = document.querySelector(`#cas-select__items-wrapper-${idRes}`);
+        const _modalRef: any = document.querySelector(`#casc-select__items-wrapper-${idRes}`);
 
         if (_modalRef !== null) {
             // remove classnames and styles
@@ -315,9 +357,9 @@ const CascadingSelect = (props: CascadingSelectProps) => {
         if (listRef.current === null) return;
 
         let latestDisplayColIndex: number = 0;
-        const currentItemsInner: any = listRef.current.querySelector('.cas-select__items-inner');
+        const currentItemsInner: any = listRef.current.querySelector('.casc-select__items-inner');
         if (currentItemsInner !== null) {
-            const colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.cas-select__items-col'));
+            const colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-select__items-col'));
             colItemsWrapper.forEach((perCol: any) => {
                 perCol.classList.remove('hide-col');
             });
@@ -481,8 +523,7 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
     function handleDisplayOptions(event: any) {
         if (event) event.preventDefault();
-
-        //
+        if (isShow) return;
         activate();
 
     }
@@ -503,8 +544,15 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
         // callback
         //////////////////////////////////////////
-        if (typeof (onChange) === 'function') {
-            onChange(valRef.current, resValue, index, level, inputVal, cancel);
+        if (typeof onChange === 'function') {
+            const curValString = valueType === 'value' ? inputVal[0] : inputVal[1];
+            const curValCallback = typeof formatInputResult === 'function' ? formatInputResult(
+                VALUE_BY_BRACES
+                    ? extractContentsOfMixedCharactersWithBraces(curValString)
+                    : extractContentsOfMixedCharactersWithComma(curValString)
+            ) : curValString;
+
+            onChange(inputRef.current, resValue, index, level, curValCallback, cancel);
         }
 
 
@@ -515,6 +563,12 @@ const CascadingSelect = (props: CascadingSelectProps) => {
         // All the elements from start(array.length - start) to the end of the array will be deleted.
         newData.splice(level + 1);
 
+        // When requesting a return asynchronously, a new column is added only under the currently clicked column, 
+        // and the previous column cannot be affected.
+        // Make sure that subsequent asynchronous requests will only insert new columns towards the level+1 position.
+        listData.current = [...newData];
+
+
         // active status
         if (resValue.children) {
             const childList = resValue.children;
@@ -541,10 +595,10 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
         // active current option with DOM
         //////////////////////////////////////////
-        const currentItemsInner: any = e.currentTarget.closest('.cas-select__items-inner');
+        const currentItemsInner: any = e.currentTarget.closest('.casc-select__items-inner');
         if (currentItemsInner !== null) {
             curData.forEach((v: any, col: number) => {
-                const colItemsWrapper = currentItemsInner.querySelectorAll('.cas-select__items-col');
+                const colItemsWrapper = currentItemsInner.querySelectorAll('.casc-select__items-col');
                 colItemsWrapper.forEach((perCol: HTMLUListElement) => {
                     const _col = Number(perCol.dataset.col);
 
@@ -608,7 +662,7 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
     function updateValue(arr: any[], targetVal: any, level: number | boolean = false) {
 
-        const inputEl: any = valRef.current;
+        const inputEl: any = inputRef.current;
         let _valueData: any, _labelData: any;
 
 
@@ -655,11 +709,10 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
         }
 
-
         // update selected data 
         //////////////////////////////////////////
-        const inputVal_0 = VALUE_BY_BRACES ? convertArrToValByBraces(_valueData.map((item: any, i: number) => `${item}[${_valueData[i]}]`)) : _valueData.map((item: any, i: number) => `${item}[${_valueData[i]}]`)!.join(',');
-        const inputVal_1 = VALUE_BY_BRACES ? convertArrToValByBraces(_labelData.map((item: any, i: number) => `${item}[${_valueData[i]}]`)) : _labelData.map((item: any, i: number) => `${item}[${_valueData[i]}]`)!.join(',');
+        const inputVal_0 = resultInput(_valueData, _valueData);
+        const inputVal_1 = resultInput(_labelData, _valueData);
 
         if (valueType === 'value') {
             if (inputEl !== null) setChangedVal(inputVal_0);
@@ -1102,14 +1155,14 @@ const CascadingSelect = (props: CascadingSelectProps) => {
         <>
 
             <div
-                className={clsWrite(wrapperClassName, 'cas-select__wrapper mb-3 position-relative', `cas-select__wrapper ${wrapperClassName}`)}
+                className={clsWrite(wrapperClassName, 'casc-select__wrapper mb-3 position-relative', `casc-select__wrapper ${wrapperClassName}`)}
                 ref={rootRef}
-                data-overlay-id={`cas-select__items-wrapper-${idRes}`}
+                data-overlay-id={`casc-select__items-wrapper-${idRes}`}
             >
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label" >{label}</label>}</> : null}
 
                 {triggerContent ? <>
-                    <div className={clsWrite(wrapperClassName, 'cas-select__trigger d-inline w-auto', `cas-select__trigger ${triggerClassName}`)} onClick={handleDisplayOptions}>{triggerContent}</div>
+                    <div className={clsWrite(wrapperClassName, 'casc-select__trigger d-inline w-auto', `casc-select__trigger ${triggerClassName}`)} onClick={handleDisplayOptions}>{triggerContent}</div>
                 </> : null}
 
 
@@ -1118,16 +1171,16 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
                         <div
                             ref={listRef}
-                            id={`cas-select__items-wrapper-${idRes}`}
-                            className="cas-select__items-wrapper position-absolute border shadow small"
+                            id={`casc-select__items-wrapper-${idRes}`}
+                            className="casc-select__items-wrapper position-absolute border shadow small"
                             style={{ zIndex: DEPTH, display: 'none' }}
                         >
-                            <ul className="cas-select__items-inner">
-                                {loading ? <><div className="cas-select__items-loader">{loader || <svg height="12px" width="12px" viewBox="0 0 512 512"><g><path fill="inherit" d="M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z" /><path fill="inherit" d="M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z" /><path fill="inherit" d="M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z" /><path fill="inherit" d="M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z" /><path fill="inherit" d="M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z" /><path fill="inherit" d="M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z" /><path fill="inherit" d="M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z" /><path fill="inherit" d="M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z" /></g></svg>}</div></> : null}
+                            <ul className="casc-select__items-inner">
+                                {loading ? <><div className="casc-select__items-loader">{loader || <svg height="12px" width="12px" viewBox="0 0 512 512"><g><path fill="inherit" d="M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z" /><path fill="inherit" d="M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z" /><path fill="inherit" d="M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z" /><path fill="inherit" d="M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z" /><path fill="inherit" d="M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z" /><path fill="inherit" d="M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z" /><path fill="inherit" d="M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z" /><path fill="inherit" d="M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z" /></g></svg>}</div></> : null}
                                 {showCloseBtn ? <a href="#" tabIndex={-1} onClick={(e) => {
                                     e.preventDefault();
                                     cancel();
-                                }} className="cas-select__close position-absolute top-0 end-0 mt-0 mx-1"><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a> : null}
+                                }} className="casc-select__close position-absolute top-0 end-0 mt-0 mx-1"><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a> : null}
 
 
 
@@ -1146,11 +1199,11 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
 
                                         return (
-                                            <li key={level} data-col={level} className="cas-select__items-col">
+                                            <li key={level} data-col={level} className="casc-select__items-col">
                
                                                 {/* SEARCH BOX */}
                                                 {searchable && (
-                                                    <div className="cas-select__items-col-searchbox">
+                                                    <div className="casc-select__items-col-searchbox">
                                                         <input
                                                             type="text"
                                                             placeholder={searchPlaceholder}
@@ -1189,36 +1242,124 @@ const CascadingSelect = (props: CascadingSelectProps) => {
                 ) : null}
 
 
+                <div className={combinedCls(
+                        'casc-select__val',
+                        {
+                            'inputable': inputable,
+                        }
 
-                <div className="cas-select__val" onClick={handleDisplayOptions}>
+                    )}
+                    onClick={handleDisplayOptions}
+                >
 
-                    {displayResult ? <div className="cas-select__result">{displayInfo()}</div> : null}
 
-                    
-                    <input
-                        ref={valRef}
-                        id={idRes}
-                        data-overlay-id={`cas-select__items-wrapper-${idRes}`}
-                        name={name}
-                        className={combinedCls(
-                            clsWrite(controlClassName, 'form-control'),
-                            controlExClassName
-                        )}
-                        placeholder={placeholder}
-                        value={changedVal} // placeholder will not change if defaultValue is used
-                        onFocus={handleFocus}
-                        onBlur={handleBlur}
-                        disabled={disabled || null}
-                        required={required || null}
-                        style={style}
-                        tabIndex={tabIndex || 0}
-                        readOnly
-                        {...attributes}
-                    />
+                    {/* INPIT */}
+                    <div className={combinedCls(
+                        'position-relative',
+                        clsWrite(controlGroupWrapperClassName, 'input-group'),
+                        {
+                            'has-left-content': propExist(iconLeft),
+                            'has-right-content': propExist(iconRight) || propExist(units)
+                        }
 
+                    )}>
+
+                        {propExist(iconLeft) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconLeft}</span></> : null}
+
+                        <div className="input-group-control-container flex-fill position-relative">
+                            <input
+                                ref={(node) => {
+                                    inputRef.current = node;
+                                    if (typeof externalRef === 'function') {
+                                        externalRef(node);
+                                    } else if (externalRef) {
+                                        externalRef.current = node;
+                                    }
+                                }}
+                                id={idRes}
+                                data-overlay-id={`casc-select__items-wrapper-${idRes}`}
+                                name={name}
+                                className={combinedCls(
+                                    clsWrite(controlClassName, 'form-control'),
+                                    controlExClassName,
+                                    {
+                                        'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units),
+                                        'rounded-start-0': propExist(iconLeft),
+                                        'rounded-end-0': propExist(iconRight) || propExist(units)
+                                    }
+                                )}
+
+                                placeholder={placeholder}
+                                value={(() => {
+                                    const curValForamt: string = resultInputPureText(changedVal);
+                                    let curValCallback: string = curValForamt;
+
+                                    // STEP 1
+                                    //============
+                                    if (typeof formatInputResult === 'function') {
+                               
+                                        return formatInputResult(
+                                            VALUE_BY_BRACES
+                                                ? extractContentsOfMixedCharactersWithBraces(curValCallback)
+                                                : extractContentsOfMixedCharactersWithComma(curValCallback)
+                                        );
+                                        
+                                    } else {
+                                        return changedVal;
+                                    }
+
+
+                                })()
+                                }
+                                // placeholder will not change if defaultValue is used
+                                onFocus={handleFocus}
+                                onBlur={handleBlur}
+                                autoComplete="off"
+                                disabled={disabled || null}
+                                readOnly={readOnly || null}
+                                required={required || null}
+                                minLength={minLength || null}
+                                maxLength={maxLength || null}
+                                style={style}
+                                tabIndex={tabIndex || 0}
+                                onChange={inputable ? (e) => {
+                                    setChangedVal(e.target.value);
+                                    if (typeof onChange === 'function') {
+                                        onChange(
+                                            e, // input dom event
+                                            null, // currentData
+                                            null, // index
+                                            null, // depth
+                                            e.target.value, // value
+                                            cancel
+                                        );
+                                    }
+                                } : undefined}
+                                {...attributes}
+
+                            />
+
+
+
+                            {/** REVIEW RESULT */}
+                            {!inputable ? <div className="casc-select__result">{displayInfo()}</div> : null}
+
+
+                            {/* Required marking */}
+                            {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2 pe-3"><span className="text-danger">*</span></span>}</> : ''}
+
+                        </div>
+
+
+                        {propExist(units) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{units}</span></> : null}
+                        {propExist(iconRight) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconRight}</span></> : null}
+
+                    </div>
+                    {/* /INPIT */}
+                 
 
                     {isShow ? <div
-                        className="cas-select__closemask"
+                        className="casc-select__closemask"
                         onClick={(e) => {
                             e.preventDefault();
                             cancel();
@@ -1249,6 +1390,6 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
         </>
     )
-};
+});
 
 export default CascadingSelect;

package/lib/esm/CascadingSelectE2E/Group.tsx

@@ -40,7 +40,7 @@ export default function Group(props: GroupProps) {
                         data-level={level}
                         data-query={item.queryId} 
                         className={combinedCls(
-                            'cas-select-e2e__opt',
+                            'casc-select-e2e__opt',
                             {
                                 'active': item.current
                             }
@@ -53,12 +53,12 @@ export default function Group(props: GroupProps) {
                 } else {
                     return columnTitle[level] === '' || perColumnHeadersShow === false ? null : <h3 
                     key={index} 
-                    className="cas-select-e2e__opt-header"
+                    className="casc-select-e2e__opt-header"
                     >
                         <span dangerouslySetInnerHTML={{
                         __html: columnTitle[level]
                     }}></span>
-                        <div className="cas-select-e2e__opt-header__clean">
+                        <div className="casc-select-e2e__opt-header__clean">
                             <a 
                                 tabIndex={-1} 
                                 href="#"