musae 0.3.3 → 0.3.6

package/dist/components/image/image.cjs

@@ -1,16 +1,42 @@
 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 preview = require('./preview/preview.cjs');
 var context = require('./preview/context.cjs');
 var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var skeleton = require('../skeleton/skeleton.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var className = require('../../utils/class-name.cjs');
 
+var styles = {
+  size: function size(props) {
+    return [{
+      width: "musaex-17fnjtu",
+      height: "musaex-1jwls1v",
+      $$css: true
+    }, {
+      "--width": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.width),
+      "--height": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.height)
+    }];
+  }
+};
 var Image = function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    _ref$previewable = _ref.previewable,
+    previewable = _ref$previewable === void 0 ? true : _ref$previewable,
+    className$1 = _ref.className,
+    style = _ref.style;
   var _useBoolean = relax.useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
@@ -18,10 +44,12 @@ var Image = function Image(_ref) {
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
   var contextValue = React.useContext(context.default);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Image);
   var status = relax.useImageLoader({
     src: src
   });
   var click = relax.useEvent(function () {
+    if (!previewable) return;
     // if current image is in preview group
     // just use preview group to preview image
     if (contextValue) {
@@ -31,12 +59,31 @@ var Image = function Image(_ref) {
     // not in preview group, render self
     turnOn();
   });
+  var styled = {
+    loading: stylex.default.props(styles.size({
+      width: width,
+      height: height
+    })),
+    image: stylex.default.props(styles.size({
+      width: width,
+      height: height
+    }))
+  };
+  if (status === "loading") {
+    return /*#__PURE__*/React.createElement(skeleton.default, {
+      className: styled.loading.className,
+      style: styled.loading.style
+    });
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, status === "loaded" && (/*#__PURE__*/React.createElement("img", {
+    className: relax.clsx(classNames[className.ImageClassToken.Image], className$1, styled.image.className),
+    style: _objectSpread(_objectSpread({}, styled.image.style), style),
     src: src,
     alt: alt,
     onClick: click,
     width: width,
-    height: height
+    height: height,
+    draggable: false
   })), isOpen && !contextValue && /*#__PURE__*/React.createElement(preview.default, {
     src: src,
     onClose: turnOff,

package/dist/components/image/image.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ImageProps } from "musae/types/image";
-declare const Image: ({ src, alt, width, height }: ImageProps) => React.JSX.Element;
+declare const Image: ({ src, alt, width, height, previewable, className, style }: ImageProps) => React.JSX.Element;
 export default Image;

package/dist/components/image/image.mjs

@@ -1,14 +1,40 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext } from 'react';
 import Preview from './preview/preview.mjs';
 import PreviewGroupContext from './preview/context.mjs';
-import { useBoolean, useImageLoader, useEvent } from '@aiszlab/relax';
+import { useBoolean, useImageLoader, useEvent, clsx } from '@aiszlab/relax';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import Skeleton from '../skeleton/skeleton.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { ImageClassToken } from '../../utils/class-name.mjs';
 
+var styles = {
+  size: function size(props) {
+    return [{
+      width: "musaex-17fnjtu",
+      height: "musaex-1jwls1v",
+      $$css: true
+    }, {
+      "--width": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.width),
+      "--height": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.height)
+    }];
+  }
+};
 var Image = function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    _ref$previewable = _ref.previewable,
+    previewable = _ref$previewable === void 0 ? true : _ref$previewable,
+    className = _ref.className,
+    style = _ref.style;
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
@@ -16,10 +42,12 @@ var Image = function Image(_ref) {
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
   var contextValue = useContext(PreviewGroupContext);
+  var classNames = useClassNames(ComponentToken.Image);
   var status = useImageLoader({
     src: src
   });
   var click = useEvent(function () {
+    if (!previewable) return;
     // if current image is in preview group
     // just use preview group to preview image
     if (contextValue) {
@@ -29,12 +57,31 @@ var Image = function Image(_ref) {
     // not in preview group, render self
     turnOn();
   });
+  var styled = {
+    loading: _stylex.props(styles.size({
+      width: width,
+      height: height
+    })),
+    image: _stylex.props(styles.size({
+      width: width,
+      height: height
+    }))
+  };
+  if (status === "loading") {
+    return /*#__PURE__*/React.createElement(Skeleton, {
+      className: styled.loading.className,
+      style: styled.loading.style
+    });
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, status === "loaded" && (/*#__PURE__*/React.createElement("img", {
+    className: clsx(classNames[ImageClassToken.Image], className, styled.image.className),
+    style: _objectSpread(_objectSpread({}, styled.image.style), style),
     src: src,
     alt: alt,
     onClick: click,
     width: width,
-    height: height
+    height: height,
+    draggable: false
   })), isOpen && !contextValue && /*#__PURE__*/React.createElement(Preview, {
     src: src,
     onClose: turnOff,

package/dist/components/image/index.d.ts

@@ -1,4 +1,4 @@
-declare const Image: (({ src, alt, width, height }: import("musae/types/image").ImageProps) => import("react").JSX.Element) & {
+declare const Image: (({ src, alt, width, height, previewable, className, style }: import("musae/types/image").ImageProps) => import("react").JSX.Element) & {
     Group: ({ children, items }: import("musae/types/image").PreviewGroupProps) => import("react").JSX.Element;
 };
 export { Image };

package/dist/components/image/preview/preview.cjs

@@ -17,6 +17,7 @@ var styles = {
       transitionDuration: null,
       transitionProperty: null,
       transitionTimingFunction: null,
+      pointerEvents: "musaex-67bb7w",
       $$css: true
     }, {
       "--transform": "translate3d(0px, 0px, 0px) scale3d(".concat(props.scale * props.flipX, ", ").concat(props.scale * props.flipY, ", 1) rotate(").concat(props.rotate, "deg)") != null ? "translate3d(0px, 0px, 0px) scale3d(".concat(props.scale * props.flipX, ", ").concat(props.scale * props.flipY, ", 1) rotate(").concat(props.rotate, "deg)") : "initial"
@@ -101,19 +102,23 @@ var Preview = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     open: true,
     onClose: onClose,
     footer: false,
-    closable: ["esc"],
+    closable: ["esc", "overlay"],
     styles: {
       panel: {
         backgroundColor: "transparent",
         margin: 0,
         width: "100%",
         height: "100%",
-        maxHeight: "100%"
+        maxWidth: "100%",
+        maxHeight: "100%",
+        pointerEvents: "none"
       },
       body: {
         display: "flex",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        overflow: "hidden",
+        pointerEvents: "none"
       }
     }
   }, /*#__PURE__*/React.createElement("img", {

package/dist/components/image/preview/preview.mjs

@@ -15,6 +15,7 @@ var styles = {
       transitionDuration: null,
       transitionProperty: null,
       transitionTimingFunction: null,
+      pointerEvents: "musaex-67bb7w",
       $$css: true
     }, {
       "--transform": "translate3d(0px, 0px, 0px) scale3d(".concat(props.scale * props.flipX, ", ").concat(props.scale * props.flipY, ", 1) rotate(").concat(props.rotate, "deg)") != null ? "translate3d(0px, 0px, 0px) scale3d(".concat(props.scale * props.flipX, ", ").concat(props.scale * props.flipY, ", 1) rotate(").concat(props.rotate, "deg)") : "initial"
@@ -99,19 +100,23 @@ var Preview = /*#__PURE__*/forwardRef(function (_ref, ref) {
     open: true,
     onClose: onClose,
     footer: false,
-    closable: ["esc"],
+    closable: ["esc", "overlay"],
     styles: {
       panel: {
         backgroundColor: "transparent",
         margin: 0,
         width: "100%",
         height: "100%",
-        maxHeight: "100%"
+        maxWidth: "100%",
+        maxHeight: "100%",
+        pointerEvents: "none"
       },
       body: {
         display: "flex",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        overflow: "hidden",
+        pointerEvents: "none"
       }
     }
   }, /*#__PURE__*/React.createElement("img", {

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

@@ -1,6 +1,5 @@
 import React, { type ReactNode } from "react";
-import type { ContextValue, MenuProps, Mode } from "musae/types/menu";
-import type { Size } from "musae/types/element";
+import type { ContextValue, MenuProps, Mode, Size } from "musae/types/menu";
 /**
  * @description
  * use menu context

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

@@ -5,13 +5,12 @@ import React from "react";
  * @description
  * menu item
  */
-declare const Item: React.ForwardRefExoticComponent<Omit<import("musae/types/menu").MenuItem, "children" | "key"> & {
-    level: number;
-} & import("../../types/element").ComponentProps & {
+declare const Item: React.ForwardRefExoticComponent<Omit<import("musae/types/menu").MenuItem, "children" | "key"> & import("../../types/element").ComponentProps & {
     value: React.Key;
     suffix?: React.ReactNode;
     onClick?: import("musae/types/menu").ContextValue["click"];
     children?: React.ReactNode;
     mode: import("musae/types/menu").Mode;
+    level: number;
 } & React.RefAttributes<HTMLLIElement>>;
 export default Item;

package/dist/components/pagination/pagination.cjs

@@ -55,7 +55,7 @@ var Pagination = function Pagination(_ref) {
     }
   };
   var sizeOptions = React.useMemo(function () {
-    return Array.from(new Set(pageSizes)).map(function (size) {
+    return relax.unique(pageSizes).map(function (size) {
       return {
         value: size,
         label: relax.toFunction(locale.size)(size)

package/dist/components/pagination/pagination.mjs

@@ -7,7 +7,7 @@ import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { PaginationClassToken } from '../../utils/class-name.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import { useLocale } from '../../locale/use-locale.mjs';
-import { toFunction, clsx } from '@aiszlab/relax';
+import { unique, toFunction, clsx } from '@aiszlab/relax';
 
 var Pagination = function Pagination(_ref) {
   var _ref$total = _ref.total,
@@ -53,7 +53,7 @@ var Pagination = function Pagination(_ref) {
     }
   };
   var sizeOptions = useMemo(function () {
-    return Array.from(new Set(pageSizes)).map(function (size) {
+    return unique(pageSizes).map(function (size) {
       return {
         value: size,
         label: toFunction(locale.size)(size)

package/dist/components/popover/popover.cjs

@@ -96,7 +96,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         return relax.chain(_children.props.onFocus, turnOn)(event);
       },
       onBlur: function onBlur(event) {
-        return relax.chain(_children.props.onBlur)(event);
+        return relax.chain(_children.props.onBlur, disappear)(event);
       }
     }),
     _useFocus2 = _slicedToArray(_useFocus, 2),

package/dist/components/popover/popover.mjs

@@ -94,7 +94,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         return chain(_children.props.onFocus, turnOn)(event);
       },
       onBlur: function onBlur(event) {
-        return chain(_children.props.onBlur)(event);
+        return chain(_children.props.onBlur, disappear)(event);
       }
     }),
     _useFocus2 = _slicedToArray(_useFocus, 2),

package/dist/components/popper/dropdown.cjs

@@ -15,6 +15,25 @@ var dom = require('@aiszlab/relax/dom');
 
 var _excluded = ["open", "children", "placement", "style", "className", "onExit", "onExited", "onEntered", "trigger", "offset", "overlay", "arrow", "disappearable"];
 var styles = {
+  portal: {
+    "default": {
+      position: "musaex-ixxii4",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      pointerEvents: "musaex-47corl",
+      inset: "musaex-10a8y8t",
+      insetInline: null,
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      left: null,
+      right: null,
+      insetBlock: null,
+      top: null,
+      bottom: null,
+      $$css: true
+    }
+  },
   dropdown: {
     "default": function _default(props) {
       return [{
@@ -35,7 +54,12 @@ var styles = {
         borderTopRightRadius: null,
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
-        willChange: "musaex-19wnzia",
+        pointerEvents: "musaex-67bb7w",
+        willChange: "musaex-1enemt",
+        transitionProperty: "musaex-qzan4j",
+        transitionDuration: "musaex-1g2r6go",
+        display: "musaex-1s85apg",
+        opacity: "musaex-g01cxk",
         $$css: true
       }, {
         "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
@@ -72,7 +96,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onExited = _ref.onExited,
     onEntered = _ref.onEntered,
     trigger = _ref.trigger,
-    _offset = _ref.offset,
+    offset = _ref.offset,
     _ref$overlay = _ref.overlay,
     overlay = _ref$overlay === void 0 ? false : _ref$overlay,
     _ref$arrow = _ref.arrow,
@@ -84,26 +108,23 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var theme = hooks.useTheme();
   var _useFloating = hooks$1.useFloating({
       arrowable: arrowable,
-      offset: _offset,
+      offset: offset,
       placement: placement,
       open: open,
-      trigger: trigger
-    }),
-    floatableRef = _useFloating.floatableRef,
-    arrowRef = _useFloating.arrowRef;
-  var _useAnimation = hooks$1.useAnimation({
-      open: open,
-      disappearable: disappearable,
+      trigger: trigger,
       onEntered: onEntered,
       onExit: onExit,
-      onExited: onExited
+      onExited: onExited,
+      disappearable: disappearable
     }),
-    disappear = _useAnimation.disappear,
-    animatableRef = _useAnimation.animatableRef;
-  var refs = relax.useRefs(floatableRef, animatableRef);
+    floatableRef = _useFloating.floatableRef,
+    arrowRef = _useFloating.arrowRef,
+    _disappear = _useFloating.disappear;
   React.useImperativeHandle(ref, function () {
     return {
-      disappear: disappear,
+      disappear: function disappear() {
+        return _disappear(true);
+      },
       contains: function contains(node) {
         return dom.contains(floatableRef.current, node);
       }
@@ -115,10 +136,14 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }), overlay && styles.dropdown.overlay),
     arrow: stylex.default.props(styles.arrow["default"]({
       backgroundColor: theme.colors[colors.ColorToken.SurfaceContainer]
-    }))
+    })),
+    portal: stylex.default.props(styles.portal["default"])
   };
-  return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
-    ref: refs
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.portal.className,
+    style: styled.portal.style
+  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
+    ref: floatableRef
   }, props), {}, {
     className: relax.clsx(classNames[className.PopperClassToken.Dropdown], className$1, styled.dropdown.className),
     style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)
@@ -126,7 +151,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: arrowRef,
     className: styled.arrow.className,
     style: styled.arrow.style
-  })));
+  }))));
 });
 
 exports.default = Dropdown;

package/dist/components/popper/dropdown.mjs

@@ -4,8 +4,8 @@ import React, { forwardRef, useImperativeHandle } from 'react';
 import { PopperClassToken } from '../../utils/class-name.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { useRefs, clsx } from '@aiszlab/relax';
-import { useFloating, useAnimation } from './hooks.mjs';
+import { clsx } from '@aiszlab/relax';
+import { useFloating } from './hooks.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { ColorToken } from '../../utils/colors.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
@@ -13,6 +13,25 @@ import { contains } from '@aiszlab/relax/dom';
 
 var _excluded = ["open", "children", "placement", "style", "className", "onExit", "onExited", "onEntered", "trigger", "offset", "overlay", "arrow", "disappearable"];
 var styles = {
+  portal: {
+    "default": {
+      position: "musaex-ixxii4",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      pointerEvents: "musaex-47corl",
+      inset: "musaex-10a8y8t",
+      insetInline: null,
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      left: null,
+      right: null,
+      insetBlock: null,
+      top: null,
+      bottom: null,
+      $$css: true
+    }
+  },
   dropdown: {
     "default": function _default(props) {
       return [{
@@ -33,7 +52,12 @@ var styles = {
         borderTopRightRadius: null,
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
-        willChange: "musaex-19wnzia",
+        pointerEvents: "musaex-67bb7w",
+        willChange: "musaex-1enemt",
+        transitionProperty: "musaex-qzan4j",
+        transitionDuration: "musaex-1g2r6go",
+        display: "musaex-1s85apg",
+        opacity: "musaex-g01cxk",
         $$css: true
       }, {
         "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
@@ -70,7 +94,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onExited = _ref.onExited,
     onEntered = _ref.onEntered,
     trigger = _ref.trigger,
-    _offset = _ref.offset,
+    offset = _ref.offset,
     _ref$overlay = _ref.overlay,
     overlay = _ref$overlay === void 0 ? false : _ref$overlay,
     _ref$arrow = _ref.arrow,
@@ -82,26 +106,23 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var theme = useTheme();
   var _useFloating = useFloating({
       arrowable: arrowable,
-      offset: _offset,
+      offset: offset,
       placement: placement,
       open: open,
-      trigger: trigger
-    }),
-    floatableRef = _useFloating.floatableRef,
-    arrowRef = _useFloating.arrowRef;
-  var _useAnimation = useAnimation({
-      open: open,
-      disappearable: disappearable,
+      trigger: trigger,
       onEntered: onEntered,
       onExit: onExit,
-      onExited: onExited
+      onExited: onExited,
+      disappearable: disappearable
     }),
-    disappear = _useAnimation.disappear,
-    animatableRef = _useAnimation.animatableRef;
-  var refs = useRefs(floatableRef, animatableRef);
+    floatableRef = _useFloating.floatableRef,
+    arrowRef = _useFloating.arrowRef,
+    _disappear = _useFloating.disappear;
   useImperativeHandle(ref, function () {
     return {
-      disappear: disappear,
+      disappear: function disappear() {
+        return _disappear(true);
+      },
       contains: function contains$1(node) {
         return contains(floatableRef.current, node);
       }
@@ -113,10 +134,14 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }), overlay && styles.dropdown.overlay),
     arrow: _stylex.props(styles.arrow["default"]({
       backgroundColor: theme.colors[ColorToken.SurfaceContainer]
-    }))
+    })),
+    portal: _stylex.props(styles.portal["default"])
   };
-  return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
-    ref: refs
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.portal.className,
+    style: styled.portal.style
+  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
+    ref: floatableRef
   }, props), {}, {
     className: clsx(classNames[PopperClassToken.Dropdown], className, styled.dropdown.className),
     style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)
@@ -124,7 +149,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: arrowRef,
     className: styled.arrow.className,
     style: styled.arrow.style
-  })));
+  }))));
 });
 
 export { Dropdown as default };