funda-ui 4.7.625 → 4.7.701

package/lib/esm/Popover/PopoverContent.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef } from 'react';
+import RootPortal from 'funda-root-portal';
+import { combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import { usePopoverContext } from './Popover';
+
+// PopoverContent component
+export type PopoverContentProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => {
+    const { children, className } = props;
+    const {
+        isOpen,
+        contentRef,
+        id,
+        direction,
+        size,
+        popupArrowStyle,
+        popupContentStyle,
+        wrapperClassName,
+        position
+    } = usePopoverContext();
+
+    const wrapperRef = (node: HTMLDivElement | null) => {
+        if (node) {
+            (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref && node) {
+            (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+    };
+
+    return (
+        <RootPortal show={isOpen} containerClassName="Popover">
+            <div
+                ref={wrapperRef}
+                id={`cus-popover__wrapper-${id}`}
+                className={combinedCls(
+                    'cus-popover__wrapper',
+                    wrapperClassName,
+                    'active'
+                )}
+                role="popover"
+                data-microtip-position={direction || 'top'}
+                data-microtip-size={size || 'auto'}
+                style={{
+                    left: position.x,
+                    top: position.y,
+                    display: 'none',
+                    ...popupArrowStyle
+                }}
+            >
+                <div 
+                    className={combinedCls('cus-popover__content', className)} 
+                    style={popupContentStyle}
+                >
+                    {children}
+                </div>
+            </div>
+        </RootPortal>
+    );
+});
+
+PopoverContent.displayName = 'PopoverContent';
+
+export default PopoverContent;

package/lib/esm/Popover/PopoverTrigger.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import { usePopoverContext } from './Popover';
+
+// PopoverTrigger component
+export type PopoverTriggerProps = {
+    asChild?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+
+const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>((props, ref) => {
+    const { asChild, className, children } = props;
+    const { triggerRef, setIsOpen, isOpen, id, direction, size } = usePopoverContext();
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        setIsOpen(!isOpen);
+    };
+
+    const setRefs = (node: HTMLElement | null) => {
+        if (node) {
+            (triggerRef as React.MutableRefObject<HTMLElement | null>).current = node;
+        }
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref && node) {
+            (ref as React.MutableRefObject<HTMLElement | null>).current = node;
+        }
+    };
+
+    const triggerProps: any = {
+        ref: setRefs,
+        'data-overlay-id': `cus-popover__wrapper-${id}`,
+        className: combinedCls(
+            'cus-popover__trigger',
+            clsWrite(className, 'd-inline-block')
+        ),
+        'data-microtip-position': direction || 'top',
+        'data-microtip-size': size || 'auto',
+        onClick: handleClick
+    };
+
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+            ...triggerProps,
+            ...(children.props || {})
+        });
+    }
+
+    return (
+        <div {...triggerProps}>
+            {children}
+        </div>
+    );
+});
+
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+export default PopoverTrigger;

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);
             } 
         }
     }