funda-ui 4.5.677 → 4.5.680

package/ColorPicker/index.js

@@ -603,6 +603,8 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     htmlFor: idRes,
     className: "form-label"
   }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "position-relative"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "input-group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
     ref: function ref(node) {
@@ -649,7 +651,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     className: "text-danger"
   }, "*"))) : '', changedVal === '' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "custom-colorpicker__transparent-placeholder"
-  })) : null));
+  })) : null)));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ColorPicker);
 })();

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 UIUX Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAM AGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/cjs/ColorPicker/index.js

@@ -603,6 +603,8 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     htmlFor: idRes,
     className: "form-label"
   }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "position-relative"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "input-group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
     ref: function ref(node) {
@@ -649,7 +651,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     className: "text-danger"
   }, "*"))) : '', changedVal === '' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "custom-colorpicker__transparent-placeholder"
-  })) : null));
+  })) : null)));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ColorPicker);
 })();

package/lib/esm/ColorPicker/index.tsx

@@ -137,59 +137,63 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
             )} 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="position-relative">
                 <div className="input-group">
-                    <input
-                        ref={(node) => {
-                            valRef.current = node;
-                            if (typeof externalRef === 'function') {
-                                externalRef(node);
-                            } else if (externalRef) {
-                                externalRef.current = node;
-                            }
-                        }}
-
-                        
-                        tabIndex={tabIndex || 0}
-                        type='color'
-                        className={combinedCls(
-                            clsWrite(controlClassName, 'form-control custom-colorpicker-control flex-grow-0'),
-                            controlExClassName
-                        )}
-                        value={changedVal}
-                        onFocus={handleFocus}
-                        onBlur={handleBlur}
-                        onChange={handleChange}
-                        disabled={disabled || null}
-                        readOnly={readOnly || null}
-                        style={style}
-                        {...attributes}
-                    />
-
-                    {/* Prevents the color from automatically becoming #000000 when it is empty */}
-                    <input
-                        tabIndex={-1}
-                        type="hidden"
-                        id={idRes}
-                        name={name}
-                        value={changedVal}  // do not use `defaultValue`
-                        onChange={() => void(0)}
-                        required={required || null}
-                        {...attributes}
-                    />
-
-                    {changedVal !== '' ? <><button tabIndex={-1} type="button" className={clearBtnClassName || 'btn btn-link btn-sm'} onClick={(e: React.MouseEvent) => {
-                        setChangedVal('');
-                        onChange?.(e);
-                        onClear?.(e);
-                    }}>{clearBtnLabel || 'clear'}
-                    </button></> : null}
-
+                        <input
+                            ref={(node) => {
+                                valRef.current = node;
+                                if (typeof externalRef === 'function') {
+                                    externalRef(node);
+                                } else if (externalRef) {
+                                    externalRef.current = node;
+                                }
+                            }}
+
+                            
+                            tabIndex={tabIndex || 0}
+                            type='color'
+                            className={combinedCls(
+                                clsWrite(controlClassName, 'form-control custom-colorpicker-control flex-grow-0'),
+                                controlExClassName
+                            )}
+                            value={changedVal}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            disabled={disabled || null}
+                            readOnly={readOnly || null}
+                            style={style}
+                            {...attributes}
+                        />
+
+                        {/* Prevents the color from automatically becoming #000000 when it is empty */}
+                        <input
+                            tabIndex={-1}
+                            type="hidden"
+                            id={idRes}
+                            name={name}
+                            value={changedVal}  // do not use `defaultValue`
+                            onChange={() => void(0)}
+                            required={required || null}
+                            {...attributes}
+                        />
+
+                        {changedVal !== '' ? <><button tabIndex={-1} type="button" className={clearBtnClassName || 'btn btn-link btn-sm'} onClick={(e: React.MouseEvent) => {
+                            setChangedVal('');
+                            onChange?.(e);
+                            onClear?.(e);
+                        }}>{clearBtnLabel || 'clear'}
+                        </button></> : null}
+
+
+                    </div>
+                    {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
+
+                    {changedVal === '' ? <><div className="custom-colorpicker__transparent-placeholder"></div></> : null}
 
                 </div>
-                {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
-
-                {changedVal === '' ? <><div className="custom-colorpicker__transparent-placeholder"></div></> : null}
 
+                
             </div>
 
 

package/lib/esm/Tabs/Tabs.tsx

@@ -18,7 +18,7 @@ export type TabsProps = {
     animTransitionDuration?: number;
     /** -- */
     style?: React.CSSProperties;
-    onChange?: (nav: any, targetId: any, index: number, persistentIndex: number) => void;
+    onChange?: (nav: HTMLElement, targetId: string, index: number, persistentIndex: number) => void;
     onLoad?: (func: Function) => void;
 	children: React.ReactNode | React.ReactNode[];
     

package/package.json

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