funda-ui 4.7.625 → 4.7.711

package/lib/esm/Popover/index.scss

@@ -0,0 +1,272 @@
+
+
+/* ======================================================
+    <!-- Popover -->
+/* ====================================================== */
+
+
+/*
+ * 1. Base Styles
+ * 2. Position Modifiers - Top
+ * 3. Position Modifiers - Top Left
+ * 4. Position Modifiers - Top Right
+ * 5. Position Modifiers - Bottom
+ * 6. Position Modifiers - Bottom Left
+ * 7. Position Modifiers - Bottom Right
+ * 8. Position Modifiers - Left
+ * 9. Position Modifiers - Right
+ * 10. Size
+*/
+
+.cus-popover__wrapper {
+
+    --cus-popover-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
+    --cus-popover-content-bg: rgba(17, 17, 17, 0.9);
+    --cus-popover-content-color: #fff;
+    --cus-popover-content-font-size: 0.75em;
+    --cus-popover-content-padding-x: 1em;
+    --cus-popover-content-padding-y: .5em;
+    --cus-popover-content-line-height: 1.5;
+    --cus-popover-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+    --cus-popover-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+    --cus-popover-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+    --cus-popover-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+
+    --cus-popover-arrow-width: 18px;
+    --cus-popover-arrow-height: 6px;
+    
+
+    position: absolute;
+    z-index: 1055;  /* --bs-modal-zindex */
+    pointer-events: none;
+    display: none;
+    margin-top: -.2rem;
+
+    &::before {
+        background-size: 100% auto !important;
+        content: "";
+        position: absolute;
+    }
+
+    &.active {
+        display: block !important;
+
+        &::before,
+        > .cus-popover__content {
+            opacity: 1;
+        }
+    }
+
+    &:focus {
+
+        &::before,
+        > .cus-popover__content {
+            opacity: 1;
+        }
+    }
+
+
+    &::before,
+    > .cus-popover__content {
+        backface-visibility: hidden;
+        will-change: transform;
+        opacity: 0;
+        box-sizing: border-box;
+        z-index: 10;
+        transform-origin: top;
+        box-shadow: var(--cus-popover-box-shadow);
+        transition: none !important;  /* Don't use transition if position is outside window */
+    }
+
+
+
+    /*
+	---------------------------
+	1. Base Styles
+	---------------------------
+	*/
+
+    > .cus-popover__content {
+        pointer-events: auto;
+        background: var(--cus-popover-content-bg);
+        border-radius: 4px;
+        color: var(--cus-popover-content-color);
+        content: attr(aria-label);
+        font-size: var(--cus-popover-content-font-size);
+        font-weight: normal;
+        text-transform: none;
+        padding: var(--cus-popover-content-padding-y) var(--cus-popover-content-padding-x);
+        white-space: nowrap;
+        box-sizing: content-box;
+        line-height: var(--cus-popover-content-line-height);
+        
+
+        img {
+            height: auto !important;
+            margin: .5rem 0;
+        }
+
+    }
+
+
+
+    /*
+    ---------------------------
+    2. Position Modifiers - Top
+    ---------------------------
+    */
+
+    &[data-microtip-position|="top"] {
+        &::before {
+            background: var(--cus-popover-arrow-bg-top);
+            height: var(--cus-popover-arrow-height);
+            width: var(--cus-popover-arrow-width);
+        }
+
+        > .cus-popover__content {
+            margin-bottom: var(--cus-popover-arrow-height);
+        }
+
+        &::before {
+            top: calc(100% - var(--cus-popover-arrow-height));
+            left: calc(var(--cus-popover-arrow-width)/2 * -1);
+        }
+
+        > .cus-popover__content {
+            bottom: calc(100% + var(--cus-popover-arrow-height));
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+
+    /*
+    ---------------------------
+    3. Position Modifiers - Top Left
+    ---------------------------
+    */
+
+    &[data-microtip-position="top-left"] {
+        > .cus-popover__content {
+            bottom: calc(100% + var(--cus-popover-arrow-height));
+            left: 50%;
+            transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
+        }
+
+    }
+
+
+
+    /*
+    ---------------------------
+    4. Position Modifiers - Top Right
+    ---------------------------
+    */
+
+    &[data-microtip-position="top-right"] {
+        > .cus-popover__content {
+            bottom: calc(100% + var(--cus-popover-arrow-height));
+            left: 50%;
+            transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
+        }
+    }
+
+    /*
+    ---------------------------
+    5. Position Modifiers - Bottom
+    ---------------------------
+    */
+
+
+    &[data-microtip-position|="bottom"] {
+        &::before {
+            background: var(--cus-popover-arrow-bg-bottom);
+            height: var(--cus-popover-arrow-height);
+            width: var(--cus-popover-arrow-width);
+            margin-top: 5px;
+            margin-bottom: 0;
+        }
+
+        > .cus-popover__content {
+            margin-top: var(--cus-popover-arrow-height);
+        }
+
+        &::before {
+            bottom: calc(100% - var(--cus-popover-arrow-height));
+            left: calc(var(--cus-popover-arrow-width)/2 * -1);
+        }
+
+        > .cus-popover__content {
+            bottom: auto;
+            top: calc(100% + var(--cus-popover-arrow-height));
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+
+    /*
+    ---------------------------
+    6. Position Modifiers - Bottom Left
+    ---------------------------
+    */
+
+
+    &[data-microtip-position="bottom-left"] {
+        > .cus-popover__content {
+            bottom: auto;
+            top: calc(100% + var(--cus-popover-arrow-height));
+            left: 50%;
+            transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
+        }
+    }
+
+    /*
+    ---------------------------
+    7. Position Modifiers - Bottom Right
+    ---------------------------
+    */
+
+
+    &[data-microtip-position="bottom-right"] {
+        > .cus-popover__content {
+            bottom: auto;
+            top: calc(100% + var(--cus-popover-arrow-height));
+            left: 50%;
+            transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
+        }
+    }
+
+
+
+
+    /*
+    ---------------------------
+    10. Size
+    ---------------------------
+    */
+    &[data-microtip-size="auto"].cus-popover__content {
+        white-space: nowrap;
+        width: auto;
+        max-width: 530px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &[data-microtip-size="small"].cus-popover__content {
+        white-space: initial;
+        width: 80px;
+    }
+
+    &[data-microtip-size="medium"].cus-popover__content {
+        white-space: initial;
+        width: 150px;
+    }
+
+    &[data-microtip-size="large"].cus-popover__content {
+        white-space: initial;
+        width: 260px;
+    }
+
+}
+  

package/lib/esm/Popover/index.tsx

@@ -0,0 +1,4 @@
+export { default } from './Popover';
+export { default as PopoverTrigger } from './PopoverTrigger';
+export { default as PopoverContent } from './PopoverContent';
+export { default as PopoverClose } from './PopoverClose';

package/lib/esm/Radio/index.tsx

@@ -355,7 +355,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
     //
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);
@@ -374,7 +374,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
    
         //
@@ -390,7 +390,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         onBlur?.(event);

package/lib/esm/SearchBar/index.tsx

@@ -114,7 +114,6 @@ const SearchBar = forwardRef((props: SearchBarProps, externalRef: any) => {
     }
 
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
 
         //
         onFocus?.(event, onComposition);
@@ -125,11 +124,7 @@ const SearchBar = forwardRef((props: SearchBarProps, externalRef: any) => {
 
         setChangedVal(val);
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
+
 
         //
         onChange?.(event, onComposition);
@@ -140,11 +135,7 @@ const SearchBar = forwardRef((props: SearchBarProps, externalRef: any) => {
         const val = event.target.value;
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
+
 
         //
         onBlur?.(event, onComposition);
@@ -178,7 +169,12 @@ const SearchBar = forwardRef((props: SearchBarProps, externalRef: any) => {
         <>
 
 
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+            <div className={combinedCls(
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
+            )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label" >{label}</label>}</> : null}
 
                 <div className={combinedCls(

package/lib/esm/Select/index.tsx

@@ -1207,10 +1207,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         if (parseFloat(oldHeight) > filteredHeight) {
             listContentRef.current.style.height = filteredHeight + 'px';
-            console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
+            // console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
         } else {
             listContentRef.current.style.height = oldHeight + 'px';
-            console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
+           //  console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
         }
 
     }

package/lib/esm/Switch/index.tsx

@@ -55,7 +55,7 @@ const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
     const [val, setVal] = useState<boolean>(false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
 
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);    
@@ -69,7 +69,7 @@ const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
         
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         if (typeof (onChange) === 'function') {
@@ -85,7 +85,7 @@ const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         onBlur?.(event);

package/lib/esm/TagInput/index.scss

@@ -2,17 +2,17 @@
     <!-- Tag Input -->
 /* ====================================================== */
 
-.tag-input__wrapper {
+.taginput__wrapper {
 
-    --tag-input-control-border-radius: 0.375rem;
-    --tag-input-control-wrapper-bg: #fff;
-    --tag-input-control-wrapper-border-color: #dee2e6;
-    --tag-input-control-color: #adb5bd;
-    --tag-input-list-bg: #efefef;
-    --tag-input-removebtn-fill: #000;
-    --tag-input-removebtn-hover-fill: #f00;
-    --tag-input-focus-border-color:#86b7fe;
-    --tag-input-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
+    --taginput-control-border-radius: 0.375rem;
+    --taginput-control-wrapper-bg: #fff;
+    --taginput-control-wrapper-border-color: #dee2e6;
+    --taginput-control-color: #adb5bd;
+    --taginput-list-bg: #efefef;
+    --taginput-removebtn-fill: #000;
+    --taginput-removebtn-hover-fill: #f00;
+    --taginput-focus-border-color:#86b7fe;
+    --taginput-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
 
 
     display: flex;
@@ -26,7 +26,7 @@
     }
 
     
-    .tag-input__control-wrapper {
+    .taginput__control-wrapper {
         display: flex;
 
         > div {
@@ -37,16 +37,16 @@
 
             /* bootstrap style that match ".form-control" */
             padding: 0.375rem;
-            background-color: var(--tag-input-control-wrapper-bg);
+            background-color: var(--taginput-control-wrapper-bg);
             background-clip: padding-box;
-            border: 1px solid var(--tag-input-control-wrapper-border-color);
+            border: 1px solid var(--taginput-control-wrapper-border-color);
             appearance: none;
-            border-radius: var(--tag-input-control-border-radius);
+            border-radius: var(--taginput-control-border-radius);
             transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
             padding-bottom: 1px;
 
 
-            .tag-input__control {
+            .taginput__control {
                 margin-bottom: 0.375rem;
                 
                 input {
@@ -61,7 +61,7 @@
                     font-size: 0.875rem;
                     font-weight: 400;
                     line-height: 1.5;
-                    color: var(--tag-input-control-color);
+                    color: var(--taginput-control-color);
 
                     &:focus {
                         outline: none;
@@ -76,14 +76,14 @@
     }
 
 
-    ul.tag-input__list {
+    ul.taginput__list {
         li {
             display: inline-block;
             margin: 5px;
             margin-bottom: 0;
             padding: .1rem 1.5rem .1rem 1rem;
             font-size: 0.875rem;
-            background: var(--tag-input-list-bg);
+            background: var(--taginput-list-bg);
             border-radius: 30px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -100,12 +100,12 @@
                 transform: translateY(-50%);
 
                 path {
-                    fill: var(--tag-input-removebtn-fill);
+                    fill: var(--taginput-removebtn-fill);
                 }
 
                 &:hover {
                     path {
-                        fill: var(--tag-input-removebtn-hover-fill);
+                        fill: var(--taginput-removebtn-hover-fill);
                     }
                 }
             }
@@ -114,11 +114,11 @@
 
     }
 
-    &.focus {
-        .tag-input__control-wrapper {
+    &.focus-floating {
+        .taginput__control-wrapper {
             > div {
-                box-shadow: var(--tag-input-focus-box-shadow);
-                border-color: var(--tag-input-focus-border-color);
+                box-shadow: var(--taginput-focus-box-shadow);
+                border-color: var(--taginput-focus-border-color);
             } 
         }
     }

package/lib/esm/TagInput/index.tsx

@@ -209,12 +209,6 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
     function handleChange(event: ChangeEvent<HTMLInputElement>) {
 
         const val = event.target.value;
-        
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
 
         //
         let _alreadyInItems = alreadyInItems;
@@ -239,7 +233,8 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
 
 
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
+        // tag style
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);
@@ -250,14 +245,9 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
         const el = event.target;
         const val = event.target.value;
 
+        setUserInput('');
+        setAlreadyInItems(false);
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
-        //
         onBlur?.(event);
     }
 
@@ -277,16 +267,19 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
         <>
 
             <div className={combinedCls(
-                'tag-input__wrapper',
-                clsWrite(wrapperClassName, 'mb-3 position-relative')
+                'taginput__wrapper',
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': userInput !== ''
+                }
             )} ref={rootRef}>
 
                 {label ? <>{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-label">{label}</label>}</> : null}
 
 
-                <div className="tag-input__control-wrapper">
+                <div className="taginput__control-wrapper">
                     <div>
-                        <ul className="tag-input__list">
+                        <ul className="taginput__list">
 
                              {/* ITEMS LIST */}
                             {typeof renderSelectedValue === 'function' ? <>
@@ -308,7 +301,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
 
 
                         <div className={combinedCls(
-                            'tag-input__control',
+                            'taginput__control',
                             {
                                 'disabled': disabled
                             }
@@ -321,7 +314,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
 
                                 // Don't use "name", it's just a container to display the label
                                 data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
-                                data-tag-input
+                                data-taginput
                                 autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
                                 autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
                                 spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}

package/lib/esm/Textarea/index.tsx

@@ -335,7 +335,6 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
 
     function handleFocus(event: FocusEvent<HTMLTextAreaElement>): void {
         const el = event.target;
-        rootRef.current?.classList.add('focus');
 
         //
         onFocus?.(event, valRef.current as HTMLTextAreaElement);     
@@ -346,12 +345,6 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
 
         setChangedVal(curVal);
 
-        //----
-        //remove focus style
-        if (curVal === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onChange?.(event, valRef.current as HTMLTextAreaElement, curVal);
 
@@ -368,12 +361,6 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
         const val = el.value;
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onBlur?.(event, valRef.current as HTMLTextAreaElement);
 
@@ -516,7 +503,12 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
     return (
         <>
 
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+            <div className={combinedCls(
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
+            )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}