musae 0.3.3 → 0.3.5

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 };

package/dist/components/popper/hooks.cjs

@@ -28,132 +28,125 @@ var useOffsets = function useOffsets(_ref) {
 };
 /**
  * @description
- * use animation
+ * floating position
  */
-var useAnimation = function useAnimation(_ref2) {
+var useFloating = function useFloating(_ref2) {
   var open = _ref2.open,
-    disappearable = _ref2.disappearable,
+    _trigger = _ref2.trigger,
+    placement = _ref2.placement,
+    arrowable = _ref2.arrowable,
+    _offset = _ref2.offset,
     onEntered = _ref2.onEntered,
     onExit = _ref2.onExit,
-    onExited = _ref2.onExited;
+    onExited = _ref2.onExited,
+    disappearable = _ref2.disappearable;
   var _useAnimate = framerMotion.useAnimate(),
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
-    animatableRef = _useAnimate2[0],
+    floatableRef = _useAnimate2[0],
     animate = _useAnimate2[1];
+  var arrowRef = React.useRef(null);
+  var _useContainer = useContainer.useContainer({
+      container: _trigger,
+      useBody: false
+    }, [open]),
+    trigger = _useContainer.container;
+  var _isOpen = React.useRef(false);
+  // appear animation
+  // prevent open again when opened
+  // first remove `display: none` style
+  // then animate
   var appear = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          animatableRef.current.style.display = "";
-          _context.next = 3;
-          return animate(animatableRef.current, {
-            opacity: 1,
-            transform: "scale(1, 1)"
+          if (!_isOpen.current) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          _isOpen.current = true;
+          floatableRef.current.style.display = "unset";
+          _context.next = 6;
+          return animate(floatableRef.current, {
+            opacity: 1
           }, {
             duration: 0.2
           });
-        case 3:
-          _context.next = 5;
+        case 6:
+          _context.next = 8;
           return onEntered === null || onEntered === void 0 ? void 0 : onEntered();
-        case 5:
+        case 8:
         case "end":
           return _context.stop();
       }
     }, _callee);
   })));
+  // disappear animation
+  // prevent disappear again when disappeared
+  // when using force disappear, it will be forced to disappear
   var disappear = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var force,
+      _args2 = arguments;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _context2.next = 2;
-          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(animatableRef.current, {
-            opacity: 0,
-            transform: "scale(0, 0)"
+          force = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : false;
+          if (_isOpen.current) {
+            _context2.next = 3;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 3:
+          if (!(!force && !disappearable)) {
+            _context2.next = 5;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 5:
+          _isOpen.current = false;
+          _context2.next = 8;
+          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(floatableRef.current, {
+            opacity: 0
           }, {
             duration: 0.2
           }).then(function () {
-            if (!animatableRef.current) return;
-            animatableRef.current.style.display = "none";
+            floatableRef.current.style.display = "none";
           })]);
-        case 2:
-          _context2.next = 4;
+        case 8:
+          _context2.next = 10;
           return onExited === null || onExited === void 0 ? void 0 : onExited();
-        case 4:
+        case 10:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   })));
-  var _disappear = React.useCallback(function () {
-    if (!disappearable) return;
-    disappear();
-  }, [disappear, disappearable]);
-  React.useLayoutEffect(function () {
-    if (open) {
-      appear();
-      return;
-    }
-    _disappear();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-  return {
-    animatableRef: animatableRef,
-    disappear: disappear
-  };
-};
-/**
- * @description
- * floating position
- */
-var useFloating = function useFloating(_ref5) {
-  var open = _ref5.open,
-    _trigger = _ref5.trigger,
-    placement = _ref5.placement,
-    arrowable = _ref5.arrowable,
-    _offset = _ref5.offset;
-  var floatableRef = React.useRef(null);
-  var _useContainer = useContainer.useContainer({
-      container: _trigger,
-      useBody: false
-    }, [open]),
-    trigger = _useContainer.container;
-  var arrowRef = React.useRef(null);
   // memorized offsets
   var offsets = useOffsets({
     offset: _offset,
     arrowable: arrowable
   });
-  // auto update: calc trigger dom to get position
-  // if trigger changed, re-relate
-  React.useLayoutEffect(function () {
-    var floatable = floatableRef.current;
+  // position listener
+  var position = relax.useEvent(function () {
     if (!trigger) return;
-    if (!floatable) return;
-    var cleanup = dom.autoUpdate(trigger, floatable, function () {
-      dom.computePosition(trigger, floatable, {
+    var cleanup = dom.autoUpdate(trigger, floatableRef.current, function () {
+      dom.computePosition(trigger, floatableRef.current, {
         placement: placement,
-        middleware: [dom.flip(), dom.offset(offsets), arrowable && !!arrowRef.current && dom.arrow({
+        middleware: [dom.flip(), dom.shift(), dom.offset(offsets), arrowable && !!arrowRef.current && dom.arrow({
           element: arrowRef.current,
           padding: 16
-        }), dom.size({
-          apply: function apply(_ref6) {
-            var availableWidth = _ref6.availableWidth,
-              availableHeight = _ref6.availableHeight,
-              floating = _ref6.elements.floating;
-            floating.style.maxWidth = "".concat(availableWidth, "px");
-            floating.style.maxHeight = "".concat(availableHeight, "px");
-          }
         })]
-      }).then(function (_ref7) {
-        var x = _ref7.x,
-          y = _ref7.y,
-          middlewareData = _ref7.middlewareData,
-          _placement = _ref7.placement;
+      }).then(function (_ref5) {
+        var x = _ref5.x,
+          y = _ref5.y,
+          middlewareData = _ref5.middlewareData,
+          _placement = _ref5.placement;
         var _placement$split = _placement.split("-"),
           _placement$split2 = _slicedToArray(_placement$split, 1),
           side = _placement$split2[0];
         // set float element styles
-        floatable.style.translate = "".concat(x, "px ").concat(y, "px");
+        floatableRef.current.style.translate = "".concat(x, "px ").concat(y, "px");
         // set arrow styles
         if (middlewareData.arrow && !!arrowRef.current) {
           var _middlewareData$arrow, _middlewareData$arrow2;
@@ -163,25 +156,31 @@ var useFloating = function useFloating(_ref5) {
           side === "top" && (arrowRef.current.style.insetBlockEnd = offsetY);
           side === "bottom" && (arrowRef.current.style.insetBlockStart = offsetY);
         }
+        // use appear animation
+        appear();
       })["catch"](function () {
         return null;
-      }).then(function () {
-        requestAnimationFrame(function () {
-          floatable.style.transitionProperty = "translate";
-          floatable.style.transitionDuration = "0.1s";
-        });
       });
     });
-    return function () {
-      cleanup();
-    };
-  }, [placement, trigger, offsets, arrowable]);
+    return cleanup;
+  });
+  // auto update: calc trigger dom to get position
+  // if trigger changed, re-relate
+  React.useEffect(function () {
+    if (open) {
+      var cleanup = position();
+      return function () {
+        cleanup === null || cleanup === void 0 || cleanup();
+      };
+    }
+    disappear();
+  }, [disappear, open, position]);
   return {
     floatableRef: floatableRef,
-    arrowRef: arrowRef
+    arrowRef: arrowRef,
+    disappear: disappear
   };
 };
 
-exports.useAnimation = useAnimation;
 exports.useFloating = useFloating;
 exports.useOffsets = useOffsets;

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

@@ -11,28 +11,22 @@ export declare const useOffsets: ({ offset, arrowable, }: {
     crossAxis?: number;
     alignmentAxis?: number | null;
 };
-/**
- * @description
- * use animation
- */
-export declare const useAnimation: ({ open, disappearable, onEntered, onExit, onExited, }: {
-    open: boolean;
-    disappearable: boolean;
-} & Pick<PopperProps, "onEntered" | "onExit" | "onExited">) => {
-    animatableRef: import("framer-motion").AnimationScope<HTMLDivElement>;
-    disappear: () => Promise<void>;
-};
 /**
  * @description
  * floating position
  */
-export declare const useFloating: ({ open, trigger: _trigger, placement, arrowable, offset: _offset, }: {
+export declare const useFloating: ({ open, trigger: _trigger, placement, arrowable, offset: _offset, onEntered, onExit, onExited, disappearable, }: {
     open: boolean;
     trigger: DropdownProps["trigger"];
     placement: DropdownProps["placement"];
     arrowable: boolean;
     offset: DropdownProps["offset"];
+    onEntered?: () => Promise<void> | void;
+    onExit?: () => Promise<void> | void;
+    onExited?: () => Promise<void> | void;
+    disappearable: boolean;
 }) => {
-    floatableRef: import("react").RefObject<HTMLDivElement>;
+    floatableRef: import("framer-motion").AnimationScope<HTMLDivElement>;
     arrowRef: import("react").RefObject<HTMLDivElement>;
+    disappear: (force?: boolean) => Promise<void>;
 };