funda-ui 4.2.375 → 4.2.445

package/lib/esm/MultipleSelect/index.scss

@@ -87,8 +87,7 @@
             cursor: default;
             position: relative;
             font-size: var(--m-select-body-font-size);
-            display: flex;
-            justify-content: space-between;
+            display: block;
             background: var(--m-select-options-item-bg);
             border-bottom: 1px solid var(--m-select-options-item-dividingline-color);
 
@@ -119,47 +118,51 @@
             &:last-child {
                 border-bottom: none;
             }
-            > span {
+            > div {
                 padding: .35rem .75rem;
-                display: inline-block;
-                max-width: 100%;
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 word-wrap: break-word;
                 word-break: break-word;
-            }
 
-            > strong {
-                font-weight: normal;
-            }
-            
-            > i {
-                display: inline-block;
-                padding: .35rem .75rem;
-                cursor: pointer;
 
-                svg {
-                    path {
-                        fill: var(--m-select-options-item-icon-color);
+                > strong {
+                    font-weight: normal;
+                    display: flex;
+                    align-items: center;
+
+                    .arrow {
+                        display: inline-block;
+                        margin-left: .2rem;
+                    }
+
+                }
+
+                &.active {
+                    .arrow {
+                        transform: rotate(90deg);
                     }
                 }
-            }
 
 
+                > i {
+                    display: inline-block;
+                    cursor: pointer;
 
-            a {
-                color: #999;
-                text-decoration: none;
-                padding: 0;
-                display: block;
-                cursor: pointer;
-                &.m-select__item-action {
-                    position: absolute;
-                    right: 0.5rem;
-                    top: 0.5rem;
+                    svg {
+                        path {
+                            fill: var(--m-select-options-item-icon-color);
+                        }
+                    }
                 }
+
             }
+
         }
+
         div {
             &.m-select__selected__container {
                 .m-select__header {
@@ -232,8 +235,36 @@
     }
 
 
+    /*-------- Multilevel --------*/
+    ul.m-select__options-contentlist {
+
+        > li {
+
+            ul {
+                transition: max-height 0.25s ease;
+                overflow: hidden;
+                position: relative;
+                padding-left: 1rem;
+            }
+        }
+
+        > li:not(.active) {
+
+            ul {
+                max-height: 0;
+            }
+        }
+
+
+        > li ul ul {
+            margin-top: auto;
+        }
+
+    }
+
+
     /*-------- List --------*/
-    .m-select__options-contentlist {
+    ul.m-select__options-contentlist {
         position: relative;
         width: 100%;
         overflow: hidden;
@@ -252,7 +283,7 @@
             cursor: grab;
         }
     }
-    .m-select__options-contentlist--hide {
+    ul.m-select__options-contentlist--hide {
         overflow: hidden;
         height: auto;
     }

package/lib/esm/MultipleSelect/index.tsx

@@ -13,6 +13,10 @@ import {
 
 
 
+import { multiSelControlOptionExist } from './multiple-select-utils/func';
+import ItemList from './ItemList';
+
+
 export interface OptionConfig {
     [propName: string]: string | number | boolean;
 }
@@ -20,6 +24,7 @@ export interface OptionConfig {
 
 type MultipleSelectProps = {
     wrapperClassName?: string;
+    childClassName?: string;
     wrapperMinHeight?: string;
     wrapperMinWidth?: string;
     availableHeaderTitle?: string;
@@ -32,6 +37,8 @@ type MultipleSelectProps = {
     hierarchical?: boolean;
     indentation?: string;
     doubleIndent?: boolean;
+    alternateCollapse?: boolean;
+    arrow?: React.ReactNode;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;
@@ -59,6 +66,7 @@ type MultipleSelectProps = {
 const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any) => {
     const {
         wrapperClassName,
+        childClassName,
         wrapperMinHeight,
         wrapperMinWidth,
         availableHeaderTitle,
@@ -71,6 +79,8 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
         hierarchical,
         indentation,
         doubleIndent,
+        alternateCollapse,
+        arrow,
         options,
         disabled,
         required,
@@ -117,12 +127,6 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
     const [hasErr, setHasErr] = useState<boolean>(false);
 
 
-    const multiSelControlOptionExist = (arr: any[], val: any) => {
-        const _data = arr.filter(Boolean);
-        return _data.map((v: any) => v.toString()).includes(val.toString());
-    };
-    
-
     async function fetchData(params: any) {
         
         // set default value
@@ -170,6 +174,12 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
             return _ORGIN_DATA;
         } else {
 
+            // Set hierarchical categories ( with sub-categories )
+            if ( hierarchical ) {
+                optionsDataInit = addTreeDepth(optionsDataInit);
+                addTreeIndent(optionsDataInit, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
+            }
+
                
             // remove Duplicate objects from JSON Array
             optionsDataInit = removeArrDuplicateItems(optionsDataInit, 'value');
@@ -460,49 +470,26 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
                             <a href="#" className="m-select__btn--add-all" onClick={handleSelectAll}>{addAllBtnLabel || 'Add all'}</a>
                         </div>
-                        <ul className="m-select__available m-select__options-contentlist" ref={availableListRef}>
-
-                            {/* OPTIONS LIST */}
-                            {dataInit ? dataInit.map((item: any, i: number) => {
-
-                                
-                                return <li
-                                    key={'item' + i}
-                                    className={`${item.disabled ? 'disabled' : ''} ${multiSelControlOptionExist(valSelected, item.value) ? 'hide' : ''}`}
-                                    data-index={i}
-                                    data-value={`${item.value}`} 
-                                    data-label={`${item.label}`}
-                                    data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`} 
-                                    data-disabled={item.disabled || 'false'}
-                                    data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`} 
-                                    data-itemdata={JSON.stringify(item)} 
-                                >
-                                   
-                                    <span>
-                                        <strong dangerouslySetInnerHTML={{
-                                            __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
-                                        }}></strong>
-                                        <a
-                                            href="#"
-                                            className="m-select__item-action"
-                                        ></a>
-                                    </span>
-                                    <i
-                                        onClick={(e: React.MouseEvent) => {
-                                            selectItem((e.target as  any).closest('li'));
-                                        }}>
-                                        {iconAdd ? <>{iconAdd}</> : <><svg width="15px" height="15px" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16 12.75H12.75V16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16V12.75H8C7.59 12.75 7.25 12.41 7.25 12C7.25 11.59 7.59 11.25 8 11.25H11.25V8C11.25 7.59 11.59 7.25 12 7.25C12.41 7.25 12.75 7.59 12.75 8V11.25H16C16.41 11.25 16.75 11.59 16.75 12C16.75 12.41 16.41 12.75 16 12.75Z" fill="#000" /></svg></>}
-
-                                        
-                                    </i>
-
-                                </li>;
-                            }) : null}
-
-                            {/* /OPTIONS LIST */}
-
-                         
-                        </ul>
+
+
+
+                        {/* OPTIONS LIST */}
+                        <ItemList
+                            root={rootRef.current}
+                            listContainerClassName="m-select__available m-select__options-contentlist"
+                            ref={availableListRef}
+                            indentStr={INDENT_LAST_PLACEHOLDER}
+                            valSelected={valSelected}
+                            iconAdd={iconAdd}
+                            onSelect={selectItem}
+                            alternateCollapse={alternateCollapse}
+                            first={true}
+                            arrow={arrow}
+                            data={dataInit}
+                            childClassName={childClassName || 'm-select__options-contentlist-custom'}
+                        />
+                        {/* /OPTIONS LIST */}
+
                     </div>
 
 
@@ -517,44 +504,26 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                             <span className="m-select__title" dangerouslySetInnerHTML={{__html: `${selectedHeaderTitle || ''}`}}></span>
                             <a href="#" className="m-select__btn--remove-all" onClick={handleRemoveAll}>{removeAllBtnLabel || 'Remove all'}</a>
                         </div>
-                        <ul className="m-select__selected m-select__options-contentlist--sortable m-select__options-contentlist" ref={selectedListRef}>
-
-                            {/* OPTIONS LIST */}
-                            {valSelectedData ? valSelectedData.map((item: any, i: number) => {
-                                return <li
-                                    key={'item-selected' + i}
-                                    className="selected"
-                                    data-index={i}
-                                    data-value={`${item.value}`} 
-                                    data-label={`${item.label}`}
-                                    data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`} 
-                                    data-disabled={item.disabled || 'false'}
-                                    data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`} 
-                                    data-itemdata={JSON.stringify(item)} 
-                                >
-                                   
-                                    <span>
-                                        <strong dangerouslySetInnerHTML={{
-                                            __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
-                                        }}></strong>
-                                        <a
-                                            href="#"
-                                            className="m-select__item-action"
-                                        ></a>
-                                    </span>
-                                    <i
-                                        onClick={(e: React.MouseEvent) => {
-                                            removeItem((e.target as  any).closest('li'));
-                                        }}>
-                                        {iconRemove ? <>{iconRemove}</> : <><svg width="15px" height="15px" viewBox="0 0 24 24" fill="none"><path fillRule="evenodd" clipRule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" fill="#000" /></svg></>}
-                                        
-                                    </i>
-
-                                </li>;
-                            }) : null}
-                            {/* /OPTIONS LIST */}
-
-                        </ul>
+
+
+                        {/* OPTIONS LIST */}
+                        <ItemList
+                            root={rootRef.current}
+                            listContainerClassName="m-select__selected m-select__options-contentlist--sortable m-select__options-contentlist"
+                            ref={selectedListRef}
+                            indentStr={INDENT_LAST_PLACEHOLDER}
+                            valSelected={valSelected}
+                            iconRemove={iconRemove}
+                            onSelect={removeItem}
+                            alternateCollapse={alternateCollapse}
+                            first={true}
+                            arrow={arrow}
+                            data={valSelectedData}
+                            childClassName={childClassName || 'm-select__options-contentlist--custom'}
+                            selected
+                        />
+                        {/* /OPTIONS LIST */}
+
                     </div>
 
 

package/lib/esm/MultipleSelect/multiple-select-utils/func.ts

@@ -0,0 +1,29 @@
+
+/**
+ * Format indent value
+ * @param {String|Array} inputData 
+ * @param {String} placeholder 
+ * @returns {String|Array}
+ */
+export function formatIndentVal(inputData: any, placeholder: string) {
+    const reVar = new RegExp(placeholder, 'g');
+    if (Array.isArray(inputData)) {
+        return inputData.map((s: any) => String(s).replace(reVar, '').replace(/\ /ig, ''));
+    } else {
+        const _txt: any = typeof inputData === 'string' ? inputData : inputData.toString();
+        return _txt.replace(reVar, '').replace(/\ /ig, '');
+    }
+
+}
+
+
+/**
+ * Determine whether the option exists
+ * @param val 
+ * @returns 
+ */
+export function multiSelControlOptionExist(arr: any[], val: any) {
+    const _data = arr.filter(Boolean);
+    return _data.map((v: any) => v.toString()).includes(val.toString());
+
+}

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.2.375",
+  "version": "4.2.445",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",