musae 0.5.8 → 0.5.10

package/dist/components/picker/picker.cjs

@@ -12,6 +12,7 @@ var theme = require('../theme/theme.cjs');
 var input = require('../input/input.cjs');
 var context = require('./context.cjs');
 var className = require('@aiszlab/relax/class-name');
+var close = require('../icon/icons/navigation/close.cjs');
 
 var styles = {
   pickable: function pickable(props) {
@@ -40,13 +41,14 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onPopperExite = _ref.onPopperExite,
     _onBlur = _ref.onBlur,
     _ref$invalid = _ref.invalid,
-    invalid = _ref$invalid === void 0 ? false : _ref$invalid;
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+    onClear = _ref.onClear;
   var trigger = React.useRef(null);
   var _useBoolean = relax.useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
     _useBoolean2$ = _useBoolean2[1],
-    close = _useBoolean2$.turnOff,
+    close$1 = _useBoolean2$.turnOff,
     toggle = _useBoolean2$.toggle,
     open = _useBoolean2$.turnOn;
   var classNames = useClassNames_component.useClassNames(context.CLASS_NAMES);
@@ -59,7 +61,7 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [popupWidth]);
   React.useImperativeHandle(ref, function () {
     return {
-      close: close
+      close: close$1
     };
   });
   var click = relax.useEvent(function (event) {
@@ -70,7 +72,7 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onBlur = relax.useEvent(function (e) {
     e.stopPropagation();
     _onBlur === null || _onBlur === void 0 || _onBlur(e);
-    close();
+    close$1();
   });
   var _useFocus = relax.useFocus({
       onBlur: onBlur
@@ -81,6 +83,10 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onDropdownClick = React.useCallback(function (e) {
     return e.preventDefault();
   }, []);
+  var clear = relax.useEvent(function (event) {
+    event.stopPropagation();
+    onClear === null || onClear === void 0 || onClear();
+  });
   var styled = {
     picker: stylex.default.props(theme.typography.body.medium, input.styles.inputor({
       outlineColor: theme$1.colors.outline,
@@ -104,7 +110,9 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: trigger,
     tabIndex: -1,
     onClick: click
-  }, focusProps), children), /*#__PURE__*/React.createElement(popper.default, {
+  }, focusProps), children, !!onClear && /*#__PURE__*/React.createElement(close.default, {
+    onClick: clear
+  })), /*#__PURE__*/React.createElement(popper.default, {
     trigger: trigger.current,
     open: isOpen,
     className: classNames.dropdown,

package/dist/components/picker/picker.mjs

@@ -10,6 +10,7 @@ import { typography } from '../theme/theme.mjs';
 import { styles as styles$1 } from '../input/input.mjs';
 import { CLASS_NAMES, Context } from './context.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
+import Close from '../icon/icons/navigation/close.mjs';
 
 var styles = {
   pickable: function pickable(props) {
@@ -38,7 +39,8 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onPopperExite = _ref.onPopperExite,
     _onBlur = _ref.onBlur,
     _ref$invalid = _ref.invalid,
-    invalid = _ref$invalid === void 0 ? false : _ref$invalid;
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+    onClear = _ref.onClear;
   var trigger = useRef(null);
   var _useBoolean = useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
@@ -79,6 +81,10 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onDropdownClick = useCallback(function (e) {
     return e.preventDefault();
   }, []);
+  var clear = useEvent(function (event) {
+    event.stopPropagation();
+    onClear === null || onClear === void 0 || onClear();
+  });
   var styled = {
     picker: _stylex.props(typography.body.medium, styles$1.inputor({
       outlineColor: theme.colors.outline,
@@ -102,7 +108,9 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: trigger,
     tabIndex: -1,
     onClick: click
-  }, focusProps), children), /*#__PURE__*/React.createElement(Popper, {
+  }, focusProps), children, !!onClear && /*#__PURE__*/React.createElement(Close, {
+    onClick: clear
+  })), /*#__PURE__*/React.createElement(Popper, {
     trigger: trigger.current,
     open: isOpen,
     className: classNames.dropdown,

package/dist/components/popper/dropdown.cjs

@@ -57,8 +57,8 @@ var styles = {
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
         pointerEvents: "musaex-67bb7w",
-        willChange: "musaex-1enemt",
-        transitionProperty: "musaex-qzan4j",
+        willChange: "musaex-1larqbn",
+        transitionProperty: "musaex-19991ni",
         transitionDuration: "musaex-1g2r6go",
         display: "musaex-1s85apg",
         opacity: "musaex-g01cxk",

package/dist/components/popper/dropdown.mjs

@@ -55,8 +55,8 @@ var styles = {
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
         pointerEvents: "musaex-67bb7w",
-        willChange: "musaex-1enemt",
-        transitionProperty: "musaex-qzan4j",
+        willChange: "musaex-1larqbn",
+        transitionProperty: "musaex-19991ni",
         transitionDuration: "musaex-1g2r6go",
         display: "musaex-1s85apg",
         opacity: "musaex-g01cxk",

package/dist/components/rich-text-editor/nodes/checkable-list-item.cjs

@@ -4,20 +4,26 @@ var _createClass = require('@babel/runtime/helpers/createClass');
 var _callSuper = require('@babel/runtime/helpers/callSuper');
 var _inherits = require('@babel/runtime/helpers/inherits');
 var _superPropGet = require('@babel/runtime/helpers/superPropGet');
+var _classPrivateMethodInitSpec = require('@babel/runtime/helpers/classPrivateMethodInitSpec');
 var _classPrivateFieldInitSpec = require('@babel/runtime/helpers/classPrivateFieldInitSpec');
+var _classPrivateGetter = require('@babel/runtime/helpers/classPrivateGetter');
 var _classPrivateFieldGet = require('@babel/runtime/helpers/classPrivateFieldGet2');
 var _classPrivateFieldSet = require('@babel/runtime/helpers/classPrivateFieldSet2');
 var list = require('@lexical/list');
 
 var _disabled = /*#__PURE__*/new WeakMap();
+var _checkboxElement = /*#__PURE__*/new WeakMap();
+var _CheckableListItemNode_brand = /*#__PURE__*/new WeakSet();
 var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
   function CheckableListItemNode(value, checked, key, disabled) {
-    var _this;
+    var _this2;
     _classCallCheck(this, CheckableListItemNode);
-    _this = _callSuper(this, CheckableListItemNode, [value, checked, key]);
-    _classPrivateFieldInitSpec(_this, _disabled, void 0);
-    _classPrivateFieldSet(_disabled, _this, disabled);
-    return _this;
+    _this2 = _callSuper(this, CheckableListItemNode, [value, checked, key]);
+    _classPrivateMethodInitSpec(_this2, _CheckableListItemNode_brand);
+    _classPrivateFieldInitSpec(_this2, _disabled, void 0);
+    _classPrivateFieldInitSpec(_this2, _checkboxElement, null);
+    _classPrivateFieldSet(_disabled, _this2, disabled);
+    return _this2;
   }
   _inherits(CheckableListItemNode, _ListItemNode);
   return _createClass(CheckableListItemNode, [{
@@ -27,11 +33,11 @@ var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
     }
   }, {
     key: "toggleDisabled",
-    value: function toggleDisabled(dom) {
-      _classPrivateFieldSet(_disabled, this, !_classPrivateFieldGet(_disabled, this));
-      var checkbox = dom.firstElementChild;
-      if (!checkbox) return;
-      checkbox.setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
+    value: function toggleDisabled() {
+      var _classPrivateFieldGet2;
+      var _node = this.getWritable();
+      _classPrivateFieldSet(_disabled, _node, !_classPrivateFieldGet(_disabled, _node));
+      (_classPrivateFieldGet2 = _classPrivateFieldGet(_checkboxElement, _node)) === null || _classPrivateFieldGet2 === void 0 || _classPrivateFieldGet2.setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
     }
   }, {
     key: "exportJSON",
@@ -48,30 +54,24 @@ var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
     value: function createDOM(config) {
       var _config$theme$checkbo;
       var listItem = _superPropGet(CheckableListItemNode, "createDOM", this, 3)([config]);
-      var parent = this.getParent();
-      var isCheckList = list.$isListNode(parent) && parent.getListType() === "check";
-      if (!isCheckList) return listItem;
+      if (!_classPrivateGetter(_CheckableListItemNode_brand, this, _get_isCheckList)) return listItem;
+      _classPrivateFieldSet(_checkboxElement, this, document.createElement("input"));
       var isChecked = this.getChecked();
-      var checkbox = document.createElement("input");
-      checkbox.setAttribute("type", "checkbox");
-      checkbox.setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
-      checkbox.setAttribute("aria-checked", String(isChecked));
-      checkbox.className = (_config$theme$checkbo = config.theme.checkbox) !== null && _config$theme$checkbo !== void 0 ? _config$theme$checkbo : "";
-      listItem.appendChild(checkbox);
+      _classPrivateFieldGet(_checkboxElement, this).setAttribute("type", "checkbox");
+      _classPrivateFieldGet(_checkboxElement, this).setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
+      _classPrivateFieldGet(_checkboxElement, this).setAttribute("aria-checked", String(isChecked));
+      _classPrivateFieldGet(_checkboxElement, this).className = (_config$theme$checkbo = config.theme.checkbox) !== null && _config$theme$checkbo !== void 0 ? _config$theme$checkbo : "";
+      listItem.appendChild(_classPrivateFieldGet(_checkboxElement, this));
       return listItem;
     }
   }, {
     key: "updateDOM",
     value: function updateDOM(prevNode, dom, config) {
-      _superPropGet(CheckableListItemNode, "updateDOM", this, 3)([prevNode, dom, config]);
-      var checkbox = dom.firstElementChild;
-      if (checkbox) {
-        var _this$getChecked, _config$theme$checkbo2;
-        checkbox.setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
-        checkbox.setAttribute("aria-checked", String((_this$getChecked = this.getChecked()) !== null && _this$getChecked !== void 0 ? _this$getChecked : false));
-        checkbox.className = (_config$theme$checkbo2 = config.theme.checkbox) !== null && _config$theme$checkbo2 !== void 0 ? _config$theme$checkbo2 : "";
-      }
-      return true;
+      var _classPrivateFieldGet3, _this$getChecked;
+      var isReplace = _superPropGet(CheckableListItemNode, "updateDOM", this, 3)([prevNode, dom, config]);
+      (_classPrivateFieldGet3 = _classPrivateFieldGet(_checkboxElement, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.setAttribute("aria-checked", String((_this$getChecked = this.getChecked()) !== null && _this$getChecked !== void 0 ? _this$getChecked : false));
+      // if user clear all text, just replace new item node
+      return isReplace || this.getTextContentSize() === 0;
     }
   }], [{
     key: "getType",
@@ -90,6 +90,10 @@ var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
     }
   }]);
 }(list.ListItemNode);
+function _get_isCheckList(_this) {
+  var parent = _this.getParent();
+  return list.$isListNode(parent) && parent.getListType() === "check";
+}
 var replacement = function replacement(disabled) {
   return {
     replace: list.ListItemNode,

package/dist/components/rich-text-editor/nodes/checkable-list-item.d.ts

@@ -8,7 +8,7 @@ declare class CheckableListItemNode extends ListItemNode {
     static importJSON(serializedNode: SerializedListItemNode): ListItemNode;
     constructor(value: number, checked: Partialable<boolean>, key: Partialable<string>, disabled: boolean);
     get disabled(): boolean;
-    toggleDisabled(dom: HTMLElement): void;
+    toggleDisabled(): void;
     exportJSON(): SerializedListItemNode;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(prevNode: CheckableListItemNode, dom: HTMLElement, config: EditorConfig): boolean;

package/dist/components/rich-text-editor/nodes/checkable-list-item.mjs

@@ -4,20 +4,26 @@ import _createClass from '@babel/runtime/helpers/createClass';
 import _callSuper from '@babel/runtime/helpers/callSuper';
 import _inherits from '@babel/runtime/helpers/inherits';
 import _superPropGet from '@babel/runtime/helpers/superPropGet';
+import _classPrivateMethodInitSpec from '@babel/runtime/helpers/classPrivateMethodInitSpec';
 import _classPrivateFieldInitSpec from '@babel/runtime/helpers/classPrivateFieldInitSpec';
+import _classPrivateGetter from '@babel/runtime/helpers/classPrivateGetter';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet2';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet2';
-import { $isListNode, ListItemNode } from '@lexical/list';
+import { ListItemNode, $isListNode } from '@lexical/list';
 
 var _disabled = /*#__PURE__*/new WeakMap();
+var _checkboxElement = /*#__PURE__*/new WeakMap();
+var _CheckableListItemNode_brand = /*#__PURE__*/new WeakSet();
 var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
   function CheckableListItemNode(value, checked, key, disabled) {
-    var _this;
+    var _this2;
     _classCallCheck(this, CheckableListItemNode);
-    _this = _callSuper(this, CheckableListItemNode, [value, checked, key]);
-    _classPrivateFieldInitSpec(_this, _disabled, void 0);
-    _classPrivateFieldSet(_disabled, _this, disabled);
-    return _this;
+    _this2 = _callSuper(this, CheckableListItemNode, [value, checked, key]);
+    _classPrivateMethodInitSpec(_this2, _CheckableListItemNode_brand);
+    _classPrivateFieldInitSpec(_this2, _disabled, void 0);
+    _classPrivateFieldInitSpec(_this2, _checkboxElement, null);
+    _classPrivateFieldSet(_disabled, _this2, disabled);
+    return _this2;
   }
   _inherits(CheckableListItemNode, _ListItemNode);
   return _createClass(CheckableListItemNode, [{
@@ -27,11 +33,11 @@ var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
     }
   }, {
     key: "toggleDisabled",
-    value: function toggleDisabled(dom) {
-      _classPrivateFieldSet(_disabled, this, !_classPrivateFieldGet(_disabled, this));
-      var checkbox = dom.firstElementChild;
-      if (!checkbox) return;
-      checkbox.setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
+    value: function toggleDisabled() {
+      var _classPrivateFieldGet2;
+      var _node = this.getWritable();
+      _classPrivateFieldSet(_disabled, _node, !_classPrivateFieldGet(_disabled, _node));
+      (_classPrivateFieldGet2 = _classPrivateFieldGet(_checkboxElement, _node)) === null || _classPrivateFieldGet2 === void 0 || _classPrivateFieldGet2.setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
     }
   }, {
     key: "exportJSON",
@@ -48,30 +54,24 @@ var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
     value: function createDOM(config) {
       var _config$theme$checkbo;
       var listItem = _superPropGet(CheckableListItemNode, "createDOM", this, 3)([config]);
-      var parent = this.getParent();
-      var isCheckList = $isListNode(parent) && parent.getListType() === "check";
-      if (!isCheckList) return listItem;
+      if (!_classPrivateGetter(_CheckableListItemNode_brand, this, _get_isCheckList)) return listItem;
+      _classPrivateFieldSet(_checkboxElement, this, document.createElement("input"));
       var isChecked = this.getChecked();
-      var checkbox = document.createElement("input");
-      checkbox.setAttribute("type", "checkbox");
-      checkbox.setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
-      checkbox.setAttribute("aria-checked", String(isChecked));
-      checkbox.className = (_config$theme$checkbo = config.theme.checkbox) !== null && _config$theme$checkbo !== void 0 ? _config$theme$checkbo : "";
-      listItem.appendChild(checkbox);
+      _classPrivateFieldGet(_checkboxElement, this).setAttribute("type", "checkbox");
+      _classPrivateFieldGet(_checkboxElement, this).setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
+      _classPrivateFieldGet(_checkboxElement, this).setAttribute("aria-checked", String(isChecked));
+      _classPrivateFieldGet(_checkboxElement, this).className = (_config$theme$checkbo = config.theme.checkbox) !== null && _config$theme$checkbo !== void 0 ? _config$theme$checkbo : "";
+      listItem.appendChild(_classPrivateFieldGet(_checkboxElement, this));
       return listItem;
     }
   }, {
     key: "updateDOM",
     value: function updateDOM(prevNode, dom, config) {
-      _superPropGet(CheckableListItemNode, "updateDOM", this, 3)([prevNode, dom, config]);
-      var checkbox = dom.firstElementChild;
-      if (checkbox) {
-        var _this$getChecked, _config$theme$checkbo2;
-        checkbox.setAttribute("aria-disabled", String(_classPrivateFieldGet(_disabled, this)));
-        checkbox.setAttribute("aria-checked", String((_this$getChecked = this.getChecked()) !== null && _this$getChecked !== void 0 ? _this$getChecked : false));
-        checkbox.className = (_config$theme$checkbo2 = config.theme.checkbox) !== null && _config$theme$checkbo2 !== void 0 ? _config$theme$checkbo2 : "";
-      }
-      return true;
+      var _classPrivateFieldGet3, _this$getChecked;
+      var isReplace = _superPropGet(CheckableListItemNode, "updateDOM", this, 3)([prevNode, dom, config]);
+      (_classPrivateFieldGet3 = _classPrivateFieldGet(_checkboxElement, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.setAttribute("aria-checked", String((_this$getChecked = this.getChecked()) !== null && _this$getChecked !== void 0 ? _this$getChecked : false));
+      // if user clear all text, just replace new item node
+      return isReplace || this.getTextContentSize() === 0;
     }
   }], [{
     key: "getType",
@@ -90,6 +90,10 @@ var CheckableListItemNode = /*#__PURE__*/function (_ListItemNode) {
     }
   }]);
 }(ListItemNode);
+function _get_isCheckList(_this) {
+  var parent = _this.getParent();
+  return $isListNode(parent) && parent.getListType() === "check";
+}
 var replacement = function replacement(disabled) {
   return {
     replace: ListItemNode,

package/dist/components/rich-text-editor/plugins/editable/index.cjs

@@ -21,11 +21,11 @@ var EditablePlugin = function EditablePlugin(_ref) {
     editor.update(function () {
       editor._keyToDOMMap.entries().forEach(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          dom = _ref3[1];
+          key = _ref3[0];
+          _ref3[1];
         var node = lexical.$getNodeByKey(key);
         if (!(node instanceof checkableListItem.CheckableListItemNode)) return;
-        node.toggleDisabled(dom);
+        node.toggleDisabled();
       });
     });
   }, [isEditable, editor]);

package/dist/components/rich-text-editor/plugins/editable/index.mjs

@@ -19,11 +19,11 @@ var EditablePlugin = function EditablePlugin(_ref) {
     editor.update(function () {
       editor._keyToDOMMap.entries().forEach(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          dom = _ref3[1];
+          key = _ref3[0];
+          _ref3[1];
         var node = $getNodeByKey(key);
         if (!(node instanceof CheckableListItemNode)) return;
-        node.toggleDisabled(dom);
+        node.toggleDisabled();
       });
     });
   }, [isEditable, editor]);

package/dist/components/rich-text-editor/rich-text-editor.cjs

@@ -354,7 +354,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       checkbox: styled.checkbox.className
     };
-    return {
+    return _objectSpread({
       namespace: id,
       onError: function onError(error) {
         messager.error({
@@ -363,8 +363,9 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       nodes: [richText.HeadingNode, richText.QuoteNode, code.CodeNode, link.LinkNode, list.ListNode, checkableListItem.CheckableListItemNode, checkableListItem.replacement(disabled), LexicalHorizontalRuleNode.HorizontalRuleNode],
       theme: theme,
-      editable: !disabled,
-      editorState: defaultValue && function (editor) {
+      editable: !disabled
+    }, defaultValue && {
+      editorState: function editorState(editor) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
@@ -375,7 +376,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             break;
         }
       }
-    };
+    });
   });
   React.useImperativeHandle(ref, function () {
     return {

package/dist/components/rich-text-editor/rich-text-editor.mjs

@@ -352,7 +352,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       checkbox: styled.checkbox.className
     };
-    return {
+    return _objectSpread({
       namespace: id,
       onError: function onError(error) {
         messager.error({
@@ -361,8 +361,9 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       nodes: [HeadingNode, QuoteNode, CodeNode, LinkNode, ListNode, CheckableListItemNode, replacement(disabled), HorizontalRuleNode],
       theme: theme,
-      editable: !disabled,
-      editorState: defaultValue && function (editor) {
+      editable: !disabled
+    }, defaultValue && {
+      editorState: function editorState(editor) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
@@ -373,7 +374,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
             break;
         }
       }
-    };
+    });
   });
   useImperativeHandle(ref, function () {
     return {

package/dist/components/select/hooks.cjs

@@ -4,7 +4,7 @@ var React = require('react');
 var relax = require('@aiszlab/relax');
 var utils = require('./utils.cjs');
 
-var _excluded = ["mode", "close", "isComplex", "readableOptions", "onChange"];
+var _excluded = ["mode", "close", "isComplex", "readableOptions", "onChange", "onClear"];
 /**
  * @description
  * use value
@@ -15,6 +15,7 @@ var useValue = function useValue(_ref) {
     isComplex = _ref.isComplex,
     readableOptions = _ref.readableOptions,
     _onChange = _ref.onChange,
+    _onClear = _ref.onClear,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useControlledState = relax.useControlledState(props.value),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
@@ -42,8 +43,8 @@ var useValue = function useValue(_ref) {
       close();
       // same value, do not toggle again
       if (readableValues.has(key)) return;
-      _onChange === null || _onChange === void 0 || _onChange(isComplex ? _value : key);
       setValue(_value);
+      _onChange === null || _onChange === void 0 || _onChange(isComplex ? _value : key);
       return;
     }
     // in multiple mode
@@ -61,13 +62,20 @@ var useValue = function useValue(_ref) {
         label: label
       };
     }) : Array.from(next.keys());
-    _onChange === null || _onChange === void 0 || _onChange(_changedValues);
     setValue(_changedValues);
+    _onChange === null || _onChange === void 0 || _onChange(_changedValues);
+  });
+  // clear handler
+  var onClear = relax.useEvent(function () {
+    var _emptyValue = isComplex ? [] : void 0;
+    setValue(_emptyValue);
+    _onClear === null || _onClear === void 0 || _onClear();
   });
   return {
     value: value,
     readableValues: readableValues,
-    onChange: onChange
+    onChange: onChange,
+    onClear: onClear
   };
 };
 /**
@@ -99,7 +107,7 @@ var useOptions = function useOptions(_ref5) {
     return setSearched("");
   });
   var _useMemo = React.useMemo(function () {
-      return utils.readOptions(options, utils.toMenuItems, filter !== null && filter !== void 0 ? filter : function () {
+      return utils.readOptions(options, utils.toMenuItem, filter !== null && filter !== void 0 ? filter : function () {
         return true;
       });
     }, [options, filter]),

package/dist/components/select/hooks.d.ts

@@ -5,18 +5,20 @@ import type { Option } from "musae/types/option";
  * @description
  * use value
  */
-export declare const useValue: <T extends ValueOrValues = ValueOrValues>({ mode, close, isComplex, readableOptions, onChange: _onChange, ...props }: {
+export declare const useValue: <T extends ValueOrValues = ValueOrValues>({ mode, close, isComplex, readableOptions, onChange: _onChange, onClear: _onClear, ...props }: {
     value: ValueOrValues | undefined;
     readableOptions: ReadableOptions;
     mode: Mode | undefined;
+    isComplex: boolean;
     close: () => void;
     reset: () => void;
     onChange?: (value: T) => void;
-    isComplex: boolean;
+    onClear?: () => void;
 }) => {
     value: ValueOrValues | undefined;
     readableValues: Map<Key, string>;
     onChange: (key: Key) => void;
+    onClear: () => void;
 };
 /**
  * @description

package/dist/components/select/hooks.mjs

@@ -2,9 +2,9 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useMemo, useState } from 'react';
 import { useControlledState, useEvent, isNull, isFunction } from '@aiszlab/relax';
-import { toValues, toKey, readOptions as _readOptions, toMenuItems } from './utils.mjs';
+import { toValues, toKey, readOptions as _readOptions, toMenuItem } from './utils.mjs';
 
-var _excluded = ["mode", "close", "isComplex", "readableOptions", "onChange"];
+var _excluded = ["mode", "close", "isComplex", "readableOptions", "onChange", "onClear"];
 /**
  * @description
  * use value
@@ -15,6 +15,7 @@ var useValue = function useValue(_ref) {
     isComplex = _ref.isComplex,
     readableOptions = _ref.readableOptions,
     _onChange = _ref.onChange,
+    _onClear = _ref.onClear,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useControlledState = useControlledState(props.value),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
@@ -42,8 +43,8 @@ var useValue = function useValue(_ref) {
       close();
       // same value, do not toggle again
       if (readableValues.has(key)) return;
-      _onChange === null || _onChange === void 0 || _onChange(isComplex ? _value : key);
       setValue(_value);
+      _onChange === null || _onChange === void 0 || _onChange(isComplex ? _value : key);
       return;
     }
     // in multiple mode
@@ -61,13 +62,20 @@ var useValue = function useValue(_ref) {
         label: label
       };
     }) : Array.from(next.keys());
-    _onChange === null || _onChange === void 0 || _onChange(_changedValues);
     setValue(_changedValues);
+    _onChange === null || _onChange === void 0 || _onChange(_changedValues);
+  });
+  // clear handler
+  var onClear = useEvent(function () {
+    var _emptyValue = isComplex ? [] : void 0;
+    setValue(_emptyValue);
+    _onClear === null || _onClear === void 0 || _onClear();
   });
   return {
     value: value,
     readableValues: readableValues,
-    onChange: onChange
+    onChange: onChange,
+    onClear: onClear
   };
 };
 /**
@@ -99,7 +107,7 @@ var useOptions = function useOptions(_ref5) {
     return setSearched("");
   });
   var _useMemo = useMemo(function () {
-      return _readOptions(options, toMenuItems, filter !== null && filter !== void 0 ? filter : function () {
+      return _readOptions(options, toMenuItem, filter !== null && filter !== void 0 ? filter : function () {
         return true;
       });
     }, [options, filter]),

package/dist/components/select/select.cjs

@@ -26,7 +26,9 @@ var Select = function Select(_ref) {
     _onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     _ref$invalid = _ref.invalid,
-    invalid = _ref$invalid === void 0 ? false : _ref$invalid;
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+    placeholder = _ref.placeholder,
+    onClear = _ref.onClear;
   var ref = React.useRef(null);
   var selectorRef = React.useRef(null);
   var close = React.useCallback(function () {
@@ -51,10 +53,12 @@ var Select = function Select(_ref) {
       close: close,
       reset: reset,
       onChange: _onChange,
-      isComplex: complex
+      isComplex: complex,
+      onClear: onClear
     }),
     readableValues = _useValue.readableValues,
-    onChange = _useValue.onChange;
+    onChange = _useValue.onChange,
+    _onClear = _useValue.onClear;
   var click = function click() {
     var _selectorRef$current;
     (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 || _selectorRef$current.focus();
@@ -83,10 +87,11 @@ var Select = function Select(_ref) {
     pickableClassName: styled.pickable.className,
     pickableStyle: styled.pickable.style,
     onPopperExite: reset,
-    invalid: invalid
+    invalid: invalid,
+    onClear: !!onClear ? _onClear : void 0
   }, !searchable && {
     onBlur: onBlur
-  }), /*#__PURE__*/React.createElement(selector.default, _objectSpread({
+  }), /*#__PURE__*/React.createElement(selector.default, _objectSpread(_objectSpread({
     value: readableValues,
     mode: mode,
     searchable: searchable,
@@ -96,6 +101,8 @@ var Select = function Select(_ref) {
     onChange: onChange
   }, searchable && {
     onBlur: onBlur
+  }), {}, {
+    placeholder: placeholder
   })));
 };
 

package/dist/components/select/select.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SelectProps, ValueOrValues } from "musae/types/select";
-declare const Select: <T extends ValueOrValues = ValueOrValues>({ mode, searchable, onSearch, className, style, options, onFilter, complex, value, onChange: _onChange, onBlur, invalid, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends ValueOrValues = ValueOrValues>({ mode, searchable, onSearch, className, style, options, onFilter, complex, value, onChange: _onChange, onBlur, invalid, placeholder, onClear, }: SelectProps<T>) => React.JSX.Element;
 export default Select;

package/dist/components/select/select.mjs

@@ -24,7 +24,9 @@ var Select = function Select(_ref) {
     _onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     _ref$invalid = _ref.invalid,
-    invalid = _ref$invalid === void 0 ? false : _ref$invalid;
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+    placeholder = _ref.placeholder,
+    onClear = _ref.onClear;
   var ref = useRef(null);
   var selectorRef = useRef(null);
   var close = useCallback(function () {
@@ -49,10 +51,12 @@ var Select = function Select(_ref) {
       close: close,
       reset: reset,
       onChange: _onChange,
-      isComplex: complex
+      isComplex: complex,
+      onClear: onClear
     }),
     readableValues = _useValue.readableValues,
-    onChange = _useValue.onChange;
+    onChange = _useValue.onChange,
+    _onClear = _useValue.onClear;
   var click = function click() {
     var _selectorRef$current;
     (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 || _selectorRef$current.focus();
@@ -81,10 +85,11 @@ var Select = function Select(_ref) {
     pickableClassName: styled.pickable.className,
     pickableStyle: styled.pickable.style,
     onPopperExite: reset,
-    invalid: invalid
+    invalid: invalid,
+    onClear: !!onClear ? _onClear : void 0
   }, !searchable && {
     onBlur: onBlur
-  }), /*#__PURE__*/React.createElement(Selector, _objectSpread({
+  }), /*#__PURE__*/React.createElement(Selector, _objectSpread(_objectSpread({
     value: readableValues,
     mode: mode,
     searchable: searchable,
@@ -94,6 +99,8 @@ var Select = function Select(_ref) {
     onChange: onChange
   }, searchable && {
     onBlur: onBlur
+  }), {}, {
+    placeholder: placeholder
   })));
 };
 

package/dist/components/select/selections.cjs

@@ -25,8 +25,11 @@ var Selections = function Selections(_ref) {
     isOpen = _useContext.isOpen;
   var items = relax.useMemorable(function () {
     return props.items;
-  }, [isOpen, props.items], function (prev, next) {
-    return next[0] && next[1] !== prev[1];
+  }, [isOpen, props.items], function (_ref2, _ref3) {
+    var prevItems = _ref2[1];
+    var isNextOpen = _ref3[0],
+      nextItems = _ref3[1];
+    return isNextOpen && nextItems !== prevItems;
   });
   if (items.length === 0) {
     return /*#__PURE__*/React.createElement(empty.default, null);

package/dist/components/select/selections.mjs

@@ -23,8 +23,11 @@ var Selections = function Selections(_ref) {
     isOpen = _useContext.isOpen;
   var items = useMemorable(function () {
     return props.items;
-  }, [isOpen, props.items], function (prev, next) {
-    return next[0] && next[1] !== prev[1];
+  }, [isOpen, props.items], function (_ref2, _ref3) {
+    var prevItems = _ref2[1];
+    var isNextOpen = _ref3[0],
+      nextItems = _ref3[1];
+    return isNextOpen && nextItems !== prevItems;
   });
   if (items.length === 0) {
     return /*#__PURE__*/React.createElement(Empty, null);

package/dist/components/select/selector.cjs

@@ -26,7 +26,8 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSearch = _ref.onSearch,
     searched = _ref.searched,
     onChange = _ref.onChange,
-    onBlur = _ref.onBlur;
+    onBlur = _ref.onBlur,
+    placeholder = _ref.placeholder;
   var inputRef = React.useRef(null);
   var _useContext = React.useContext(context.Context),
     isFocused = _useContext.isFocused,
@@ -71,7 +72,8 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: styled.className,
       style: styled.style,
       onChange: search,
-      onBlur: onBlur
+      onBlur: onBlur,
+      placeholder: placeholder
     })));
   }
   // single mode render
@@ -79,12 +81,12 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement("span", {
       className: styled.className,
       style: styled.style
-    }, Array.from(value.values()).join(","));
+    }, Array.from(value.values()).join(",") || placeholder);
   }
   return /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     value: searched,
-    placeholder: Array.from(value.values()).join(","),
+    placeholder: Array.from(value.values()).join(",") || placeholder,
     className: styled.className,
     style: styled.style,
     onChange: search,

package/dist/components/select/selector.mjs

@@ -24,7 +24,8 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onSearch = _ref.onSearch,
     searched = _ref.searched,
     onChange = _ref.onChange,
-    onBlur = _ref.onBlur;
+    onBlur = _ref.onBlur,
+    placeholder = _ref.placeholder;
   var inputRef = useRef(null);
   var _useContext = useContext(Context),
     isFocused = _useContext.isFocused,
@@ -69,7 +70,8 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: styled.className,
       style: styled.style,
       onChange: search,
-      onBlur: onBlur
+      onBlur: onBlur,
+      placeholder: placeholder
     })));
   }
   // single mode render
@@ -77,12 +79,12 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement("span", {
       className: styled.className,
       style: styled.style
-    }, Array.from(value.values()).join(","));
+    }, Array.from(value.values()).join(",") || placeholder);
   }
   return /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     value: searched,
-    placeholder: Array.from(value.values()).join(","),
+    placeholder: Array.from(value.values()).join(",") || placeholder,
     className: styled.className,
     style: styled.style,
     onChange: search,

package/dist/components/select/utils.cjs

@@ -52,14 +52,15 @@ var _readOptions = function readOptions(options, toMenuItem, filter) {
     return prev;
   }, [[], new Map()]);
 };
-var toMenuItems = function toMenuItems(option) {
+var toMenuItem = function toMenuItem(option) {
+  var _option$label2;
   return {
     key: option.value,
-    label: option.label
+    label: (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option.value.toString()
   };
 };
 
 exports.readOptions = _readOptions;
 exports.toKey = toKey;
-exports.toMenuItems = toMenuItems;
+exports.toMenuItem = toMenuItem;
 exports.toValues = toValues;

package/dist/components/select/utils.d.ts

@@ -25,4 +25,4 @@ export declare const readOptions: (options: Option[], toMenuItem: ToMenuItem, fi
  * @description
  * convert select option into menu item
  */
-export declare const toMenuItems: ToMenuItem;
+export declare const toMenuItem: ToMenuItem;

package/dist/components/select/utils.mjs

@@ -52,11 +52,12 @@ var _readOptions = function readOptions(options, toMenuItem, filter) {
     return prev;
   }, [[], new Map()]);
 };
-var toMenuItems = function toMenuItems(option) {
+var toMenuItem = function toMenuItem(option) {
+  var _option$label2;
   return {
     key: option.value,
-    label: option.label
+    label: (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option.value.toString()
   };
 };
 
-export { _readOptions as readOptions, toKey, toMenuItems, toValues };
+export { _readOptions as readOptions, toKey, toMenuItem, toValues };

package/dist/styles.css

@@ -1547,10 +1547,6 @@
     transition-property: transform;
   }
 
-  .musaex-qzan4j {
-    transition-property: translate, opacity;
-  }
-
   .musaex-87ps6o {
     -webkit-user-select: none;
     user-select: none;
@@ -1588,12 +1584,12 @@
     will-change: color;
   }
 
-  .musaex-1so62im {
-    will-change: transform;
+  .musaex-1larqbn {
+    will-change: opacity;
   }
 
-  .musaex-1enemt {
-    will-change: translate, opacity;
+  .musaex-1so62im {
+    will-change: transform;
   }
 
   .musaex-13faqbe {

package/dist/types/picker.d.ts

@@ -57,6 +57,12 @@ export interface PickerProps extends ComponentProps, Pick<HTMLAttributes<HTMLSpa
      * @default false
      */
     invalid?: boolean;
+    /**
+     * @description
+     * clear handler
+     * @default void 0
+     */
+    onClear?: () => void;
 }
 /**
  * @description

package/dist/types/select.d.ts

@@ -68,6 +68,18 @@ export type SelectProps<T extends ValueOrValues = ValueOrValues> = ComponentProp
      * @default false
      */
     invalid?: boolean;
+    /**
+     * @description
+     * placeholder
+     * @default void 0
+     */
+    placeholder?: string;
+    /**
+     * @description
+     * clear handler
+     * @default void 0
+     */
+    onClear?: () => void;
 };
 /**
  * @description
@@ -84,7 +96,7 @@ export type Filter = (option: Option) => boolean;
  * @description
  * selected props
  */
-export type SelectorProps = Pick<RequiredIn<SelectProps, "searchable" | "onSearch">, "searchable" | "mode" | "onSearch" | "onBlur"> & {
+export type SelectorProps = Pick<RequiredIn<SelectProps, "searchable" | "onSearch">, "searchable" | "mode" | "onSearch" | "onBlur" | "placeholder"> & {
     /**
      * @description
      * value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -60,24 +60,24 @@
     "pnpm": ">=9"
   },
   "dependencies": {
-    "@aiszlab/fuzzy": "^1.5.5",
-    "@aiszlab/relax": "^1.5.6",
+    "@aiszlab/fuzzy": "^1.5.7",
+    "@aiszlab/relax": "^1.5.7",
     "@babel/runtime": "^7.26.0",
     "@emotion/is-prop-valid": "^1.3.1",
     "@floating-ui/dom": "^1.6.12",
-    "@lexical/code": "^0.19.0",
-    "@lexical/link": "^0.19.0",
-    "@lexical/list": "^0.19.0",
-    "@lexical/markdown": "^0.19.0",
-    "@lexical/react": "^0.19.0",
-    "@lexical/rich-text": "^0.19.0",
-    "@lexical/selection": "^0.19.0",
-    "@lexical/utils": "^0.19.0",
+    "@lexical/code": "^0.20.0",
+    "@lexical/link": "^0.20.0",
+    "@lexical/list": "^0.20.0",
+    "@lexical/markdown": "^0.20.0",
+    "@lexical/react": "^0.20.0",
+    "@lexical/rich-text": "^0.20.0",
+    "@lexical/selection": "^0.20.0",
+    "@lexical/utils": "^0.20.0",
     "@tanstack/react-table": "^8.20.5",
     "dayjs": "^1.11.13",
     "framer-motion": "^11.11.11",
-    "lexical": "^0.19.0",
-    "react-hook-form": "^7.53.1",
+    "lexical": "^0.20.0",
+    "react-hook-form": "^7.53.2",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
@@ -109,9 +109,9 @@
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.24.4",
+    "rollup": "^4.25.0",
     "typescript": "^5.6.3",
-    "zx": "^8.2.0"
+    "zx": "^8.2.1"
   },
   "peerDependencies": {
     "react": "^18",