musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/select/hooks/use-selected-value.d.ts

@@ -5,7 +5,6 @@ interface UsingSelectedValue<T extends ValueOrValues = ValueOrValues> {
     readableOptions: ReadableOptions;
     mode: Mode | undefined;
     complex: boolean;
-    close: () => void;
     clearKeyword: () => void;
     onChange?: (value: T | undefined) => void;
     onClear?: () => void;
@@ -14,10 +13,10 @@ interface UsingSelectedValue<T extends ValueOrValues = ValueOrValues> {
  * useSelectedValue
  * @description 处理已选中值
  */
-export declare const useSelectedValue: <T extends ValueOrValues = ValueOrValues>({ mode, close, complex, readableOptions, onChange, onClear, clearKeyword, ...props }: UsingSelectedValue<T>) => {
+export declare const useSelectedValue: <T extends ValueOrValues = ValueOrValues>({ mode, complex, readableOptions, onChange, onClear, clearKeyword, ...props }: UsingSelectedValue<T>) => {
     value: ValueOrValues | undefined;
     readableValues: Map<Key, ReactNode>;
-    change: (key: Key) => void;
+    change: (key: Key, close?: VoidFunction) => void;
     clear: () => void;
     selectedKeys: Key[];
 };

package/dist/components/select/hooks/use-selected-value.mjs

@@ -4,14 +4,13 @@ import { useControlledState, toArray, useEvent } from '@aiszlab/relax';
 import { toKey } from '../utils.mjs';
 import { useMemo } from 'react';
 
-var _excluded = ["mode", "close", "complex", "readableOptions", "onChange", "onClear", "clearKeyword"];
+var _excluded = ["mode", "complex", "readableOptions", "onChange", "onClear", "clearKeyword"];
 /**
  * useSelectedValue
  * @description 处理已选中值
  */
 var useSelectedValue = function useSelectedValue(_ref) {
   var mode = _ref.mode,
-    close = _ref.close,
     complex = _ref.complex,
     readableOptions = _ref.readableOptions,
     onChange = _ref.onChange,
@@ -32,7 +31,7 @@ var useSelectedValue = function useSelectedValue(_ref) {
       return prev.set(key, (_ref2 = (_value$label = _value.label) !== null && _value$label !== void 0 ? _value$label : readableOptions.get(key)) !== null && _ref2 !== void 0 ? _ref2 : _value.toString());
     }, new Map());
   }, [value, readableOptions]);
-  var change = useEvent(function (key) {
+  var change = useEvent(function (key, close) {
     var _readableOptions$get;
     // convert to complex value
     var _value = {
@@ -42,7 +41,7 @@ var useSelectedValue = function useSelectedValue(_ref) {
     // 单选模式下，点击选项直接关闭下拉菜单
     // 如果点击的选项已经被选中，则不执行任何操作
     if (!mode) {
-      close();
+      close === null || close === void 0 || close();
       if (readableValues.has(_value.value)) {
         return;
       }

package/dist/components/select/select.cjs

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('./styles.cjs');
 var React = require('react');
 var picker = require('../picker/picker.cjs');
 var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var selector = require('./selector.cjs');
 var selections = require('./selections.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
@@ -29,18 +30,13 @@ var Select = function Select(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
+    label = _ref.label,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     placeholder = _ref.placeholder,
     onClear = _ref.onClear,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var ref = React.useRef(null);
-  var selectorRef = React.useRef(null);
-  var close = React.useCallback(function () {
-    var _ref$current;
-    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.close();
-  }, []);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var searchable = _searchable || mode === "tags";
   var _useOptions = useOptions.useOptions({
@@ -58,7 +54,6 @@ var Select = function Select(_ref) {
       value: value,
       readableOptions: _readableOptions,
       mode: mode,
-      close: close,
       clearKeyword: clearKeyword,
       onChange: onChange,
       complex: complex,
@@ -76,51 +71,55 @@ var Select = function Select(_ref) {
     filter: filter,
     keyword: keyword
   });
-  var click = function click() {
-    var _selectorRef$current;
-    if (disabled) return;
-    (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 || _selectorRef$current.focus();
-  };
   var styled = {
-    picker: {
-      className: "musaex-15wobh7 musaex-1a02dak"
-    },
-    pickable: {
-      className: "musaex-1nskiab"
-    }
+    pickable: stylex.props(styles.default.select.pickable)
   };
-  return /*#__PURE__*/React.createElement(picker.default, _objectSpread({
-    ref: ref,
-    pickable: /*#__PURE__*/React.createElement(selections.default, {
-      items: menuItems,
-      onSelect: change,
-      selectedKeys: selectedKeys
-    }),
-    className: className.stringify(classNames.select, className$1, styled.picker.className),
-    style: _objectSpread(_objectSpread({}, styled.picker.style), style),
-    onClick: click,
+  return /*#__PURE__*/React.createElement(picker.default, {
+    pickable: function pickable(_ref2) {
+      var close = _ref2.close,
+        isOpen = _ref2.isOpen;
+      return /*#__PURE__*/React.createElement(selections.default, {
+        isOpen: isOpen,
+        items: menuItems,
+        onSelect: function onSelect(key) {
+          change(key, close);
+        },
+        selectedKeys: selectedKeys
+      });
+    },
     pickableClassName: styled.pickable.className,
     pickableStyle: styled.pickable.style,
-    onPopperExite: clearKeyword,
-    invalid: invalid,
-    disabled: disabled,
-    onClear: onClear ? clear : void 0
-  }, !searchable && {
-    onBlur: onBlur
-  }), /*#__PURE__*/React.createElement(selector.default, _objectSpread(_objectSpread({
-    value: readableValues,
-    mode: mode,
-    searchable: searchable,
-    ref: selectorRef,
-    keyword: keyword,
-    onSearch: search,
-    onChange: change
-  }, searchable && {
-    onBlur: onBlur
-  }), {}, {
-    placeholder: placeholder,
-    disabled: disabled
-  })));
+    onPopperExite: clearKeyword
+  }, function (_ref3) {
+    var open = _ref3.open,
+      toggle = _ref3.toggle,
+      close = _ref3.close,
+      triggerRef = _ref3.triggerRef;
+    return /*#__PURE__*/React.createElement(selector.default, {
+      className: className.stringify(classNames.select, className$1),
+      style: style,
+      value: readableValues,
+      mode: mode,
+      searchable: searchable,
+      ref: triggerRef,
+      keyword: keyword,
+      onSearch: function onSearch(keyword) {
+        search(keyword);
+      },
+      onChange: change,
+      onBlur: onBlur,
+      onClose: close,
+      onOpen: open,
+      onClear: onClear ? clear : void 0,
+      placeholder: placeholder,
+      label: label,
+      disabled: disabled,
+      invalid: invalid,
+      onClick: function onClick() {
+        toggle();
+      }
+    });
+  });
 };
 
 exports.default = Select;

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

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

package/dist/components/select/select.mjs

@@ -1,7 +1,8 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import React, { useRef, useCallback } from 'react';
+import styles from './styles.mjs';
+import React from 'react';
 import Picker from '../picker/picker.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Selector from './selector.mjs';
 import Selections from './selections.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
@@ -25,18 +26,13 @@ var Select = function Select(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
+    label = _ref.label,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     placeholder = _ref.placeholder,
     onClear = _ref.onClear,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var ref = useRef(null);
-  var selectorRef = useRef(null);
-  var close = useCallback(function () {
-    var _ref$current;
-    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.close();
-  }, []);
   var classNames = useClassNames(CLASS_NAMES);
   var searchable = _searchable || mode === "tags";
   var _useOptions = useOptions({
@@ -54,7 +50,6 @@ var Select = function Select(_ref) {
       value: value,
       readableOptions: _readableOptions,
       mode: mode,
-      close: close,
       clearKeyword: clearKeyword,
       onChange: onChange,
       complex: complex,
@@ -72,51 +67,55 @@ var Select = function Select(_ref) {
     filter: filter,
     keyword: keyword
   });
-  var click = function click() {
-    var _selectorRef$current;
-    if (disabled) return;
-    (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 || _selectorRef$current.focus();
-  };
   var styled = {
-    picker: {
-      className: "musaex-15wobh7 musaex-1a02dak"
-    },
-    pickable: {
-      className: "musaex-1nskiab"
-    }
+    pickable: props(styles.select.pickable)
   };
-  return /*#__PURE__*/React.createElement(Picker, _objectSpread({
-    ref: ref,
-    pickable: /*#__PURE__*/React.createElement(Selections, {
-      items: menuItems,
-      onSelect: change,
-      selectedKeys: selectedKeys
-    }),
-    className: stringify(classNames.select, className, styled.picker.className),
-    style: _objectSpread(_objectSpread({}, styled.picker.style), style),
-    onClick: click,
+  return /*#__PURE__*/React.createElement(Picker, {
+    pickable: function pickable(_ref2) {
+      var close = _ref2.close,
+        isOpen = _ref2.isOpen;
+      return /*#__PURE__*/React.createElement(Selections, {
+        isOpen: isOpen,
+        items: menuItems,
+        onSelect: function onSelect(key) {
+          change(key, close);
+        },
+        selectedKeys: selectedKeys
+      });
+    },
     pickableClassName: styled.pickable.className,
     pickableStyle: styled.pickable.style,
-    onPopperExite: clearKeyword,
-    invalid: invalid,
-    disabled: disabled,
-    onClear: onClear ? clear : void 0
-  }, !searchable && {
-    onBlur: onBlur
-  }), /*#__PURE__*/React.createElement(Selector, _objectSpread(_objectSpread({
-    value: readableValues,
-    mode: mode,
-    searchable: searchable,
-    ref: selectorRef,
-    keyword: keyword,
-    onSearch: search,
-    onChange: change
-  }, searchable && {
-    onBlur: onBlur
-  }), {}, {
-    placeholder: placeholder,
-    disabled: disabled
-  })));
+    onPopperExite: clearKeyword
+  }, function (_ref3) {
+    var open = _ref3.open,
+      toggle = _ref3.toggle,
+      close = _ref3.close,
+      triggerRef = _ref3.triggerRef;
+    return /*#__PURE__*/React.createElement(Selector, {
+      className: stringify(classNames.select, className),
+      style: style,
+      value: readableValues,
+      mode: mode,
+      searchable: searchable,
+      ref: triggerRef,
+      keyword: keyword,
+      onSearch: function onSearch(keyword) {
+        search(keyword);
+      },
+      onChange: change,
+      onBlur: onBlur,
+      onClose: close,
+      onOpen: open,
+      onClear: onClear ? clear : void 0,
+      placeholder: placeholder,
+      label: label,
+      disabled: disabled,
+      invalid: invalid,
+      onClick: function onClick() {
+        toggle();
+      }
+    });
+  });
 };
 
 export { Select as default };

package/dist/components/select/selections.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var menu = require('../menu/menu.cjs');
-var context = require('../picker/context.cjs');
 var relax = require('@aiszlab/relax');
 var empty = require('../empty/empty.cjs');
 
@@ -18,11 +17,10 @@ var empty = require('../empty/empty.cjs');
  * but in animation time, we do not need to re-render the component, keep options in last state
  */
 var Selections = function Selections(_ref) {
-  var onSelect = _ref.onSelect,
+  var isOpen = _ref.isOpen,
+    onSelect = _ref.onSelect,
     selectedKeys = _ref.selectedKeys,
     menuItems = _ref.items;
-  var _useContext = React.useContext(context.Context),
-    isOpen = _useContext.isOpen;
   var items = relax.useMemorized(function (prev) {
     if (!isOpen) return prev !== null && prev !== void 0 ? prev : menuItems;
     return menuItems;

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

@@ -9,5 +9,5 @@ import type { SelectionsProps } from "../../types/select";
  * because in options close, we use timeout animations
  * but in animation time, we do not need to re-render the component, keep options in last state
  */
-declare const Selections: ({ onSelect, selectedKeys, items: menuItems }: SelectionsProps) => React.JSX.Element;
+declare const Selections: ({ isOpen, onSelect, selectedKeys, items: menuItems }: SelectionsProps) => React.JSX.Element;
 export default Selections;

package/dist/components/select/selections.mjs

@@ -1,6 +1,5 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import Menu from '../menu/menu.mjs';
-import { Context } from '../picker/context.mjs';
 import { useMemorized } from '@aiszlab/relax';
 import Empty from '../empty/empty.mjs';
 
@@ -14,11 +13,10 @@ import Empty from '../empty/empty.mjs';
  * but in animation time, we do not need to re-render the component, keep options in last state
  */
 var Selections = function Selections(_ref) {
-  var onSelect = _ref.onSelect,
+  var isOpen = _ref.isOpen,
+    onSelect = _ref.onSelect,
     selectedKeys = _ref.selectedKeys,
     menuItems = _ref.items;
-  var _useContext = useContext(Context),
-    isOpen = _useContext.isOpen;
   var items = useMemorized(function (prev) {
     if (!isOpen) return prev !== null && prev !== void 0 ? prev : menuItems;
     return menuItems;

package/dist/components/select/selector.cjs

@@ -2,30 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var React = require('react');
 var tag = require('../tag/tag.cjs');
 var input = require('../input/input.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var context = require('../picker/context.cjs');
-var theme = require('../theme/theme.cjs');
-var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
-var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var utils = require('./utils.cjs');
+var close = require('../icon/icons/navigation/close.cjs');
 
-var styles = {
-  input: {
-    focused: {
-      "default": {
-        $$css: true
-      },
-      searchable: {
-        k8Qsv1: "musaex-1ew5llu",
-        $$css: true
-      }
-    }
-  }};
 var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var mode = _ref.mode,
     searchable = _ref.searchable,
@@ -33,80 +18,65 @@ var Selector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSearch = _ref.onSearch,
     keyword = _ref.keyword,
     onChange = _ref.onChange,
-    onBlur = _ref.onBlur,
+    _onBlur = _ref.onBlur,
+    onClose = _ref.onClose,
+    onOpen = _ref.onOpen,
+    onClear = _ref.onClear,
+    onClick = _ref.onClick,
     placeholder = _ref.placeholder,
+    label = _ref.label,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var inputRef = React.useRef(null);
-  var _useContext = React.useContext(context.Context),
-    isFocused = _useContext.isFocused,
-    open = _useContext.open;
-  var _themeColorVars = useThemeColorVars.useThemeColorVars(["on-surface", ["on-surface", tokens_stylex.OPACITY.thickest]]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        var _inputRef$current;
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-      }
-    };
-  });
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$invalid = _ref.invalid,
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid;
+  var multiple = utils.isMultiple(mode);
+  var selectedValue = Array.from(value.values()).join(",");
   // on user search input, trigger the search callback
-  var search = function search(e) {
-    open === null || open === void 0 || open();
-    onSearch(e.target.value);
+  var search = function search(nextKeyword) {
+    onOpen();
+    onSearch(nextKeyword);
   };
   var styled = {
-    input: stylex.props(input.styles.input, styles.input.focused["default"], isFocused && searchable && styles.input.focused.searchable, theme.$body.small),
-    placeholder: {
-      className: "musaex-1ldep6k"
-    }
+    input: stylex.props(styles.default.selector.input)
   };
-  // multiple mode render
-  if (utils.isMultiple(mode)) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(value.entries()).map(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        label = _ref3[1];
-      return /*#__PURE__*/React.createElement(tag.default, {
-        key: key,
-        size: "small",
-        closable: !disabled,
-        onClose: function onClose(event) {
-          // stop event: in `Select`, it will trigger and open the popup
-          event.stopPropagation();
-          onChange(key);
-        }
-      }, label);
-    }), searchable && (/*#__PURE__*/React.createElement("input", {
-      ref: inputRef,
-      value: keyword,
-      className: styled.input.className,
-      style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars),
-      onChange: search,
-      onBlur: onBlur,
-      placeholder: placeholder,
-      disabled: disabled
-    })));
-  }
-  // single mode render
-  if (!searchable) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: styled.input.className,
-      style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars)
-    }, Array.from(value.values()).join(",") || !!placeholder && (/*#__PURE__*/React.createElement("span", {
-      className: styled.placeholder.className,
-      style: styled.placeholder.style
-    }, placeholder)));
-  }
-  return /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    value: keyword,
-    placeholder: Array.from(value.values()).join(",") || placeholder,
+  var selections = multiple ? Array.from(value.entries()).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      label = _ref3[1];
+    return /*#__PURE__*/React.createElement(tag.default, {
+      key: key,
+      size: "small",
+      closable: !disabled,
+      onClose: function onClose(event) {
+        // stop event: in `Select`, it will trigger and open the popup
+        event.stopPropagation();
+        onChange(key);
+      }
+    }, label);
+  }) : undefined;
+  return /*#__PURE__*/React.createElement(input.default, {
+    ref: ref,
+    value: searchable ? keyword : multiple ? "" : selectedValue,
+    placeholder: searchable && !multiple ? selectedValue || placeholder : placeholder,
+    label: label,
     className: styled.input.className,
-    style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars),
-    onChange: search,
-    onBlur: onBlur,
-    disabled: disabled
+    style: styled.input.style,
+    onChange: searchable ? search : undefined,
+    onClick: onClick,
+    onBlur: function onBlur(event) {
+      _onBlur === null || _onBlur === void 0 || _onBlur(event);
+      onClose();
+    },
+    readOnly: !searchable,
+    disabled: disabled,
+    invalid: invalid,
+    leading: selections,
+    trailing: !!onClear && !disabled && (/*#__PURE__*/React.createElement(close.default, {
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        onClear();
+      }
+    }))
   });
 });
 

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

@@ -1,8 +1,11 @@
 import React from "react";
-import type { SelectorRef } from "../../types/select";
-declare const Selector: React.ForwardRefExoticComponent<Pick<import("@aiszlab/relax/types").RequiredIn<import("../../types/select").SelectProps<import("../../types/select").ValueOrValues>, "searchable" | "onSearch">, "disabled" | "onBlur" | "mode" | "placeholder" | "searchable" | "onSearch"> & {
+import type { InputRef } from "../../types/input";
+declare const Selector: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & Pick<import("@aiszlab/relax/types").RequiredIn<import("../../types/select").SelectProps<import("../../types/select").ValueOrValues>, "searchable" | "onSearch">, "mode" | "disabled" | "label" | "onBlur" | "onClear" | "invalid" | "placeholder" | "searchable" | "onSearch"> & {
     value: Map<React.Key, React.ReactNode>;
     keyword: string;
     onChange: (key: React.Key) => void;
-} & React.RefAttributes<SelectorRef>>;
+    onClose: () => void;
+    onOpen: () => void;
+    onClick?: import("../../types/input").InputProps["onClick"];
+} & React.RefAttributes<InputRef>>;
 export default Selector;