musae 1.0.27-beta.30 → 1.0.27-beta.32

package/dist/components/bottom-sheet/__test__/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/bottom-sheet/bottom-sheet.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var portal = require('../portal/portal.cjs');
+var sheet = require('./sheet.cjs');
+
+var _excluded = ["open", "height", "closable"];
+var BottomSheet = function BottomSheet(_ref) {
+  var open = _ref.open,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "50vh" : _ref$height,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Keep Portal mounted during exit animation
+  var _useBoolean = relax.useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isVisible = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    turnOn = _useBoolean2$.turnOn,
+    turnOff = _useBoolean2$.turnOff;
+  React.useEffect(function () {
+    if (open) {
+      turnOn();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return /*#__PURE__*/React.createElement(portal.default, {
+    open: open || isVisible,
+    lockable: true
+  }, /*#__PURE__*/React.createElement(sheet.default, _objectSpread(_objectSpread({}, props), {}, {
+    open: open,
+    height: height,
+    closable: closable,
+    onClosed: turnOff
+  })));
+};
+
+exports.default = BottomSheet;

package/dist/components/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BottomSheetProps } from "../../types/bottom-sheet";
+declare const BottomSheet: ({ open, height, closable, ...props }: BottomSheetProps) => React.JSX.Element;
+export default BottomSheet;

package/dist/components/bottom-sheet/bottom-sheet.mjs

@@ -0,0 +1,41 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useEffect } from 'react';
+import { useBoolean } from '@aiszlab/relax';
+import Portal from '../portal/portal.mjs';
+import Sheet from './sheet.mjs';
+
+var _excluded = ["open", "height", "closable"];
+var BottomSheet = function BottomSheet(_ref) {
+  var open = _ref.open,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "50vh" : _ref$height,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Keep Portal mounted during exit animation
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isVisible = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    turnOn = _useBoolean2$.turnOn,
+    turnOff = _useBoolean2$.turnOff;
+  useEffect(function () {
+    if (open) {
+      turnOn();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return /*#__PURE__*/React.createElement(Portal, {
+    open: open || isVisible,
+    lockable: true
+  }, /*#__PURE__*/React.createElement(Sheet, _objectSpread(_objectSpread({}, props), {}, {
+    open: open,
+    height: height,
+    closable: closable,
+    onClosed: turnOff
+  })));
+};
+
+export { BottomSheet as default };

package/dist/components/bottom-sheet/context.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+/**
+ * @description
+ * class names for BottomSheet
+ */
+var CLASS_NAMES = {
+  sheet: "bottom-sheet",
+  overlay: "bottom-sheet__overlay",
+  panel: "bottom-sheet__panel",
+  handle: "bottom-sheet__drag-handle",
+  body: "bottom-sheet__body"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

package/dist/components/bottom-sheet/context.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description
+ * class names for BottomSheet
+ */
+export declare const CLASS_NAMES: {
+    readonly sheet: "bottom-sheet";
+    readonly overlay: "bottom-sheet__overlay";
+    readonly panel: "bottom-sheet__panel";
+    readonly handle: "bottom-sheet__drag-handle";
+    readonly body: "bottom-sheet__body";
+};

package/dist/components/bottom-sheet/context.mjs

@@ -0,0 +1,13 @@
+/**
+ * @description
+ * class names for BottomSheet
+ */
+var CLASS_NAMES = {
+  sheet: "bottom-sheet",
+  overlay: "bottom-sheet__overlay",
+  panel: "bottom-sheet__panel",
+  handle: "bottom-sheet__drag-handle",
+  body: "bottom-sheet__body"
+};
+
+export { CLASS_NAMES };

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+import BottomSheet from "./bottom-sheet";
+export { BottomSheet };

package/dist/components/bottom-sheet/sheet.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _regenerator = require('@babel/runtime/helpers/regenerator');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var React = require('react');
+var react = require('motion/react');
+var className = require('@aiszlab/relax/class-name');
+var relax = require('@aiszlab/relax');
+var dom = require('@aiszlab/relax/dom');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var useClosable = require('../../hooks/use-closable.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var context = require('./context.cjs');
+
+var ANIMATION_OPTIONS = {
+  enter: {
+    duration: 0.3
+  },
+  exit: {
+    duration: 0.2
+  }
+};
+var Sheet = function Sheet(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    onClosed = _ref.onClosed,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "50vh" : _ref$height,
+    closable = _ref.closable,
+    className$1 = _ref.className,
+    children = _ref.children;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var ref = React.useRef(null);
+  var panelRef = React.useRef(null);
+  var overlayRef = React.useRef(null);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["surface-dim", "surface-container", "on-surface-variant"]);
+  var _useClosable = useClosable.useClosable({
+      closable: closable,
+      onClose: onClose
+    }),
+    onOverlayClick = _useClosable.onOverlayClick,
+    onKeyDown = _useClosable.onKeyDown;
+  // Focus the sheet when open to receive keyboard events
+  React.useEffect(function () {
+    var _ref$current;
+    if (!open) return;
+    if (dom.contains(ref.current, document.activeElement)) return;
+    (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+  }, [open]);
+  relax.useAsyncEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (ref.current) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          if (!open) {
+            _context.n = 3;
+            break;
+          }
+          ref.current.style.display = "block";
+          _context.n = 2;
+          return Promise.all([panelRef.current && react.animate(panelRef.current, {
+            transform: "translateY(0)"
+          }, ANIMATION_OPTIONS.enter), overlayRef.current && react.animate(overlayRef.current, {
+            opacity: tokens_stylex.OPACITY.heavier
+          }, ANIMATION_OPTIONS.enter)]);
+        case 2:
+          return _context.a(2);
+        case 3:
+          _context.n = 4;
+          return Promise.all([panelRef.current && react.animate(panelRef.current, {
+            transform: "translateY(100%)"
+          }, ANIMATION_OPTIONS.exit), overlayRef.current && react.animate(overlayRef.current, {
+            opacity: 0
+          }, ANIMATION_OPTIONS.exit)]);
+        case 4:
+          ref.current.style.display = "none";
+          onClosed();
+        case 5:
+          return _context.a(2);
+      }
+    }, _callee);
+  })), [open]);
+  var styled = {
+    popup: {
+      className: "musaex-ixxii4 musaex-10a8y8t musaex-47corl musaex-pje0qt"
+    },
+    overlay: {
+      className: "musaex-10l6tqk musaex-10a8y8t musaex-67bb7w musaex-g01cxk musaex-11we2rp"
+    },
+    panel: {
+      className: "musaex-10l6tqk musaex-1ey2m1c musaex-u96u03 musaex-3m8u43 musaex-67bb7w musaex-17o6occ musaex-zbxit7 musaex-1ei9pc5 musaex-78zum5 musaex-dt5ytf musaex-1bwycvy musaex-b3r6kr musaex-1weeur4"
+    },
+    handle: {
+      className: "musaex-1po6ib musaex-rntz3j musaex-1xa9b2s musaex-9ip8r5 musaex-1eodh35 musaex-19i5tse musaex-vueqy4 musaex-2lah0s"
+    },
+    body: {
+      className: "musaex-98rzlu musaex-ysyzu8 musaex-1y9dh0z"
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    tabIndex: -1,
+    className: className.stringify(classNames.sheet, className$1, styled.popup.className),
+    style: _objectSpread(_objectSpread({}, styled.popup.style), {}, {
+      display: "none"
+    }),
+    onKeyDown: onKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: overlayRef,
+    className: className.stringify(classNames.overlay, styled.overlay.className),
+    style: styled.overlay.style,
+    onClick: onOverlayClick
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: panelRef,
+    className: className.stringify(classNames.panel, styled.panel.className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.panel.style), themeColorVars), {}, {
+      height: typeof height === "number" ? "".concat(height, "px") : height
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.handle, styled.handle.className),
+    style: styled.handle.style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.body, styled.body.className),
+    style: styled.body.style
+  }, children)));
+};
+
+exports.default = Sheet;

package/dist/components/bottom-sheet/sheet.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { BottomSheetProps } from "../../types/bottom-sheet";
+type SheetProps = Required<Pick<BottomSheetProps, "height" | "closable">> & Omit<BottomSheetProps, "height" | "closable"> & {
+    /** Called after exit animation completes, signals Portal to unmount */
+    onClosed: VoidFunction;
+};
+declare const Sheet: ({ open, onClose, onClosed, height, closable, className, children, }: SheetProps) => React.JSX.Element;
+export default Sheet;

package/dist/components/bottom-sheet/sheet.mjs

@@ -0,0 +1,133 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _regenerator from '@babel/runtime/helpers/regenerator';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import React, { useRef, useEffect } from 'react';
+import { animate } from 'motion/react';
+import { stringify } from '@aiszlab/relax/class-name';
+import { useAsyncEffect } from '@aiszlab/relax';
+import { contains } from '@aiszlab/relax/dom';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { useClosable } from '../../hooks/use-closable.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import { OPACITY } from '../theme/tokens.stylex.mjs';
+import { CLASS_NAMES } from './context.mjs';
+
+var ANIMATION_OPTIONS = {
+  enter: {
+    duration: 0.3
+  },
+  exit: {
+    duration: 0.2
+  }
+};
+var Sheet = function Sheet(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    onClosed = _ref.onClosed,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "50vh" : _ref$height,
+    closable = _ref.closable,
+    className = _ref.className,
+    children = _ref.children;
+  var classNames = useClassNames(CLASS_NAMES);
+  var ref = useRef(null);
+  var panelRef = useRef(null);
+  var overlayRef = useRef(null);
+  var themeColorVars = useThemeColorVars(["surface-dim", "surface-container", "on-surface-variant"]);
+  var _useClosable = useClosable({
+      closable: closable,
+      onClose: onClose
+    }),
+    onOverlayClick = _useClosable.onOverlayClick,
+    onKeyDown = _useClosable.onKeyDown;
+  // Focus the sheet when open to receive keyboard events
+  useEffect(function () {
+    var _ref$current;
+    if (!open) return;
+    if (contains(ref.current, document.activeElement)) return;
+    (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+  }, [open]);
+  useAsyncEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (ref.current) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          if (!open) {
+            _context.n = 3;
+            break;
+          }
+          ref.current.style.display = "block";
+          _context.n = 2;
+          return Promise.all([panelRef.current && animate(panelRef.current, {
+            transform: "translateY(0)"
+          }, ANIMATION_OPTIONS.enter), overlayRef.current && animate(overlayRef.current, {
+            opacity: OPACITY.heavier
+          }, ANIMATION_OPTIONS.enter)]);
+        case 2:
+          return _context.a(2);
+        case 3:
+          _context.n = 4;
+          return Promise.all([panelRef.current && animate(panelRef.current, {
+            transform: "translateY(100%)"
+          }, ANIMATION_OPTIONS.exit), overlayRef.current && animate(overlayRef.current, {
+            opacity: 0
+          }, ANIMATION_OPTIONS.exit)]);
+        case 4:
+          ref.current.style.display = "none";
+          onClosed();
+        case 5:
+          return _context.a(2);
+      }
+    }, _callee);
+  })), [open]);
+  var styled = {
+    popup: {
+      className: "musaex-ixxii4 musaex-10a8y8t musaex-47corl musaex-pje0qt"
+    },
+    overlay: {
+      className: "musaex-10l6tqk musaex-10a8y8t musaex-67bb7w musaex-g01cxk musaex-11we2rp"
+    },
+    panel: {
+      className: "musaex-10l6tqk musaex-1ey2m1c musaex-u96u03 musaex-3m8u43 musaex-67bb7w musaex-17o6occ musaex-zbxit7 musaex-1ei9pc5 musaex-78zum5 musaex-dt5ytf musaex-1bwycvy musaex-b3r6kr musaex-1weeur4"
+    },
+    handle: {
+      className: "musaex-1po6ib musaex-rntz3j musaex-1xa9b2s musaex-9ip8r5 musaex-1eodh35 musaex-19i5tse musaex-vueqy4 musaex-2lah0s"
+    },
+    body: {
+      className: "musaex-98rzlu musaex-ysyzu8 musaex-1y9dh0z"
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    tabIndex: -1,
+    className: stringify(classNames.sheet, className, styled.popup.className),
+    style: _objectSpread(_objectSpread({}, styled.popup.style), {}, {
+      display: "none"
+    }),
+    onKeyDown: onKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: overlayRef,
+    className: stringify(classNames.overlay, styled.overlay.className),
+    style: styled.overlay.style,
+    onClick: onOverlayClick
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: panelRef,
+    className: stringify(classNames.panel, styled.panel.className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.panel.style), themeColorVars), {}, {
+      height: typeof height === "number" ? "".concat(height, "px") : height
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.handle, styled.handle.className),
+    style: styled.handle.style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.body, styled.body.className),
+    style: styled.body.style
+  }, children)));
+};
+
+export { Sheet as default };

package/dist/components/image/image.cjs

@@ -91,7 +91,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }[!!!isHovered << 1 | !!(actions.size === 1 && actions.has("preview")) << 0],
     img: {
-      className: "musaex-92755x musaex-15q9lfd musaex-l1xv1r"
+      className: "musaex-92755x musaex-qg7gut musaex-l1xv1r"
     }
   };
   React.useImperativeHandle(ref, function () {

package/dist/components/image/image.mjs

@@ -87,7 +87,7 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }[!!!isHovered << 1 | !!(actions.size === 1 && actions.has("preview")) << 0],
     img: {
-      className: "musaex-92755x musaex-15q9lfd musaex-l1xv1r"
+      className: "musaex-92755x musaex-qg7gut musaex-l1xv1r"
     }
   };
   useImperativeHandle(ref, function () {

package/dist/components/theme/tokens.stylex.cjs

@@ -14,6 +14,7 @@ var OPACITY = {
   thick: 0.16,
   thicker: 0.2,
   thickest: 0.38,
+  heavier: 0.8,
   heaviest: 0.9
 };
 

package/dist/components/theme/tokens.stylex.mjs

@@ -12,6 +12,7 @@ var OPACITY = {
   thick: 0.16,
   thicker: 0.2,
   thickest: 0.38,
+  heavier: 0.8,
   heaviest: 0.9
 };
 

package/dist/index.cjs

@@ -11,6 +11,7 @@ var index$8 = require('./components/rich-text-editor/index.cjs');
 var index$6 = require('./components/markdown/index.cjs');
 var badge = require('./components/badge/badge.cjs');
 var bench = require('./components/bench/bench.cjs');
+var bottomSheet = require('./components/bottom-sheet/bottom-sheet.cjs');
 var breadcrumb = require('./components/breadcrumb/breadcrumb.cjs');
 var button = require('./components/button/button.cjs');
 var calendar = require('./components/calendar/calendar.cjs');
@@ -87,6 +88,7 @@ exports.RichTextEditor = index$8.RichTextEditor;
 exports.Markdown = index$6.Markdown;
 exports.Badge = badge.default;
 exports.Bench = bench.default;
+exports.BottomSheet = bottomSheet.default;
 exports.Breadcrumb = breadcrumb.default;
 exports.Button = button.Button;
 exports.Calendar = calendar.default;

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export { NumberInput } from "./components/number-input";
 export { Popconfirm } from "./components/popconfirm";
 export { Highlight } from "./components/highlight";
 export { Bench } from "./components/bench";
+export { BottomSheet } from "./components/bottom-sheet";
 export { I18nButton } from "./components/i18n-button";
 export { RichTextEditor } from "./components/rich-text-editor";
 export { Quote } from "./components/quote";

package/dist/index.mjs

@@ -9,6 +9,7 @@ export { RichTextEditor } from './components/rich-text-editor/index.mjs';
 export { Markdown } from './components/markdown/index.mjs';
 export { default as Badge } from './components/badge/badge.mjs';
 export { default as Bench } from './components/bench/bench.mjs';
+export { default as BottomSheet } from './components/bottom-sheet/bottom-sheet.mjs';
 export { default as Breadcrumb } from './components/breadcrumb/breadcrumb.mjs';
 export { Button } from './components/button/button.mjs';
 export { default as Calendar } from './components/calendar/calendar.mjs';

package/dist/styles.css

@@ -344,6 +344,10 @@
     margin-block: var(--musaex-jo49ah);
   }
 
+  .musaex-vueqy4 {
+    margin-inline: auto;
+  }
+
   .musaex-15o2aup {
     margin-inline: var(--musaex-16072l3);
   }
@@ -1476,6 +1480,10 @@
     transform: translateY(-50%);
   }
 
+  .musaex-1weeur4 {
+    transform: translateY(100%);
+  }
+
   .musaex-n7yqov {
     transform: var(--default-position);
   }
@@ -1797,6 +1805,10 @@
     border-top-left-radius: var(--musaex-1035pbm);
   }
 
+  .musaex-zbxit7 {
+    border-top-left-radius: var(--musaex-1hteljg);
+  }
+
   .musaex-jizfy5 {
     border-top-left-radius: var(--musaex-mw242b);
   }
@@ -1809,6 +1821,10 @@
     border-top-right-radius: var(--musaex-1035pbm);
   }
 
+  .musaex-1ei9pc5 {
+    border-top-right-radius: var(--musaex-1hteljg);
+  }
+
   .musaex-xieajt {
     border-top-right-radius: var(--musaex-zv0eff);
   }
@@ -1997,6 +2013,10 @@
     margin-bottom: var(--musaex-48i97p);
   }
 
+  .musaex-19i5tse {
+    margin-bottom: var(--musaex-jo49ah);
+  }
+
   .musaex-16udq8c {
     margin-right: var(--musaex-16072l3);
   }
@@ -2041,6 +2061,10 @@
     margin-top: var(--musaex-jo49ah);
   }
 
+  .musaex-1bwycvy {
+    max-height: 100vh;
+  }
+
   .musaex-19nmtej {
     max-height: calc(100% - var(--musaex-16suft8) * 2);
   }

package/dist/types/bottom-sheet.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import type { ComponentProps } from "./element";
+import type { Closable } from "../hooks/use-closable";
+export interface BottomSheetProps extends ComponentProps {
+    /**
+     * @description
+     * Controls open/close state of the bottom sheet.
+     */
+    open: boolean;
+    /**
+     * @description
+     * Called when the sheet requests to close (overlay click, Esc key).
+     */
+    onClose: VoidFunction;
+    /**
+     * @description
+     * Sheet content rendered below the drag handle.
+     */
+    children?: ReactNode;
+    /**
+     * @description
+     * Height of the sheet panel. Accepts any CSS height value.
+     * @default "50vh"
+     */
+    height?: number | string;
+    /**
+     * @description
+     * Whether the sheet can be closed by overlay click or Esc key.
+     * Pass an array of `Closable` values to enable specific close triggers.
+     * @default true (all triggers enabled)
+     */
+    closable?: boolean | Closable[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.0.27-beta.30",
+  "version": "1.0.27-beta.32",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",