funda-ui 1.0.540 → 1.0.546

package/ColorPicker/index.css

@@ -1,10 +1,14 @@
 /* ======================================================
     <!-- Color Picker -->
 /* ====================================================== */
-.custom-form-control-color {
+.custom-colorpicker__wrapper {
+  position: relative;
   --color-control-border-radius: 0.375rem;
   --color-control-size: 30px;
   --color-control-border-color: rgba(0,0,0,.1);
+  /* placeholder */
+}
+.custom-colorpicker__wrapper .custom-colorpicker-control {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -15,24 +19,40 @@
   border: none;
   cursor: pointer;
 }
-.custom-form-control-color::-webkit-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker-control::-webkit-color-swatch {
   border: 2px solid var(--color-control-border-color);
 }
-.custom-form-control-color::-moz-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker-control::-moz-color-swatch {
   border: 2px solid var(--color-control-border-color);
 }
-.custom-form-control-color:disabled {
+.custom-colorpicker__wrapper .custom-colorpicker-control:disabled {
   cursor: not-allowed;
 }
-.custom-form-control-color.custom-form-control-color--rounded::-webkit-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker__transparent-placeholder {
+  position: absolute;
+  width: var(--color-control-size);
+  height: var(--color-control-size);
+  left: 0;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) repeat;
+}
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker-control::-webkit-color-swatch {
+  border-radius: var(--color-control-border-radius);
+}
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker-control::-moz-color-swatch {
   border-radius: var(--color-control-border-radius);
 }
-.custom-form-control-color.custom-form-control-color--rounded::-moz-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker__transparent-placeholder {
   border-radius: var(--color-control-border-radius);
 }
-.custom-form-control-color.custom-form-control-color--circle::-webkit-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker-control::-webkit-color-swatch {
+  border-radius: 50%;
+}
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker-control::-moz-color-swatch {
   border-radius: 50%;
 }
-.custom-form-control-color.custom-form-control-color--circle::-moz-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker__transparent-placeholder {
   border-radius: 50%;
 }

package/ColorPicker/index.d.ts

@@ -7,6 +7,8 @@ declare module 'react' {
 interface ColorPickerProps extends React.ComponentPropsWithoutRef<"input"> {
     wrapperClassName?: string;
     controlClassName?: string;
+    clearBtnClassName?: string;
+    clearBtnLabel?: string;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;

package/ColorPicker/index.js

@@ -96,7 +96,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-var _excluded = ["wrapperClassName", "controlClassName", "disabled", "required", "readOnly", "value", "label", "name", "shape", "id", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "clearBtnClassName", "clearBtnLabel", "disabled", "required", "readOnly", "value", "label", "name", "shape", "id", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -111,6 +111,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, _ref) {
   var wrapperClassName = props.wrapperClassName,
     controlClassName = props.controlClassName,
+    clearBtnClassName = props.clearBtnClassName,
+    clearBtnLabel = props.clearBtnLabel,
     disabled = props.disabled,
     required = props.required,
     readOnly = props.readOnly,
@@ -137,10 +139,10 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
   if (shape && typeof shape === 'string') {
     switch (shape) {
       case 'rounded':
-        shapeClassName = 'custom-form-control-color--rounded';
+        shapeClassName = 'custom-colorpicker--rounded';
         break;
       case 'circle':
-        shapeClassName = 'custom-form-control-color--circle';
+        shapeClassName = 'custom-colorpicker--circle';
         break;
     }
   }
@@ -182,7 +184,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     setChangedVal(value || '');
   }, [value]);
   return /*#__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: wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative",
+    className: wrapperClassName || wrapperClassName === '' ? "custom-colorpicker__wrapper  ".concat(shapeClassName, " ").concat(wrapperClassName) : "custom-colorpicker__wrapper mb-3 position-relative  ".concat(shapeClassName),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: idRes,
@@ -203,7 +205,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     },
     tabIndex: tabIndex || 0,
     type: "color",
-    className: "".concat(controlClassName || controlClassName === '' ? controlClassName : "form-control custom-form-control-color flex-grow-0", " ").concat(shapeClassName),
+    className: "".concat(controlClassName || controlClassName === '' ? controlClassName : "form-control custom-colorpicker-control flex-grow-0"),
     id: idRes,
     name: name,
     value: changedVal,
@@ -214,11 +216,20 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     required: required || null,
     readOnly: readOnly || null,
     style: style
-  }, attributes))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+  }, attributes)), 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("button", {
+    tabIndex: -1,
+    type: "button",
+    className: clearBtnClassName || 'btn btn-link btn-sm',
+    onClick: function onClick() {
+      setChangedVal('');
+    }
+  }, clearBtnLabel || 'clear')) : null), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "position-absolute end-0 top-0 my-2 mx-2"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     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));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ColorPicker);
 })();

package/Tree/index.js

@@ -916,22 +916,6 @@ function TreeList(props) {
       });
       activeClass(hyperlink, 'add', 'selected');
     }
-
-    // Note: that component re-rendering (such as routing changes) will cause collapsing problems 
-    // with `onSelect()`, please use `useMemo()` to wrap `<Tree />`, like this:
-    /*
-    function TreeMemo(props: any) {
-        const {t, callback, data} = props;
-        const dependencies = props.data !== null && props.data.length === 0 ? props.data : '';
-        return useMemo(() => {
-            return    <Tree
-                        data={data}
-                        showLine={true}
-                        onSelect={callback}
-                    />
-        }, [dependencies]);
-    }
-    */
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, {
       key: hyperlink.dataset.key,
       slug: hyperlink.dataset.slug,

package/lib/cjs/ColorPicker/index.d.ts

@@ -7,6 +7,8 @@ declare module 'react' {
 interface ColorPickerProps extends React.ComponentPropsWithoutRef<"input"> {
     wrapperClassName?: string;
     controlClassName?: string;
+    clearBtnClassName?: string;
+    clearBtnLabel?: string;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;

package/lib/cjs/ColorPicker/index.js

@@ -96,7 +96,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-var _excluded = ["wrapperClassName", "controlClassName", "disabled", "required", "readOnly", "value", "label", "name", "shape", "id", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "clearBtnClassName", "clearBtnLabel", "disabled", "required", "readOnly", "value", "label", "name", "shape", "id", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -111,6 +111,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, _ref) {
   var wrapperClassName = props.wrapperClassName,
     controlClassName = props.controlClassName,
+    clearBtnClassName = props.clearBtnClassName,
+    clearBtnLabel = props.clearBtnLabel,
     disabled = props.disabled,
     required = props.required,
     readOnly = props.readOnly,
@@ -137,10 +139,10 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
   if (shape && typeof shape === 'string') {
     switch (shape) {
       case 'rounded':
-        shapeClassName = 'custom-form-control-color--rounded';
+        shapeClassName = 'custom-colorpicker--rounded';
         break;
       case 'circle':
-        shapeClassName = 'custom-form-control-color--circle';
+        shapeClassName = 'custom-colorpicker--circle';
         break;
     }
   }
@@ -182,7 +184,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     setChangedVal(value || '');
   }, [value]);
   return /*#__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: wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative",
+    className: wrapperClassName || wrapperClassName === '' ? "custom-colorpicker__wrapper  ".concat(shapeClassName, " ").concat(wrapperClassName) : "custom-colorpicker__wrapper mb-3 position-relative  ".concat(shapeClassName),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: idRes,
@@ -203,7 +205,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     },
     tabIndex: tabIndex || 0,
     type: "color",
-    className: "".concat(controlClassName || controlClassName === '' ? controlClassName : "form-control custom-form-control-color flex-grow-0", " ").concat(shapeClassName),
+    className: "".concat(controlClassName || controlClassName === '' ? controlClassName : "form-control custom-colorpicker-control flex-grow-0"),
     id: idRes,
     name: name,
     value: changedVal,
@@ -214,11 +216,20 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     required: required || null,
     readOnly: readOnly || null,
     style: style
-  }, attributes))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+  }, attributes)), 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("button", {
+    tabIndex: -1,
+    type: "button",
+    className: clearBtnClassName || 'btn btn-link btn-sm',
+    onClick: function onClick() {
+      setChangedVal('');
+    }
+  }, clearBtnLabel || 'clear')) : null), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "position-absolute end-0 top-0 my-2 mx-2"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     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));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ColorPicker);
 })();

package/lib/cjs/Tree/index.js

@@ -916,22 +916,6 @@ function TreeList(props) {
       });
       activeClass(hyperlink, 'add', 'selected');
     }
-
-    // Note: that component re-rendering (such as routing changes) will cause collapsing problems 
-    // with `onSelect()`, please use `useMemo()` to wrap `<Tree />`, like this:
-    /*
-    function TreeMemo(props: any) {
-        const {t, callback, data} = props;
-        const dependencies = props.data !== null && props.data.length === 0 ? props.data : '';
-        return useMemo(() => {
-            return    <Tree
-                        data={data}
-                        showLine={true}
-                        onSelect={callback}
-                    />
-        }, [dependencies]);
-    }
-    */
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, {
       key: hyperlink.dataset.key,
       slug: hyperlink.dataset.slug,

package/lib/css/ColorPicker/index.css

@@ -1,10 +1,14 @@
 /* ======================================================
     <!-- Color Picker -->
 /* ====================================================== */
-.custom-form-control-color {
+.custom-colorpicker__wrapper {
+  position: relative;
   --color-control-border-radius: 0.375rem;
   --color-control-size: 30px;
   --color-control-border-color: rgba(0,0,0,.1);
+  /* placeholder */
+}
+.custom-colorpicker__wrapper .custom-colorpicker-control {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -15,24 +19,40 @@
   border: none;
   cursor: pointer;
 }
-.custom-form-control-color::-webkit-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker-control::-webkit-color-swatch {
   border: 2px solid var(--color-control-border-color);
 }
-.custom-form-control-color::-moz-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker-control::-moz-color-swatch {
   border: 2px solid var(--color-control-border-color);
 }
-.custom-form-control-color:disabled {
+.custom-colorpicker__wrapper .custom-colorpicker-control:disabled {
   cursor: not-allowed;
 }
-.custom-form-control-color.custom-form-control-color--rounded::-webkit-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker__transparent-placeholder {
+  position: absolute;
+  width: var(--color-control-size);
+  height: var(--color-control-size);
+  left: 0;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) repeat;
+}
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker-control::-webkit-color-swatch {
+  border-radius: var(--color-control-border-radius);
+}
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker-control::-moz-color-swatch {
   border-radius: var(--color-control-border-radius);
 }
-.custom-form-control-color.custom-form-control-color--rounded::-moz-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker__transparent-placeholder {
   border-radius: var(--color-control-border-radius);
 }
-.custom-form-control-color.custom-form-control-color--circle::-webkit-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker-control::-webkit-color-swatch {
+  border-radius: 50%;
+}
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker-control::-moz-color-swatch {
   border-radius: 50%;
 }
-.custom-form-control-color.custom-form-control-color--circle::-moz-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker__transparent-placeholder {
   border-radius: 50%;
 }

package/lib/esm/ColorPicker/index.scss

@@ -2,47 +2,90 @@
     <!-- Color Picker -->
 /* ====================================================== */
 
-.custom-form-control-color {
-
+.custom-colorpicker__wrapper {
+    position: relative;
     --color-control-border-radius: 0.375rem;
     --color-control-size: 30px;
     --color-control-border-color: rgba(0,0,0,.1);
 
 
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-color: transparent;
-    padding: 0 !important;
-    width: var(--color-control-size) !important;
-    height: var(--color-control-size) !important;
-    border: none;
-    cursor: pointer;
-    
-    &::-webkit-color-swatch {
-        border: 2px solid var(--color-control-border-color);
-    }
-    &::-moz-color-swatch {
-        border: 2px solid var(--color-control-border-color);
-    }
+    .custom-colorpicker-control {
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background-color: transparent;
+        padding: 0 !important;
+        width: var(--color-control-size) !important;
+        height: var(--color-control-size) !important;
+        border: none;
+        cursor: pointer;
+        
+        &::-webkit-color-swatch {
+            border: 2px solid var(--color-control-border-color);
+        }
+        &::-moz-color-swatch {
+            border: 2px solid var(--color-control-border-color);
+        }
+
+        &:disabled { 
+            cursor: not-allowed;
+        }
 
-    &:disabled { 
-        cursor: not-allowed;
-    }
 
-    &.custom-form-control-color--rounded::-webkit-color-swatch {
-        border-radius: var(--color-control-border-radius);
     }
-    &.custom-form-control-color--rounded::-moz-color-swatch {
-        border-radius: var(--color-control-border-radius);
+
+
+
+    /* placeholder */
+    .custom-colorpicker__transparent-placeholder {
+        position: absolute;
+        width: var(--color-control-size);
+        height: var(--color-control-size);
+        left: 0;
+        top: 0;
+        z-index: 1;
+        pointer-events: none;
+        background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) repeat;
     }
+ 
+
+    &.custom-colorpicker--rounded {
+        .custom-colorpicker-control {
+            &::-webkit-color-swatch {
+                border-radius: var(--color-control-border-radius);
+            }
 
+            &::-moz-color-swatch {
+                border-radius: var(--color-control-border-radius);
+            }
+        }
+
+        .custom-colorpicker__transparent-placeholder {
+            border-radius: var(--color-control-border-radius);
+        }
+     
 
-    &.custom-form-control-color--circle::-webkit-color-swatch {
-        border-radius: 50%;
     }
-    &.custom-form-control-color--circle::-moz-color-swatch {
-        border-radius: 50%;
+
+    &.custom-colorpicker--circle {
+
+        .custom-colorpicker-control {
+            &::-webkit-color-swatch {
+                border-radius: 50%;
+            }
+
+            &::-moz-color-swatch {
+                border-radius: 50%;
+            }
+        }
+
+        .custom-colorpicker__transparent-placeholder {
+            border-radius: 50%;
+        }
+
     }
-    
+
+
+
 }

package/lib/esm/ColorPicker/index.tsx

@@ -9,6 +9,8 @@ declare module 'react' {
 interface ColorPickerProps extends React.ComponentPropsWithoutRef<"input"> {
     wrapperClassName?: string;
     controlClassName?: string;
+    clearBtnClassName?: string;
+    clearBtnLabel?: string;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;
@@ -32,6 +34,8 @@ const ColorPicker = forwardRef((props: ColorPickerProps, ref: any) => {
     const {
         wrapperClassName,
         controlClassName,
+        clearBtnClassName,
+        clearBtnLabel,
         disabled,
         required,
         readOnly,
@@ -59,11 +63,11 @@ const ColorPicker = forwardRef((props: ColorPickerProps, ref: any) => {
     if (shape && typeof shape === 'string') {
         switch (shape) {
             case 'rounded':
-                shapeClassName = 'custom-form-control-color--rounded';
-                break;   
+                shapeClassName = 'custom-colorpicker--rounded';
+                break;
             case 'circle':
-                shapeClassName = 'custom-form-control-color--circle';
-                break;    
+                shapeClassName = 'custom-colorpicker--circle';
+                break;
         }
     }
 
@@ -73,7 +77,7 @@ const ColorPicker = forwardRef((props: ColorPickerProps, ref: any) => {
         rootRef.current.classList.add('focus');
 
         //
-        onFocus?.(event);    
+        onFocus?.(event);
     }
 
     function handleChange(event: ChangeEvent<HTMLInputElement>) {
@@ -111,19 +115,19 @@ const ColorPicker = forwardRef((props: ColorPickerProps, ref: any) => {
 
     useEffect(() => {
 
+      
         // update default value
         //--------------
         setChangedVal(value || '');
 
-
     }, [value]);
 
 
     return (
         <>
 
-            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
-                {label ? <><label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label></> : null}
+            <div className={wrapperClassName || wrapperClassName === '' ? `custom-colorpicker__wrapper  ${shapeClassName} ${wrapperClassName}` : `custom-colorpicker__wrapper mb-3 position-relative  ${shapeClassName}`} ref={rootRef}>
+                {label ? <><label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label></> : null}
 
                 <div className="input-group">
                     <input
@@ -135,11 +139,11 @@ const ColorPicker = forwardRef((props: ColorPickerProps, ref: any) => {
                                 ref.current = node;
                             }
                         }}
-                        
-                        
+
+
                         tabIndex={tabIndex || 0}
                         type='color'
-                        className={`${controlClassName || controlClassName === '' ? controlClassName : "form-control custom-form-control-color flex-grow-0"} ${shapeClassName}`}
+                        className={`${controlClassName || controlClassName === '' ? controlClassName : "form-control custom-colorpicker-control flex-grow-0"}`}
                         id={idRes}
                         name={name}
                         value={changedVal}
@@ -153,9 +157,17 @@ const ColorPicker = forwardRef((props: ColorPickerProps, ref: any) => {
                         {...attributes}
                     />
 
+                    {changedVal !== '' ? <><button tabIndex={-1} type="button" className={clearBtnClassName || 'btn btn-link btn-sm'} onClick={() => {
+                        setChangedVal('');
+                    }}>{clearBtnLabel || 'clear'}
+                    </button></> : null}
+
+
                 </div>
                 {required ? <><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/Tree/TreeList.tsx

@@ -269,21 +269,6 @@ export default function TreeList(props: TreeListProps) {
         }
 
      
-        // Note: that component re-rendering (such as routing changes) will cause collapsing problems 
-        // with `onSelect()`, please use `useMemo()` to wrap `<Tree />`, like this:
-        /*
-        function TreeMemo(props: any) {
-            const {t, callback, data} = props;
-            const dependencies = props.data !== null && props.data.length === 0 ? props.data : '';
-            return useMemo(() => {
-                return    <Tree
-                            data={data}
-                            showLine={true}
-                            onSelect={callback}
-                        />
-            }, [dependencies]);
-        }
-        */
         onSelect?.(e, {
             key: hyperlink.dataset.key,
             slug: hyperlink.dataset.slug,

package/package.json

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