musae 0.3.3 → 0.3.6

package/dist/components/time-picker/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { TimePickerProps } from "./types";
+import type { TimePickerProps } from "musae/types/time-picker";
 import dayjs from "dayjs";
 import { type RefObject } from "react";
 import type { PickerRef } from "musae/types/picker";

package/dist/components/time-picker/panel.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { PanelProps, PanelRef } from "./types";
+import type { PanelProps, PanelRef } from "musae/types/time-picker";
 declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<PanelRef>>;
 export default Panel;

package/dist/components/time-picker/time-picker.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TimePickerProps } from "./types";
+import type { TimePickerProps } from "musae/types/time-picker";
 declare const TimePicker: ({ className, ...props }: TimePickerProps) => React.JSX.Element;
 export default TimePicker;

package/dist/components/timeline/context.d.ts

@@ -1,2 +1,2 @@
-import { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/timeline";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/timeline/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { TimelineItemProps } from "./types";
+import type { TimelineItemProps } from "musae/types/timeline";
 declare const Item: ({ description, label, value, dot }: TimelineItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/timeline/timeline.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TimelineProps } from "./types";
+import type { TimelineProps } from "musae/types/timeline";
 declare const Timeline: ({ items, mode, size }: TimelineProps) => React.JSX.Element;
 export default Timeline;

package/dist/components/tooltip/tooltip.d.ts

@@ -1,4 +1,4 @@
-import { TooltipProps } from "./types";
+import type { TooltipProps } from "musae/types/tooltip";
 import React from "react";
 declare const Tooltip: ({ children, className, style, title }: TooltipProps) => React.JSX.Element;
 export default Tooltip;

package/dist/components/transfer/context.d.ts

@@ -1,4 +1,4 @@
-import { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/transfer";
 /**
  * @description
  * transfer context

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

@@ -1,5 +1,5 @@
 import { type Key } from "react";
-import type { TransferOption } from "./types";
+import type { TransferOption } from "musae/types/transfer";
 /**
  * @description
  * options

package/dist/components/transfer/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TransferItemProps } from "./types";
+import type { TransferItemProps } from "musae/types/transfer";
 declare const Item: ({ value, label }: TransferItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/transfer/list.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TransferListProps } from "./types";
+import type { TransferListProps } from "musae/types/transfer";
 declare const List: ({ options, title, onChange, value }: TransferListProps) => React.JSX.Element;
 export default List;

package/dist/components/transfer/transfer.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TransferProps } from "./types";
+import type { TransferProps } from "musae/types/transfer";
 declare const Transfer: ({ options, value, titles, disabled, className, style, }: TransferProps) => React.JSX.Element;
 export default Transfer;

package/dist/components/upload/upload.cjs

@@ -1,10 +1,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var relax = require('@aiszlab/relax');
 var keyboard = require('../../utils/keyboard.cjs');
 var uploadeds = require('./uploadeds.cjs');
+var button = require('../button/button.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+var componentToken = require('../../utils/component-token.cjs');
 
 var Upload = function Upload(_ref) {
   var _onClick = _ref.onClick,
@@ -12,9 +16,15 @@ var Upload = function Upload(_ref) {
     multiple = _ref.multiple,
     _children = _ref.children,
     uploader = _ref.uploader,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    limit = _ref.limit;
   var inputRef = React.useRef(null);
   var uploadedsRef = React.useRef(null);
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Upload),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    _locale = _useLocale2[0];
   // file upload
   var upload = relax.useEvent(function (files) {
     files.forEach(function (file) {
@@ -22,7 +32,7 @@ var Upload = function Upload(_ref) {
       (_uploadedsRef$current = uploadedsRef.current) === null || _uploadedsRef$current === void 0 || _uploadedsRef$current.add(file);
     });
   });
-  var onChange = relax.useEvent(function (e) {
+  var _onChange = relax.useEvent(function (e) {
     var files = e.target.files;
     if (!files) return;
     upload(Array.from(files));
@@ -45,17 +55,28 @@ var Upload = function Upload(_ref) {
     upload(files);
   };
   var styled = {
+    upload: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
+    },
     input: {
       className: "musaex-1s85apg"
     }
   };
   var children = React.useMemo(function () {
+    if (!_children) {
+      return /*#__PURE__*/React.createElement(button.Button, {
+        disabled: disabled
+      }, _locale.upload);
+    }
     // @ts-ignore
     return /*#__PURE__*/React.cloneElement(_children, {
       disabled: disabled
     });
-  }, [_children, disabled]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
+  }, [_children, disabled, _locale]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.upload.className,
+    style: styled.upload.style
+  }, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
     onClick: onClick,
     onKeyDown: onKeyDown,
     onDrop: onDrop,
@@ -63,17 +84,21 @@ var Upload = function Upload(_ref) {
   }), /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     type: "file",
+    value: "",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
     className: styled.input.className,
     style: styled.input.style,
     multiple: multiple,
-    onChange: onChange
+    onChange: _onChange
   }), children), /*#__PURE__*/React.createElement(uploadeds.default, {
     ref: uploadedsRef,
+    value: value,
     uploader: uploader,
-    onError: onError
+    onError: onError,
+    onChange: onChange,
+    limit: limit
   }));
 };
 

package/dist/components/upload/upload.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { UploadProps } from "./types";
-declare const Upload: ({ onClick: _onClick, disabled, multiple, children: _children, uploader, onError }: UploadProps) => React.JSX.Element;
+import type { UploadProps } from "musae/types/upload";
+declare const Upload: ({ onClick: _onClick, disabled, multiple, children: _children, uploader, onError, value, onChange, limit, }: UploadProps) => React.JSX.Element;
 export default Upload;

package/dist/components/upload/upload.mjs

@@ -1,8 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useMemo, cloneElement } from 'react';
 import { useEvent } from '@aiszlab/relax';
 import { Keyboard } from '../../utils/keyboard.mjs';
 import Uploadeds from './uploadeds.mjs';
+import { Button } from '../button/button.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Upload = function Upload(_ref) {
   var _onClick = _ref.onClick,
@@ -10,9 +14,15 @@ var Upload = function Upload(_ref) {
     multiple = _ref.multiple,
     _children = _ref.children,
     uploader = _ref.uploader,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    limit = _ref.limit;
   var inputRef = useRef(null);
   var uploadedsRef = useRef(null);
+  var _useLocale = useLocale(ComponentToken.Upload),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    _locale = _useLocale2[0];
   // file upload
   var upload = useEvent(function (files) {
     files.forEach(function (file) {
@@ -20,7 +30,7 @@ var Upload = function Upload(_ref) {
       (_uploadedsRef$current = uploadedsRef.current) === null || _uploadedsRef$current === void 0 || _uploadedsRef$current.add(file);
     });
   });
-  var onChange = useEvent(function (e) {
+  var _onChange = useEvent(function (e) {
     var files = e.target.files;
     if (!files) return;
     upload(Array.from(files));
@@ -43,17 +53,28 @@ var Upload = function Upload(_ref) {
     upload(files);
   };
   var styled = {
+    upload: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
+    },
     input: {
       className: "musaex-1s85apg"
     }
   };
   var children = useMemo(function () {
+    if (!_children) {
+      return /*#__PURE__*/React.createElement(Button, {
+        disabled: disabled
+      }, _locale.upload);
+    }
     // @ts-ignore
     return /*#__PURE__*/cloneElement(_children, {
       disabled: disabled
     });
-  }, [_children, disabled]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
+  }, [_children, disabled, _locale]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.upload.className,
+    style: styled.upload.style
+  }, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
     onClick: onClick,
     onKeyDown: onKeyDown,
     onDrop: onDrop,
@@ -61,17 +82,21 @@ var Upload = function Upload(_ref) {
   }), /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     type: "file",
+    value: "",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
     className: styled.input.className,
     style: styled.input.style,
     multiple: multiple,
-    onChange: onChange
+    onChange: _onChange
   }), children), /*#__PURE__*/React.createElement(Uploadeds, {
     ref: uploadedsRef,
+    value: value,
     uploader: uploader,
-    onError: onError
+    onError: onError,
+    onChange: onChange,
+    limit: limit
   }));
 };
 

package/dist/components/upload/uploadeds.cjs

@@ -1,72 +1,132 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
+var theme = require('../theme/theme.cjs');
+var utils = require('./utils.cjs');
+var path = require('@aiszlab/fuzzy/path');
 var loading = require('../icon/icons/mock/loading.cjs');
-var clear = require('../icon/icons/content/clear.cjs');
+var attchFile = require('../icon/icons/editor/attch-file.cjs');
+var _delete = require('../icon/icons/action/delete.cjs');
 
+var _excluded = ["key"];
+var styles = {
+  item: {
+    display: "musaex-78zum5",
+    alignItems: "musaex-6s0dn4",
+    gap: "musaex-1lsrmdg",
+    $$css: true
+  }
+};
 var Uploadeds = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var uploader = _ref.uploader,
-    onError = _ref.onError;
-  var _useState = React.useState(new Map()),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _counter = React.useRef(0);
-  var loaded = relax.useEvent(function (id, status) {
-    // update uploaded list status
-    setItems(function (_items) {
-      var current = _items.get(id);
-      if (!current) return _items;
-      return new Map(_items).set(id, _objectSpread(_objectSpread({}, current), {}, {
-        status: status
-      }));
-    });
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? Infinity : _ref$limit;
+  var _useControlledState = relax.useControlledState(value, {
+      defaultState: []
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    values = _useControlledState2[0],
+    setValues = _useControlledState2[1];
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 2),
+    identity = _useIdentity2[1];
+  // convert to map, for performance
+  var items = React.useMemo(function () {
+    return values.reduce(function (prev, _item) {
+      var _isControlled = utils.isControlled(_item);
+      if (_isControlled) {
+        var _item$key;
+        var _id = (_item$key = _item.key) !== null && _item$key !== void 0 ? _item$key : _item.url;
+        prev.set(_id, {
+          key: _id,
+          status: "success",
+          url: _item.url
+        });
+        return prev;
+      }
+      prev.set(_item.key, _item);
+      return prev;
+    }, new Map());
+  }, [values]);
+  // when loading status changed
+  // use this func to set new status & callback
+  var onLoaded = relax.useEvent(function (id, status, _ref2) {
+    var url = _ref2.url,
+      error = _ref2.error;
+    if (!items.has(id)) return;
+    var _items = new Map(items);
+    var _values = Array.from(_items.set(id, _objectSpread(_objectSpread({}, _items.get(id)), {}, {
+      status: status,
+      url: url,
+      error: error
+    })).values());
+    setValues(_values);
+    // change handler
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   React.useImperativeHandle(ref, function () {
     return {
       add: function () {
         var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-          var hasUploader, status, id, url;
+          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _values, _url;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                hasUploader = !!uploader;
-                status = hasUploader ? "loading" : "success"; // push current file
-                id = _counter.current++;
-                setItems(function (items) {
-                  return new Map(items).set(id, {
-                    file: file,
-                    status: status
-                  });
-                });
-                // call request by user provided
-                if (hasUploader) {
-                  _context.next = 6;
+                _hasUploader = !!uploader;
+                _isOnlyOne = limit === 1;
+                _isOverLimit = items.size >= limit; // over `limit`
+                if (!(_isOverLimit && !_isOnlyOne)) {
+                  _context.next = 5;
                   break;
                 }
                 return _context.abrupt("return");
-              case 6:
-                _context.next = 8;
-                return uploader(file)["catch"](function (error) {
-                  loaded(id, "error");
-                  onError === null || onError === void 0 || onError(error);
-                  return null;
-                });
-              case 8:
-                url = _context.sent;
-                if (url) {
+              case 5:
+                // show loading in `add` trigger
+                _key = identity();
+                _values = Array.from(new Map(_isOnlyOne ? [] : items).set(_key, {
+                  key: _key,
+                  file: file,
+                  status: _hasUploader ? "loading" : "success"
+                }).values());
+                setValues(_values);
+                onChange === null || onChange === void 0 || onChange(_values);
+                // when no uploader, use original file
+                if (_hasUploader) {
                   _context.next = 11;
                   break;
                 }
                 return _context.abrupt("return");
               case 11:
-                loaded(id, "success");
-              case 12:
+                _context.next = 13;
+                return uploader(file)["catch"](function (error) {
+                  return new Error(error.message);
+                });
+              case 13:
+                _url = _context.sent;
+                if (!(_url instanceof Error)) {
+                  _context.next = 18;
+                  break;
+                }
+                onLoaded(_key, "error", {
+                  error: _url
+                });
+                onError === null || onError === void 0 || onError(_url);
+                return _context.abrupt("return");
+              case 18:
+                onLoaded(_key, "success", {
+                  url: _url
+                });
+              case 19:
               case "end":
                 return _context.stop();
             }
@@ -79,33 +139,37 @@ var Uploadeds = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }()
     };
   });
-  var remove = relax.useEvent(function (id) {
-    setItems(function (_items) {
-      var next = new Map(_items);
-      next["delete"](id);
-      return next;
-    });
+  var remove = relax.useEvent(function (key) {
+    var _items = new Map(items);
+    _items["delete"](key);
+    var _values = Array.from(_items.values());
+    setValues(_values);
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   var styled = {
     uploadeds: {
-      className: "musaex-78zum5 musaex-dt5ytf musaex-4ttznp"
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
     },
-    item: {
-      className: "musaex-78zum5 musaex-6s0dn4 musaex-1lsrmdg"
+    item: stylex.default.props(styles.item, theme.typography.body.small),
+    filename: {
+      className: "musaex-98rzlu musaex-b3r6kr musaex-lyipyv"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styled.uploadeds.className,
     style: styled.uploadeds.style
-  }, Array.from(items.entries()).map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      item = _ref3[1];
+  }, Array.from(items.values()).map(function (_ref3) {
+    var _item$file$name, _item$file, _item$url;
+    var key = _ref3.key,
+      item = _objectWithoutProperties(_ref3, _excluded);
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: styled.item.className,
       style: styled.item.style
-    }, /*#__PURE__*/React.createElement(loading.default, null), item.file.name, /*#__PURE__*/React.createElement(clear.default, {
+    }, item.status === "loading" && /*#__PURE__*/React.createElement(loading.default, null), item.status !== "loading" && /*#__PURE__*/React.createElement(attchFile.default, null), /*#__PURE__*/React.createElement("span", {
+      className: styled.filename.className,
+      style: styled.filename.style
+    }, (_item$file$name = (_item$file = item.file) === null || _item$file === void 0 ? void 0 : _item$file.name) !== null && _item$file$name !== void 0 ? _item$file$name : path.leaf((_item$url = item.url) !== null && _item$url !== void 0 ? _item$url : "")), /*#__PURE__*/React.createElement(_delete.default, {
       onClick: function onClick() {
         return remove(key);
       }

package/dist/components/upload/uploadeds.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { UploadedsProps, UploadedsRef } from "./types";
+import type { UploadedsProps, UploadedsRef } from "musae/types/upload";
 declare const Uploadeds: React.ForwardRefExoticComponent<UploadedsProps & React.RefAttributes<UploadedsRef>>;
 export default Uploadeds;