musae 0.4.2 → 0.4.3

package/dist/components/avatar/avatar.cjs

@@ -12,7 +12,7 @@ var theme = require('../theme/theme.cjs');
 var relax = require('@aiszlab/relax');
 var skeleton = require('../skeleton/skeleton.cjs');
 
-var _excluded = ["src", "alt", "shape", "size", "className", "style"];
+var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrigin", "referrerPolicy"];
 var styles = {
   avatar: function avatar(props) {
     return [{
@@ -143,6 +143,8 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _size = _ref$size === void 0 ? "medium" : _ref$size,
     className$1 = _ref.className,
     style = _ref.style,
+    crossOrigin = _ref.crossOrigin,
+    referrerPolicy = _ref.referrerPolicy,
     props = _objectWithoutProperties(_ref, _excluded);
   var theme$1 = hooks.useTheme();
   var group = React.useContext(context.Context);
@@ -151,7 +153,9 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var shape = (_group$shape = group === null || group === void 0 ? void 0 : group.shape) !== null && _group$shape !== void 0 ? _group$shape : _shape;
   var classNames = useClassNames.useClassNames("avatar");
   var loadStatus = relax.useImageLoader({
-    src: src
+    src: src,
+    crossOrigin: crossOrigin,
+    referrerPolicy: referrerPolicy
   });
   var styled = {
     avatar: stylex.default.props(theme.typography.label[size], styles.avatar({
@@ -178,7 +182,9 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     src: src,
     alt: alt,
     className: styled.image.className,
-    style: styled.image.style
+    style: styled.image.style,
+    crossOrigin: crossOrigin,
+    referrerPolicy: referrerPolicy
   })), loadStatus !== "loaded" && (alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase()));
 });
 

package/dist/components/avatar/avatar.d.ts

@@ -3,7 +3,7 @@ import React from "react";
  * @description
  * `Avatar`
  */
-declare const Avatar: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
+declare const Avatar: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & Pick<import("../../types/image").ImageProps, "crossOrigin" | "referrerPolicy"> & {
     src?: string;
     alt?: string;
     size?: "small" | "medium" | "large";

package/dist/components/avatar/avatar.mjs

@@ -10,7 +10,7 @@ import { typography } from '../theme/theme.mjs';
 import { useImageLoader, clsx } from '@aiszlab/relax';
 import Skeleton from '../skeleton/skeleton.mjs';
 
-var _excluded = ["src", "alt", "shape", "size", "className", "style"];
+var _excluded = ["src", "alt", "shape", "size", "className", "style", "crossOrigin", "referrerPolicy"];
 var styles = {
   avatar: function avatar(props) {
     return [{
@@ -141,6 +141,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _size = _ref$size === void 0 ? "medium" : _ref$size,
     className = _ref.className,
     style = _ref.style,
+    crossOrigin = _ref.crossOrigin,
+    referrerPolicy = _ref.referrerPolicy,
     props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var group = useContext(Context);
@@ -149,7 +151,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var shape = (_group$shape = group === null || group === void 0 ? void 0 : group.shape) !== null && _group$shape !== void 0 ? _group$shape : _shape;
   var classNames = useClassNames("avatar");
   var loadStatus = useImageLoader({
-    src: src
+    src: src,
+    crossOrigin: crossOrigin,
+    referrerPolicy: referrerPolicy
   });
   var styled = {
     avatar: _stylex.props(typography.label[size], styles.avatar({
@@ -176,7 +180,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     src: src,
     alt: alt,
     className: styled.image.className,
-    style: styled.image.style
+    style: styled.image.style,
+    crossOrigin: crossOrigin,
+    referrerPolicy: referrerPolicy
   })), loadStatus !== "loaded" && (alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase()));
 });
 

package/dist/components/image/image.cjs

@@ -74,8 +74,8 @@ var Image = function Image(_ref) {
   };
   if (status === "loading") {
     return /*#__PURE__*/React.createElement(skeleton.default, {
-      className: styled.loading.className,
-      style: styled.loading.style
+      className: relax.clsx(className$1, styled.loading.className),
+      style: _objectSpread(_objectSpread({}, styled.loading.style), style)
     });
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, status === "loaded" && (/*#__PURE__*/React.createElement("img", {

package/dist/components/image/image.mjs

@@ -72,8 +72,8 @@ var Image = function Image(_ref) {
   };
   if (status === "loading") {
     return /*#__PURE__*/React.createElement(Skeleton, {
-      className: styled.loading.className,
-      style: styled.loading.style
+      className: clsx(className, styled.loading.className),
+      style: _objectSpread(_objectSpread({}, styled.loading.style), style)
     });
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, status === "loaded" && (/*#__PURE__*/React.createElement("img", {

package/dist/components/upload/upload.cjs

@@ -100,14 +100,14 @@ var Upload = function Upload(_ref) {
     style: styled.input.style,
     multiple: multiple,
     onChange: _onChange
-  }), children), renderItem !== false && (/*#__PURE__*/React.createElement(uploadedList.default, {
+  }), children), /*#__PURE__*/React.createElement(uploadedList.default, {
     ref: uploadedListRef,
     value: value,
     uploader: uploader,
     onError: onError,
     onChange: onChange,
     limit: limit
-  }))));
+  })));
 };
 
 exports.default = Upload;

package/dist/components/upload/upload.mjs

@@ -98,14 +98,14 @@ var Upload = function Upload(_ref) {
     style: styled.input.style,
     multiple: multiple,
     onChange: _onChange
-  }), children), renderItem !== false && (/*#__PURE__*/React.createElement(UploadedList, {
+  }), children), /*#__PURE__*/React.createElement(UploadedList, {
     ref: uploadedListRef,
     value: value,
     uploader: uploader,
     onError: onError,
     onChange: onChange,
     limit: limit
-  }))));
+  })));
 };
 
 export { Upload as default };

package/dist/components/upload/uploaded-list.cjs

@@ -12,6 +12,7 @@ var utils = require('./utils.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var uploadedItem = require('./uploaded-item.cjs');
+var context = require('./context.cjs');
 
 var styles = {
   item: {
@@ -38,6 +39,8 @@ var UploadedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useIdentity2 = _slicedToArray(_useIdentity, 2),
     identity = _useIdentity2[1];
   var classNames = useClassNames.useClassNames("upload");
+  var _useContext = React.useContext(context.Context),
+    renderItem = _useContext.renderItem;
   // convert to map, for performance
   var items = React.useMemo(function () {
     return values.reduce(function (prev, _item) {
@@ -58,11 +61,11 @@ var UploadedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [values]);
   // when loading status changed
   // use this func to set new status & callback
-  var onLoaded = relax.useEvent(function (id, status, _ref2) {
+  var onLoaded = relax.useEvent(function (uploadeds, id, status, _ref2) {
     var url = _ref2.url,
       error = _ref2.error;
-    if (!items.has(id)) return;
-    var _items = new Map(items);
+    if (!uploadeds.has(id)) return;
+    var _items = new Map(uploadeds);
     var _values = Array.from(_items.set(id, _objectSpread(_objectSpread({}, _items.get(id)), {}, {
       status: status,
       url: url,
@@ -75,7 +78,7 @@ var UploadedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return {
       add: function () {
         var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _values, _url;
+          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _items, _values, _url;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -90,40 +93,41 @@ var UploadedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               case 5:
                 // show loading in `add` trigger
                 _key = identity();
-                _values = Array.from(new Map(_isOnlyOne ? [] : items).set(_key, {
+                _items = new Map(_isOnlyOne ? [] : items).set(_key, {
                   key: _key,
                   file: file,
                   status: _hasUploader ? "loading" : "success"
-                }).values());
+                });
+                _values = Array.from(_items.values());
                 setValues(_values);
                 onChange === null || onChange === void 0 || onChange(_values);
                 // when no uploader, use original file
                 if (_hasUploader) {
-                  _context.next = 11;
+                  _context.next = 12;
                   break;
                 }
                 return _context.abrupt("return");
-              case 11:
-                _context.next = 13;
+              case 12:
+                _context.next = 14;
                 return uploader(file)["catch"](function (error) {
                   return new Error(error.message);
                 });
-              case 13:
+              case 14:
                 _url = _context.sent;
                 if (!(_url instanceof Error)) {
-                  _context.next = 18;
+                  _context.next = 19;
                   break;
                 }
-                onLoaded(_key, "error", {
+                onLoaded(_items, _key, "error", {
                   error: _url
                 });
                 onError === null || onError === void 0 || onError(_url);
                 return _context.abrupt("return");
-              case 18:
-                onLoaded(_key, "success", {
+              case 19:
+                onLoaded(_items, _key, "success", {
                   url: _url
                 });
-              case 19:
+              case 20:
               case "end":
                 return _context.stop();
             }
@@ -144,7 +148,8 @@ var UploadedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange === null || onChange === void 0 || onChange(_values);
   });
   // no uploaded file, no render!
-  if (items.size === 0) {
+  // no item render, no render!
+  if (items.size === 0 || !renderItem) {
     return null;
   }
   var styled = {

package/dist/components/upload/uploaded-list.mjs

@@ -2,7 +2,7 @@ import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { forwardRef, useMemo, useImperativeHandle } from 'react';
+import React, { forwardRef, useContext, useMemo, useImperativeHandle } from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useControlledState, useIdentity, useEvent, clsx } from '@aiszlab/relax';
 import { typography } from '../theme/theme.mjs';
@@ -10,6 +10,7 @@ import { isRemoteFile } from './utils.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { UploadClassToken } from '../../utils/class-name.mjs';
 import UploadedItem from './uploaded-item.mjs';
+import { Context } from './context.mjs';
 
 var styles = {
   item: {
@@ -36,6 +37,8 @@ var UploadedList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useIdentity2 = _slicedToArray(_useIdentity, 2),
     identity = _useIdentity2[1];
   var classNames = useClassNames("upload");
+  var _useContext = useContext(Context),
+    renderItem = _useContext.renderItem;
   // convert to map, for performance
   var items = useMemo(function () {
     return values.reduce(function (prev, _item) {
@@ -56,11 +59,11 @@ var UploadedList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [values]);
   // when loading status changed
   // use this func to set new status & callback
-  var onLoaded = useEvent(function (id, status, _ref2) {
+  var onLoaded = useEvent(function (uploadeds, id, status, _ref2) {
     var url = _ref2.url,
       error = _ref2.error;
-    if (!items.has(id)) return;
-    var _items = new Map(items);
+    if (!uploadeds.has(id)) return;
+    var _items = new Map(uploadeds);
     var _values = Array.from(_items.set(id, _objectSpread(_objectSpread({}, _items.get(id)), {}, {
       status: status,
       url: url,
@@ -73,7 +76,7 @@ var UploadedList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return {
       add: function () {
         var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _values, _url;
+          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _items, _values, _url;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -88,40 +91,41 @@ var UploadedList = /*#__PURE__*/forwardRef(function (_ref, ref) {
               case 5:
                 // show loading in `add` trigger
                 _key = identity();
-                _values = Array.from(new Map(_isOnlyOne ? [] : items).set(_key, {
+                _items = new Map(_isOnlyOne ? [] : items).set(_key, {
                   key: _key,
                   file: file,
                   status: _hasUploader ? "loading" : "success"
-                }).values());
+                });
+                _values = Array.from(_items.values());
                 setValues(_values);
                 onChange === null || onChange === void 0 || onChange(_values);
                 // when no uploader, use original file
                 if (_hasUploader) {
-                  _context.next = 11;
+                  _context.next = 12;
                   break;
                 }
                 return _context.abrupt("return");
-              case 11:
-                _context.next = 13;
+              case 12:
+                _context.next = 14;
                 return uploader(file)["catch"](function (error) {
                   return new Error(error.message);
                 });
-              case 13:
+              case 14:
                 _url = _context.sent;
                 if (!(_url instanceof Error)) {
-                  _context.next = 18;
+                  _context.next = 19;
                   break;
                 }
-                onLoaded(_key, "error", {
+                onLoaded(_items, _key, "error", {
                   error: _url
                 });
                 onError === null || onError === void 0 || onError(_url);
                 return _context.abrupt("return");
-              case 18:
-                onLoaded(_key, "success", {
+              case 19:
+                onLoaded(_items, _key, "success", {
                   url: _url
                 });
-              case 19:
+              case 20:
               case "end":
                 return _context.stop();
             }
@@ -142,7 +146,8 @@ var UploadedList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange === null || onChange === void 0 || onChange(_values);
   });
   // no uploaded file, no render!
-  if (items.size === 0) {
+  // no item render, no render!
+  if (items.size === 0 || !renderItem) {
     return null;
   }
   var styled = {

package/dist/types/avatar.d.ts

@@ -1,12 +1,13 @@
 import type { ReactNode, RefAttributes } from "react";
-import { ComponentProps } from "musae/types/element";
+import type { ComponentProps } from "musae/types/element";
+import type { ImageProps } from "./image";
 type Size = "small" | "medium" | "large";
 type Shape = "circular" | "squared";
 /**
  * @description
  * avatar props
  */
-export type AvatarProps = ComponentProps & {
+export type AvatarProps = ComponentProps & Pick<ImageProps, "crossOrigin" | "referrerPolicy"> & {
     /**
      * @description
      * src

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",