musae 0.3.0 → 0.3.2

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

@@ -8,21 +8,24 @@ var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
 var markdown = require('@lexical/markdown');
 var index = require('../markdown-shortcut/index.cjs');
 
-var ControlledStatePlugin = function ControlledStatePlugin(_ref) {
+var ControlledStatePlugin = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.value,
     _use = _ref.use,
     onChange = _ref.onChange;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  relax.useUpdateEffect(function () {
-    if (relax.isUndefined(value)) return;
+  var setValue = React.useCallback(function (_value) {
     try {
-      var editorState = editor.parseEditorState(value);
+      var editorState = editor.parseEditorState(_value);
       editor.setEditorState(editorState);
     } catch (error) {
       console.error(error);
     }
+  }, [editor]);
+  relax.useUpdateEffect(function () {
+    if (relax.isUndefined(value)) return;
+    setValue(value);
   }, [value, editor]);
   var change = relax.useEvent(function (state, editor) {
     var _value = JSON.stringify(state.toJSON());
@@ -37,9 +40,14 @@ var ControlledStatePlugin = function ControlledStatePlugin(_ref) {
       onChange === null || onChange === void 0 || onChange(markdown$1);
     });
   });
+  React.useImperativeHandle(ref, function () {
+    return {
+      setValue: setValue
+    };
+  });
   return /*#__PURE__*/React.createElement(LexicalOnChangePlugin.OnChangePlugin, {
     onChange: change
   });
-};
+});
 
 exports.default = ControlledStatePlugin;

package/dist/components/rich-text-editor/plugins/controlled-state/index.d.ts

@@ -1,9 +1,12 @@
-import { type ReactNode } from "react";
-import type { Use } from "../../types";
+import React from "react";
+import type { Use } from "../../../../types/rich-text-editor";
 interface Props {
     value?: string;
     onChange?: (value: string) => void;
     use: Use;
 }
-declare const ControlledStatePlugin: ({ value, use: _use, onChange }: Props) => ReactNode;
+export type Ref = {
+    setValue: (value: string) => void;
+};
+declare const ControlledStatePlugin: React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>;
 export default ControlledStatePlugin;

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

@@ -1,26 +1,29 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
 import { useUpdateEffect, isUndefined, useEvent } from '@aiszlab/relax';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { $convertToMarkdownString } from '@lexical/markdown';
 import { TRANSFORMERS } from '../markdown-shortcut/index.mjs';
 
-var ControlledStatePlugin = function ControlledStatePlugin(_ref) {
+var ControlledStatePlugin = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     _use = _ref.use,
     onChange = _ref.onChange;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  useUpdateEffect(function () {
-    if (isUndefined(value)) return;
+  var setValue = useCallback(function (_value) {
     try {
-      var editorState = editor.parseEditorState(value);
+      var editorState = editor.parseEditorState(_value);
       editor.setEditorState(editorState);
     } catch (error) {
       console.error(error);
     }
+  }, [editor]);
+  useUpdateEffect(function () {
+    if (isUndefined(value)) return;
+    setValue(value);
   }, [value, editor]);
   var change = useEvent(function (state, editor) {
     var _value = JSON.stringify(state.toJSON());
@@ -35,9 +38,14 @@ var ControlledStatePlugin = function ControlledStatePlugin(_ref) {
       onChange === null || onChange === void 0 || onChange(markdown);
     });
   });
+  useImperativeHandle(ref, function () {
+    return {
+      setValue: setValue
+    };
+  });
   return /*#__PURE__*/React.createElement(OnChangePlugin, {
     onChange: change
   });
-};
+});
 
 export { ControlledStatePlugin as default };

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

@@ -31,7 +31,7 @@ require('../checkbox/index.cjs');
 var markdown = require('@lexical/markdown');
 var styles$1 = require('../checkbox/styles.cjs');
 
-var _excluded = ["placeholder", "disabled", "defaultValue", "onChange"];
+var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value"];
 var styles = {
   shell: function shell(props) {
     return [{
@@ -73,14 +73,15 @@ var styles = {
     $$css: true
   }
 };
-var RichTextEditor = function RichTextEditor(_ref) {
+var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _props$ariaPlacehold;
   var placeholder = _ref.placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded);
+    onChange = _ref.onChange;
+    _ref.value;
+    var props = _objectWithoutProperties(_ref, _excluded);
   var _useIdentity = relax.useIdentity(),
     _useIdentity2 = _slicedToArray(_useIdentity, 1),
     id = _useIdentity2[0];
@@ -93,6 +94,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     var _props$use;
     return (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : "serialized";
   });
+  var controlledStatePluginRef = React.useRef(null);
   var styled = {
     shell: stylex.default.props(styles.shell({
       backgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainer]
@@ -182,6 +184,14 @@ var RichTextEditor = function RichTextEditor(_ref) {
       }
     };
   });
+  React.useImperativeHandle(ref, function () {
+    return {
+      setValue: function setValue(_value) {
+        var _controlledStatePlugi;
+        (_controlledStatePlugi = controlledStatePluginRef.current) === null || _controlledStatePlugi === void 0 || _controlledStatePlugi.setValue(_value);
+      }
+    };
+  });
   return /*#__PURE__*/React.createElement(LexicalComposer.LexicalComposer, {
     initialConfig: initialConfig
   }, /*#__PURE__*/React.createElement("div", {
@@ -201,9 +211,10 @@ var RichTextEditor = function RichTextEditor(_ref) {
     disabled: !disabled,
     newTab: true
   }), /*#__PURE__*/React.createElement(LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(index$2.default, null), /*#__PURE__*/React.createElement(index$3.default, {
+    ref: controlledStatePluginRef,
     use: _use,
     onChange: onChange
   }), holder));
-};
+});
 
 exports.default = RichTextEditor;

package/dist/components/rich-text-editor/rich-text-editor.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
-import type { RichTextEditorProps } from "./types";
-declare const RichTextEditor: ({ placeholder, disabled, defaultValue, onChange, ...props }: RichTextEditorProps) => React.JSX.Element;
+import type { RichTextEditorRef } from "musae/types/rich-text-editor";
+declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & {
+    placeholder?: import("@lexical/react/LexicalContentEditable").Props["placeholder"];
+    disabled?: boolean;
+    defaultValue?: string;
+    use?: import("musae/types/rich-text-editor").Use;
+    onChange?: (value: string) => void;
+    value?: string;
+} & React.RefAttributes<RichTextEditorRef>>;
 export default RichTextEditor;

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

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React from 'react';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
@@ -29,7 +29,7 @@ import '../checkbox/index.mjs';
 import { $convertFromMarkdownString } from '@lexical/markdown';
 import styles$1 from '../checkbox/styles.mjs';
 
-var _excluded = ["placeholder", "disabled", "defaultValue", "onChange"];
+var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value"];
 var styles = {
   shell: function shell(props) {
     return [{
@@ -71,14 +71,15 @@ var styles = {
     $$css: true
   }
 };
-var RichTextEditor = function RichTextEditor(_ref) {
+var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _props$ariaPlacehold;
   var placeholder = _ref.placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded);
+    onChange = _ref.onChange;
+    _ref.value;
+    var props = _objectWithoutProperties(_ref, _excluded);
   var _useIdentity = useIdentity(),
     _useIdentity2 = _slicedToArray(_useIdentity, 1),
     id = _useIdentity2[0];
@@ -91,6 +92,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     var _props$use;
     return (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : "serialized";
   });
+  var controlledStatePluginRef = useRef(null);
   var styled = {
     shell: _stylex.props(styles.shell({
       backgroundColor: theme.colors[ColorToken.SurfaceContainer]
@@ -180,6 +182,14 @@ var RichTextEditor = function RichTextEditor(_ref) {
       }
     };
   });
+  useImperativeHandle(ref, function () {
+    return {
+      setValue: function setValue(_value) {
+        var _controlledStatePlugi;
+        (_controlledStatePlugi = controlledStatePluginRef.current) === null || _controlledStatePlugi === void 0 || _controlledStatePlugi.setValue(_value);
+      }
+    };
+  });
   return /*#__PURE__*/React.createElement(LexicalComposer, {
     initialConfig: initialConfig
   }, /*#__PURE__*/React.createElement("div", {
@@ -199,9 +209,10 @@ var RichTextEditor = function RichTextEditor(_ref) {
     disabled: !disabled,
     newTab: true
   }), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(CheckListPlugin, null), /*#__PURE__*/React.createElement(ControlledStatePlugin, {
+    ref: controlledStatePluginRef,
     use: _use,
     onChange: onChange
   }), holder));
-};
+});
 
 export { RichTextEditor as default };

package/dist/components/select/hooks.cjs

@@ -4,8 +4,7 @@ var React = require('react');
 var relax = require('@aiszlab/relax');
 var utils = require('./utils.cjs');
 
-var _excluded = ["mode", "close", "isComplex", "readableOptions"],
-  _excluded2 = ["options", "onSearch"];
+var _excluded = ["mode", "close", "isComplex", "readableOptions", "onChange"];
 /**
  * @description
  * use value
@@ -15,15 +14,15 @@ var useValue = function useValue(_ref) {
     close = _ref.close,
     isComplex = _ref.isComplex,
     readableOptions = _ref.readableOptions,
+    _onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
-  var isControlled = !relax.isUndefined(props.value);
   var _useControlledState = relax.useControlledState(props.value),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     value = _useControlledState2[0],
     setValue = _useControlledState2[1];
-  /// convert prop value into a map
-  /// in this component, only use map for controlled state
-  /// only effect by value change
+  // convert prop value into a map
+  // in this component, only use map for controlled state
+  // only effect by value change
   var readableValues = React.useMemo(function () {
     return utils.toValues(value).reduce(function (prev, _value) {
       var _ref2, _value$label;
@@ -44,11 +43,7 @@ var useValue = function useValue(_ref) {
       close();
       // same value, do not toggle again
       if (readableValues.has(key)) return;
-      if (isControlled) {
-        var _props$onChange;
-        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, isComplex ? _value : key);
-        return;
-      }
+      _onChange === null || _onChange === void 0 || _onChange(isComplex ? _value : key);
       setValue(_value);
       return;
     }
@@ -58,28 +53,17 @@ var useValue = function useValue(_ref) {
     var prev = new Map(readableValues);
     var isRemoved = prev.has(key) && prev["delete"](key);
     var next = isRemoved ? prev : prev.set(key, _value.label);
-    if (isControlled) {
-      var _props$onChange2;
-      (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, isComplex ? Array.from(next.entries()).map(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          value = _ref4[0],
-          label = _ref4[1];
-        return {
-          value: value,
-          label: label
-        };
-      }) : Array.from(next.keys()));
-      return;
-    }
-    setValue(Array.from(next.entries()).map(function (_ref5) {
-      var _ref6 = _slicedToArray(_ref5, 2),
-        value = _ref6[0],
-        label = _ref6[1];
+    var _changedValues = isComplex ? Array.from(next.entries()).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        value = _ref4[0],
+        label = _ref4[1];
       return {
         value: value,
         label: label
       };
-    }));
+    }) : Array.from(next.keys());
+    _onChange === null || _onChange === void 0 || _onChange(_changedValues);
+    setValue(_changedValues);
   });
   return {
     value: value,
@@ -91,36 +75,27 @@ var useValue = function useValue(_ref) {
  * @description
  * options
  */
-var useOptions = function useOptions(_ref7) {
-  var options = _ref7.options,
-    onSearch = _ref7.onSearch,
-    props = _objectWithoutProperties(_ref7, _excluded2);
+var useOptions = function useOptions(_ref5) {
+  var options = _ref5.options,
+    onSearch = _ref5.onSearch,
+    onFilter = _ref5.onFilter;
   var _useState = React.useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searched = _useState2[0],
     setSearched = _useState2[1];
-  var onFilterGetter = relax.useEvent(function () {
-    var _props$onFilter;
-    return (_props$onFilter = props.onFilter) !== null && _props$onFilter !== void 0 ? _props$onFilter : true;
+  var filter = relax.useEvent(function (option) {
+    if (!searched) return true;
+    if (relax.isNull(onFilter) || onFilter === false) return true;
+    if (relax.isFunction(onFilter)) return onFilter(searched, option);
+    var regExp = new RegExp(searched, "i");
+    return regExp.test(option.value.toString()) || !!(option.label && regExp.test(option.label));
   });
-  var filter = React.useMemo(function () {
-    if (!searched) return null;
-    var onFilter = onFilterGetter();
-    if (!onFilter) return null;
-    if (relax.isFunction(onFilter)) return function (option) {
-      return onFilter(searched, option);
-    };
-    return function (option) {
-      var _option$label;
-      return !!((_option$label = option.label) !== null && _option$label !== void 0 && _option$label.includes(searched));
-    };
-  }, [searched, onFilterGetter]);
-  /// wrapper search handler, set react state
+  // wrapper search handler, set react state
   var search = relax.useEvent(function (searched) {
     setSearched(searched);
     onSearch === null || onSearch === void 0 || onSearch(searched);
   });
-  /// reset search value
+  // reset search value
   var reset = relax.useEvent(function () {
     return setSearched("");
   });

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

@@ -1,11 +1,11 @@
 import { type Key } from "react";
-import type { Mode, ReadableOptions, SelectProps, ValueOrValues } from "./types";
+import type { Mode, ReadableOptions, SelectProps, ValueOrValues } from "../../types/select";
 import type { Option } from "musae/types/option";
 /**
  * @description
  * use value
  */
-export declare const useValue: <T extends ValueOrValues = ValueOrValues>({ mode, close, isComplex, readableOptions, ...props }: {
+export declare const useValue: <T extends ValueOrValues = ValueOrValues>({ mode, close, isComplex, readableOptions, onChange: _onChange, ...props }: {
     value: ValueOrValues | undefined;
     readableOptions: ReadableOptions;
     mode: Mode | undefined;
@@ -22,7 +22,7 @@ export declare const useValue: <T extends ValueOrValues = ValueOrValues>({ mode,
  * @description
  * options
  */
-export declare const useOptions: ({ options, onSearch, ...props }: {
+export declare const useOptions: ({ options, onSearch, onFilter, }: {
     options: Option[];
     onFilter: SelectProps["onFilter"];
     onSearch: SelectProps["onSearch"];

package/dist/components/select/hooks.mjs

@@ -1,11 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useMemo, useState } from 'react';
-import { isUndefined, useControlledState, useEvent, isFunction } from '@aiszlab/relax';
+import { useControlledState, useEvent, isNull, isFunction } from '@aiszlab/relax';
 import { toValues, toKey, readOptions as _readOptions, toMenuItems } from './utils.mjs';
 
-var _excluded = ["mode", "close", "isComplex", "readableOptions"],
-  _excluded2 = ["options", "onSearch"];
+var _excluded = ["mode", "close", "isComplex", "readableOptions", "onChange"];
 /**
  * @description
  * use value
@@ -15,15 +14,15 @@ var useValue = function useValue(_ref) {
     close = _ref.close,
     isComplex = _ref.isComplex,
     readableOptions = _ref.readableOptions,
+    _onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
-  var isControlled = !isUndefined(props.value);
   var _useControlledState = useControlledState(props.value),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     value = _useControlledState2[0],
     setValue = _useControlledState2[1];
-  /// convert prop value into a map
-  /// in this component, only use map for controlled state
-  /// only effect by value change
+  // convert prop value into a map
+  // in this component, only use map for controlled state
+  // only effect by value change
   var readableValues = useMemo(function () {
     return toValues(value).reduce(function (prev, _value) {
       var _ref2, _value$label;
@@ -44,11 +43,7 @@ var useValue = function useValue(_ref) {
       close();
       // same value, do not toggle again
       if (readableValues.has(key)) return;
-      if (isControlled) {
-        var _props$onChange;
-        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, isComplex ? _value : key);
-        return;
-      }
+      _onChange === null || _onChange === void 0 || _onChange(isComplex ? _value : key);
       setValue(_value);
       return;
     }
@@ -58,28 +53,17 @@ var useValue = function useValue(_ref) {
     var prev = new Map(readableValues);
     var isRemoved = prev.has(key) && prev["delete"](key);
     var next = isRemoved ? prev : prev.set(key, _value.label);
-    if (isControlled) {
-      var _props$onChange2;
-      (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, isComplex ? Array.from(next.entries()).map(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          value = _ref4[0],
-          label = _ref4[1];
-        return {
-          value: value,
-          label: label
-        };
-      }) : Array.from(next.keys()));
-      return;
-    }
-    setValue(Array.from(next.entries()).map(function (_ref5) {
-      var _ref6 = _slicedToArray(_ref5, 2),
-        value = _ref6[0],
-        label = _ref6[1];
+    var _changedValues = isComplex ? Array.from(next.entries()).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        value = _ref4[0],
+        label = _ref4[1];
       return {
         value: value,
         label: label
       };
-    }));
+    }) : Array.from(next.keys());
+    _onChange === null || _onChange === void 0 || _onChange(_changedValues);
+    setValue(_changedValues);
   });
   return {
     value: value,
@@ -91,36 +75,27 @@ var useValue = function useValue(_ref) {
  * @description
  * options
  */
-var useOptions = function useOptions(_ref7) {
-  var options = _ref7.options,
-    onSearch = _ref7.onSearch,
-    props = _objectWithoutProperties(_ref7, _excluded2);
+var useOptions = function useOptions(_ref5) {
+  var options = _ref5.options,
+    onSearch = _ref5.onSearch,
+    onFilter = _ref5.onFilter;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searched = _useState2[0],
     setSearched = _useState2[1];
-  var onFilterGetter = useEvent(function () {
-    var _props$onFilter;
-    return (_props$onFilter = props.onFilter) !== null && _props$onFilter !== void 0 ? _props$onFilter : true;
+  var filter = useEvent(function (option) {
+    if (!searched) return true;
+    if (isNull(onFilter) || onFilter === false) return true;
+    if (isFunction(onFilter)) return onFilter(searched, option);
+    var regExp = new RegExp(searched, "i");
+    return regExp.test(option.value.toString()) || !!(option.label && regExp.test(option.label));
   });
-  var filter = useMemo(function () {
-    if (!searched) return null;
-    var onFilter = onFilterGetter();
-    if (!onFilter) return null;
-    if (isFunction(onFilter)) return function (option) {
-      return onFilter(searched, option);
-    };
-    return function (option) {
-      var _option$label;
-      return !!((_option$label = option.label) !== null && _option$label !== void 0 && _option$label.includes(searched));
-    };
-  }, [searched, onFilterGetter]);
-  /// wrapper search handler, set react state
+  // wrapper search handler, set react state
   var search = useEvent(function (searched) {
     setSearched(searched);
     onSearch === null || onSearch === void 0 || onSearch(searched);
   });
-  /// reset search value
+  // reset search value
   var reset = useEvent(function () {
     return setSearched("");
   });

package/dist/components/select/select.cjs

@@ -24,7 +24,8 @@ var Select = function Select(_ref) {
     _ref$complex = _ref.complex,
     complex = _ref$complex === void 0 ? false : _ref$complex,
     value = _ref.value,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
   var ref = React.useRef(null);
   var selectorRef = React.useRef(null);
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Select);
@@ -65,7 +66,7 @@ var Select = function Select(_ref) {
       className: "musaex-1pgy25r"
     }
   };
-  return /*#__PURE__*/React.createElement(picker.default, {
+  return /*#__PURE__*/React.createElement(picker.default, _objectSpread({
     ref: ref,
     pickable: /*#__PURE__*/React.createElement(selections.default, {
       items: menuItems,
@@ -78,14 +79,19 @@ var Select = function Select(_ref) {
     pickableClassName: styled.pickable.className,
     pickableStyle: styled.pickable.style,
     onPopperExite: reset
-  }, /*#__PURE__*/React.createElement(selector.default, {
+  }, !searchable && {
+    onBlur: onBlur
+  }), /*#__PURE__*/React.createElement(selector.default, _objectSpread({
     value: readableValues,
     mode: mode,
     searchable: searchable,
     ref: selectorRef,
     searched: searched,
-    onSearch: search
-  }));
+    onSearch: search,
+    onChange: onChange
+  }, searchable && {
+    onBlur: onBlur
+  })));
 };
 
 exports.default = Select;

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

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

package/dist/components/select/select.mjs

@@ -22,7 +22,8 @@ var Select = function Select(_ref) {
     _ref$complex = _ref.complex,
     complex = _ref$complex === void 0 ? false : _ref$complex,
     value = _ref.value,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
   var ref = useRef(null);
   var selectorRef = useRef(null);
   var classNames = useClassNames(ComponentToken.Select);
@@ -63,7 +64,7 @@ var Select = function Select(_ref) {
       className: "musaex-1pgy25r"
     }
   };
-  return /*#__PURE__*/React.createElement(Picker, {
+  return /*#__PURE__*/React.createElement(Picker, _objectSpread({
     ref: ref,
     pickable: /*#__PURE__*/React.createElement(Selections, {
       items: menuItems,
@@ -76,14 +77,19 @@ var Select = function Select(_ref) {
     pickableClassName: styled.pickable.className,
     pickableStyle: styled.pickable.style,
     onPopperExite: reset
-  }, /*#__PURE__*/React.createElement(Selector, {
+  }, !searchable && {
+    onBlur: onBlur
+  }), /*#__PURE__*/React.createElement(Selector, _objectSpread({
     value: readableValues,
     mode: mode,
     searchable: searchable,
     ref: selectorRef,
     searched: searched,
-    onSearch: search
-  }));
+    onSearch: search,
+    onChange: onChange
+  }, searchable && {
+    onBlur: onBlur
+  })));
 };
 
 export { Select as default };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { SelectionsProps } from "./types";
+import type { SelectionsProps } from "../../types/select";
 /**
  * @description
  * just display the selections for user selectable like options