musae 0.2.26 → 0.3.0

package/dist/components/menu/{menu.js → menu.mjs}

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { forwardRef, useImperativeHandle } from 'react';
-import Context from './context.js';
+import Context from './context.mjs';
 import { useScrollable, clsx } from '@aiszlab/relax';
-import { useScrollOrientation, useContextValue } from './hooks.js';
-import Group from './group.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { MenuClassToken } from '../../utils/class-name.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useScrollOrientation, useContextValue } from './hooks.mjs';
+import Group from './group.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { MenuClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 /**
  * @author murukal
@@ -67,6 +67,5 @@ var Menu = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: _objectSpread(_objectSpread({}, styled.style), style)
   }));
 });
-var Menu$1 = Menu;
 
-export { Menu$1 as default };
+export { Menu as default };

package/dist/components/message/hooks.cjs

@@ -0,0 +1,47 @@
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var hooks = require('../notification/hooks.cjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * hook for message
+ */
+var useMessage = function useMessage() {
+  var _useNotification = hooks.useNotification({
+      placement: "top"
+    }),
+    _useNotification2 = _slicedToArray(_useNotification, 2),
+    notifier = _useNotification2[0],
+    holder = _useNotification2[1];
+  return [{
+    error: function error(config) {
+      return notifier.error(_objectSpread(_objectSpread({}, config), {}, {
+        closable: false
+      }));
+    },
+    info: function info(config) {
+      return notifier.info(_objectSpread(_objectSpread({}, config), {}, {
+        closable: false
+      }));
+    },
+    loading: function loading(config) {
+      return notifier.loading(_objectSpread(_objectSpread({}, config), {}, {
+        closable: false
+      }));
+    },
+    success: function success(config) {
+      return notifier.success(_objectSpread(_objectSpread({}, config), {}, {
+        closable: false
+      }));
+    },
+    warning: function warning(config) {
+      return notifier.warning(_objectSpread(_objectSpread({}, config), {}, {
+        closable: false
+      }));
+    }
+  }, holder];
+};
+
+exports.useMessage = useMessage;

package/dist/components/message/{hooks.js → hooks.mjs}

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useNotification } from '../notification/hooks.js';
+import { useNotification } from '../notification/hooks.mjs';
 
 /**
  * @author murukal

package/dist/components/message/messager.cjs

@@ -0,0 +1,22 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var notifier = require('../notification/notifier.cjs');
+
+var METHODS = ["error", "info", "loading", "success", "warning"];
+var Message = Object.assign.apply(Object, [{
+  open: function open(message) {
+    notifier.default.open(message);
+  }
+}].concat(_toConsumableArray(METHODS.map(function (type) {
+  return _defineProperty({}, type, function (message) {
+    return notifier.default.open(_objectSpread(_objectSpread({}, message), {}, {
+      placement: "top",
+      type: type
+    }));
+  });
+}))));
+
+exports.default = Message;

package/dist/components/message/{messager.js → messager.mjs}

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import Notification from '../notification/notifier.js';
+import Notification from '../notification/notifier.mjs';
 
 var METHODS = ["error", "info", "loading", "success", "warning"];
 var Message = Object.assign.apply(Object, [{
@@ -16,6 +16,5 @@ var Message = Object.assign.apply(Object, [{
     }));
   });
 }))));
-var Message$1 = Message;
 
-export { Message$1 as default };
+export { Message as default };

package/dist/components/notification/holder.cjs

@@ -0,0 +1,170 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var portal = require('../portal/portal.cjs');
+var framerMotion = require('framer-motion');
+var notification = require('./notification.cjs');
+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 _excluded = ["placement", "key"],
+  _excluded2 = ["description"];
+var styles = {
+  holder: {
+    position: "musaex-ixxii4",
+    zIndex: "musaex-yzdold",
+    display: "musaex-78zum5",
+    flexDirection: "musaex-dt5ytf",
+    pointerEvents: "musaex-47corl",
+    rowGap: "musaex-irinvi",
+    padding: "musaex-2wmp0v",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    $$css: true
+  },
+  top: {
+    top: "musaex-13vifvy",
+    insetInline: "musaex-17y0mx6",
+    insetInlineStart: null,
+    insetInlineEnd: null,
+    left: null,
+    right: null,
+    alignItems: "musaex-6s0dn4",
+    $$css: true
+  },
+  "top-right": {
+    top: "musaex-13vifvy",
+    insetInlineEnd: "musaex-tijo5x",
+    left: null,
+    right: null,
+    $$css: true
+  },
+  "top-left": {
+    top: "musaex-13vifvy",
+    insetInlineStart: "musaex-1o0tod",
+    left: null,
+    right: null,
+    $$css: true
+  },
+  bottom: {
+    bottom: "musaex-1ey2m1c",
+    insetInline: "musaex-17y0mx6",
+    insetInlineStart: null,
+    insetInlineEnd: null,
+    left: null,
+    right: null,
+    alignItems: "musaex-6s0dn4",
+    $$css: true
+  },
+  "bottom-left": {
+    bottom: "musaex-1ey2m1c",
+    insetInlineStart: "musaex-1o0tod",
+    left: null,
+    right: null,
+    $$css: true
+  },
+  "bottom-right": {
+    bottom: "musaex-1ey2m1c",
+    insetInlineEnd: "musaex-tijo5x",
+    left: null,
+    right: null,
+    $$css: true
+  }
+};
+var Holder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var defaultNotifications = _ref.defaultNotifications;
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 2),
+    unique = _useIdentity2[1];
+  var _useState = React.useState(function () {
+      return new Map();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    placements = _useState2[0],
+    setPlacements = _useState2[1];
+  var hidden = relax.useEvent(function (placement, key) {
+    var _placements$get;
+    // search with `placement` + `key`, already remove, do nothing
+    if (!((_placements$get = placements.get(placement)) !== null && _placements$get !== void 0 && _placements$get.has(key))) return;
+    setPlacements(function (prev) {
+      var next = new Map(prev);
+      var placed = new Map(next.get(placement));
+      placed["delete"](key);
+      if (placed.size === 0) {
+        next["delete"](placement);
+      } else {
+        next.set(placement, placed);
+      }
+      return next;
+    });
+  });
+  var add = relax.useEvent(function (_ref2) {
+    var _placements$get2;
+    var _ref2$placement = _ref2.placement,
+      placement = _ref2$placement === void 0 ? "top-right" : _ref2$placement,
+      _ref2$key = _ref2.key,
+      key = _ref2$key === void 0 ? unique() : _ref2$key,
+      configuration = _objectWithoutProperties(_ref2, _excluded);
+    // search with `placement` + `key`, already exitst, do nothing
+    if (!!((_placements$get2 = placements.get(placement)) !== null && _placements$get2 !== void 0 && _placements$get2.has(key))) return;
+    setPlacements(function (prev) {
+      var next = new Map(prev);
+      var placed = new Map(next.get(placement));
+      placed.set(key, configuration);
+      next.set(placement, placed);
+      return next;
+    });
+  });
+  React.useEffect(function () {
+    defaultNotifications === null || defaultNotifications === void 0 || defaultNotifications.forEach(function (notification) {
+      add(notification);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return {
+      add: add
+    };
+  }, [add]);
+  return Array.from(placements.entries()).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      placement = _ref4[0],
+      notifications = _ref4[1];
+    var styled = stylex.default.props(styles.holder, styles[placement]);
+    return /*#__PURE__*/React.createElement(portal.default, {
+      destroyable: true,
+      open: notifications.size > 0,
+      key: placement
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styled.className,
+      style: styled.style
+    }, /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
+      mode: "popLayout"
+    }, Array.from(notifications.entries()).map(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        _ref6$ = _ref6[1],
+        description = _ref6$.description,
+        item = _objectWithoutProperties(_ref6$, _excluded2);
+      return /*#__PURE__*/React.createElement(notification.default, _objectSpread(_objectSpread({}, item), {}, {
+        placement: placement,
+        key: key,
+        description: description,
+        onClose: function onClose() {
+          hidden(placement, key);
+        }
+      }));
+    }))));
+  });
+});
+
+exports.default = Holder;

package/dist/components/notification/{holder.js → holder.mjs}

@@ -2,10 +2,10 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
-import Portal from '../portal/portal.js';
+import Portal from '../portal/portal.mjs';
 import { AnimatePresence } from 'framer-motion';
-import Notification from './notification.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import Notification from './notification.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useIdentity, useEvent } from '@aiszlab/relax';
 
 var _excluded = ["placement", "key"],
@@ -137,7 +137,7 @@ var Holder = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var _ref4 = _slicedToArray(_ref3, 2),
       placement = _ref4[0],
       notifications = _ref4[1];
-    var styled = props(styles.holder, styles[placement]);
+    var styled = _stylex.props(styles.holder, styles[placement]);
     return /*#__PURE__*/React.createElement(Portal, {
       destroyable: true,
       open: notifications.size > 0,

package/dist/components/notification/hooks.cjs

@@ -0,0 +1,86 @@
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var React = require('react');
+var holder = require('./holder.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('../config/hooks.cjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * hook for notification
+ */
+var useNotification = function useNotification() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    placement = _ref.placement;
+  var ref = React.useRef(null);
+  var _useConfiguration = hooks.useConfiguration(),
+    notifier = _useConfiguration.notifier;
+  var holder$1 = React.useMemo(function () {
+    if (!relax.isDomUsable()) return null;
+    if (notifier) return null;
+    return /*#__PURE__*/React.createElement(holder.default, {
+      ref: ref
+    });
+  }, [notifier]);
+  var open = relax.useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(config) {
+      var _notifier$current, _config$key, _config$placement;
+      var _notifier, key;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // use global notifier first, if not valid, use current holder
+            // if u trigger open failed, must check holder is mounted into react dom tree
+            _notifier = (_notifier$current = notifier === null || notifier === void 0 ? void 0 : notifier.current) !== null && _notifier$current !== void 0 ? _notifier$current : ref.current;
+            key = (_config$key = config.key) !== null && _config$key !== void 0 ? _config$key : crypto.randomUUID();
+            _notifier === null || _notifier === void 0 || _notifier.add({
+              key: key,
+              title: config.title,
+              type: config.type,
+              duration: config.duration,
+              description: config.description,
+              placement: (_config$placement = config.placement) !== null && _config$placement !== void 0 ? _config$placement : placement
+            });
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
+  return [{
+    success: function success(config) {
+      return open(_objectSpread({
+        type: "success"
+      }, config));
+    },
+    error: function error(config) {
+      return open(_objectSpread({
+        type: "error"
+      }, config));
+    },
+    info: function info(config) {
+      return open(_objectSpread({
+        type: "info"
+      }, config));
+    },
+    loading: function loading(config) {
+      return open(_objectSpread({
+        type: "loading"
+      }, config));
+    },
+    warning: function warning(config) {
+      return open(_objectSpread({
+        type: "warning"
+      }, config));
+    }
+  }, holder$1];
+};
+
+exports.useNotification = useNotification;

package/dist/components/notification/{hooks.js → hooks.mjs}

@@ -2,9 +2,9 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import React, { useRef, useMemo } from 'react';
-import Holder from './holder.js';
+import Holder from './holder.mjs';
 import { isDomUsable, useEvent } from '@aiszlab/relax';
-import { useConfiguration } from '../config/hooks.js';
+import { useConfiguration } from '../config/hooks.mjs';
 
 /**
  * @author murukal