@sheinx/base 3.0.0-alpha.1

package/esm/menu/menu.js

@@ -0,0 +1,119 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _hooks = require("@sheinx/hooks");
+var _item = _interopRequireDefault(require("./item"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _scroll = _interopRequireDefault(require("./scroll"));
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var emptyArray = [];
+var Menu = function Menu(props) {
+  var _props$jssStyle, _props$jssStyle$menu, _props$style;
+  var _props$data = props.data,
+    data = _props$data === void 0 ? emptyArray : _props$data,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'inline' : _props$mode,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme;
+  var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
+  var isVertical = mode === 'vertical' || mode === 'vertical-auto';
+  var isHorizontal = mode === 'horizontal';
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasOpen = _useState2[0],
+    setHasOpen = _useState2[1];
+  var _useMenu = (0, _hooks.useMenu)({
+      data: data,
+      active: props.active,
+      defaultOpenKeys: props.defaultOpenKeys,
+      openKeys: props.openKeys,
+      onOpenChange: props.onOpenChange
+    }),
+    openKeys = _useMenu.openKeys,
+    onOpenChange = _useMenu.onOpenChange,
+    bindUpdate = _useMenu.bindUpdate,
+    unbindUpdate = _useMenu.unbindUpdate,
+    changeActiveId = _useMenu.changeActiveId;
+  var scrollRef = (0, _react.useRef)(null);
+  var hasExpand = data.some(function (item) {
+    return item.children && (props.looseChildren || item.children.length);
+  });
+  var showScrollBar = isHorizontal || isVertical;
+  var listStyle = isVertical ? {
+    width: (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width
+  } : undefined;
+  (0, _react.useEffect)(function () {
+    var newOpen = (openKeys || []).filter(function (k) {
+      return data.find(function (d, i) {
+        return _hooks.util.getKey(props.keygen, d, i) === k;
+      });
+    }).length > 0;
+    if (newOpen !== hasOpen) {
+      setHasOpen(newOpen);
+    }
+  }, [data, openKeys]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasExpand && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasExpand), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight),
+    style: _objectSpread({
+      height: props.height
+    }, props.style),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes === null || classes === void 0 ? void 0 : classes.scrollbox,
+      ref: scrollRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: classes === null || classes === void 0 ? void 0 : classes.root,
+        style: listStyle,
+        children: data.map(function (item, index) {
+          var key = _hooks.util.getKey(props.keygen, item, index);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
+            level: 0,
+            index: index,
+            parentId: "",
+            dataItem: item,
+            keyResult: key,
+            openKeys: openKeys,
+            mode: mode,
+            onOpenChange: onOpenChange,
+            bindUpdate: bindUpdate,
+            unbindUpdate: unbindUpdate,
+            changeActiveId: changeActiveId,
+            onClick: props.onClick,
+            looseChildren: props.looseChildren,
+            parentSelectable: props.parentSelectable,
+            toggleDuration: props.toggleDuration,
+            disabled: props.disabled,
+            renderItem: props.renderItem,
+            keygen: props.keygen,
+            jssStyle: props.jssStyle,
+            linkKey: props.linkKey,
+            frontCaret: props.frontCaret,
+            frontCaretType: props.frontCaretType,
+            caretColor: props.caretColor,
+            inlineIndent: props.inlineIndent,
+            scrollRef: scrollRef
+          }, key);
+        })
+      })
+    }), showScrollBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_scroll.default, {
+      targetRef: scrollRef,
+      direction: mode === 'vertical' || mode === 'vertical-auto' ? 'y' : 'x',
+      data: data,
+      jssStyle: props.jssStyle
+    })]
+  });
+};
+var _default = Menu;
+exports.default = _default;

package/esm/menu/menu.type.d.ts

@@ -0,0 +1,166 @@
+/// <reference types="react" />
+import type { UseMenuItemProps } from '@sheinx/hooks';
+import { KeygenResult, KeygenType, ObjectKey } from '@sheinx/hooks';
+import { CommonType } from '../common/type';
+export declare type MenuMode = 'inline' | 'vertical' | 'horizontal' | 'vertical-auto';
+export interface MenuClasses {
+    wrapper: string;
+    wrapperInline: string;
+    wrapperVertical: string;
+    wrapperHorizontal: string;
+    wrapperHasExpand: string;
+    wrapperHasOpen: string;
+    wrapperLight: string;
+    wrapperDark: string;
+    root: string;
+    children: string;
+    childrenUp: string;
+    item: string;
+    itemActive: string;
+    itemDisabled: string;
+    itemOpen: string;
+    itemInPath: string;
+    itemHasChildren: string;
+    itemContent: string;
+    itemContentFront: string;
+    itemContentBack: string;
+    title: string;
+    expand: string;
+    expandFront: string;
+    expandBack: string;
+    expandHover: string;
+    scrollbar: string;
+    scrollbarX: string;
+    scrollbarY: string;
+    scrollbarDragging: string;
+    scrolbarHandler: string;
+    scrollbox: string;
+}
+export declare type MenuJssStyle = {
+    menu?: () => MenuClasses;
+};
+/**
+ * @title Menu
+ */
+export interface MenuProps<DataItem, Key extends KeygenResult = KeygenResult> extends Pick<CommonType, 'className' | 'style'> {
+    jssStyle?: MenuJssStyle;
+    /**
+     * @en style of menu
+     * @cn 菜单样式
+     * @default 'inline'
+     */
+    mode?: MenuMode;
+    /**
+     * @en Menu items data
+     * @cn 需要渲染成菜单的数据
+     * @default []
+     * @override object[]
+     */
+    data?: DataItem[];
+    /**
+     * @en theme of menu
+     * @cn 主题
+     */
+    theme?: 'dark';
+    /**
+     * @en menu height
+     * @cn 菜单高度
+     */
+    height?: number | string;
+    /**
+     * @en expended menu
+     * @cn 展开的菜单(受控)
+     * @default []
+     * @override (string | number)[]
+     */
+    openKeys?: Key[];
+    /**
+     * @en triangle expansion color
+     * @cn 三角展开符颜色
+     */
+    caretColor?: string;
+    /**
+     * @en Front solid triangle expansion
+     * @cn 前置实心三角展开符
+     */
+    frontCaret?: boolean;
+    /**
+     * @en indent of each level
+     * @cn 每一层缩进宽度
+     * @default 24
+     */
+    inlineIndent?: number;
+    /**
+     * @en menu item expandable if has children
+     * @cn 如果 children 有设置则菜单项可展开
+     * @default false
+     */
+    looseChildren?: boolean;
+    /**
+     * @private 内部属性
+     */
+    toggleDuration?: number;
+    /**
+     * @en Key generator. When it is true, the data itself is used as the key equivalent to (d => d). When it is a function, use its return value. When it is a string，ues the value of the string. For example, 'id' is the same thing as (d) => d.id.
+     * @cn 生成每一项key的辅助方法。为 true 时，以数据项本身作为key，相当于 (d => d)。为函数时，使用此函数返回值。为string时，使用这个string对应的数据值。如 'id'，相当于 (d => d.id)
+     * @default true
+     */
+    keygen: KeygenType<DataItem>;
+    /**
+     * @en Initial expanded menu
+     * @cn 初始展开的菜单;如果需要设置此值,则需要设置keygen,此值为一个包含key的数组
+     * @default []
+     * @override (string | number)[]
+     */
+    defaultOpenKeys?: Key[];
+    /**
+     * @en parent menu Selectable
+     * @cn 父级菜单是否可选中
+     * @default false
+     */
+    parentSelectable?: boolean;
+    /**
+     * @en The function will be called when the user clicks the menu item.
+     * @cn 子菜单点击事件,参数为当条数据
+     */
+    onClick?: (data: DataItem) => void;
+    /**
+     * @en The item is actived when the active function return true.
+     * @cn 验证是否激活,参数为对应的数据对象,返回true则代表该菜单激活
+     */
+    active?: (data: DataItem) => boolean;
+    /**
+     * @en Whether to be disabled
+     * @cn 是否禁用选项
+     * @default d => d.disabled
+     */
+    disabled?: (data: DataItem) => boolean;
+    /**
+     * @en front triangle expansion symbol type
+     * @cn 前置三角展开符类型
+     * @default 'solid'
+     */
+    frontCaretType?: 'hollow' | 'solid';
+    /**
+     * @en menu open change callback
+     * @cn 菜单展开/收起回调
+     */
+    onOpenChange?: (keys: Key[]) => void;
+    /**
+     * @en the key of inject the link value of the submenu
+     * @cn 需要注入子菜单的链接键值
+     */
+    linkKey?: ((d: DataItem) => string) | ObjectKey<DataItem>;
+    /**
+     * @en Element render mode. If it is a string, the corresponding value is taken as the display content; If it is a function, the result returned by the function is taken as the display content.
+     * @cn 元素渲染方式,如果为字符串,则会以对应的值作为显示内容;如果为函数,则以函数返回的结果作为显示内容,函数参数为对应的数据对象
+     * @default 'title'
+     */
+    renderItem?: ((data: DataItem, index: number) => React.ReactNode) | ObjectKey<DataItem>;
+}
+export interface MenuItemProps extends UseMenuItemProps, Pick<MenuProps<any, any>, 'renderItem' | 'keygen' | 'linkKey' | 'frontCaret' | 'frontCaretType' | 'caretColor' | 'jssStyle' | 'inlineIndent'> {
+    index: number;
+    level: number;
+    scrollRef: React.MutableRefObject<HTMLDivElement | null>;
+}
+//# sourceMappingURL=menu.type.d.ts.map

package/esm/menu/menu.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.type.d.ts","sourceRoot":"","sources":["menu.type.ts"],"names":[],"mappings":"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"}

package/esm/menu/menu.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/esm/menu/scroll.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { MenuJssStyle } from './menu.type';
+interface ScrollProps {
+    direction: 'x' | 'y';
+    targetRef: React.RefObject<HTMLDivElement>;
+    data?: any[];
+    jssStyle?: MenuJssStyle;
+}
+declare const Scroll: (props: ScrollProps) => JSX.Element;
+export default Scroll;
+//# sourceMappingURL=scroll.d.ts.map

package/esm/menu/scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["scroll.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,UAAU,WAAW;IACnB,SAAS,EAAE,GAAG,GAAG,GAAG,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,UAAW,WAAW,gBAyGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/menu/scroll.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _hooks = require("@sheinx/hooks");
+var _scrollbar = _interopRequireDefault(require("./scrollbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+var Scroll = function Scroll(props) {
+  var _useRef = (0, _react.useRef)({
+      timer: 0
+    }),
+    context = _useRef.current;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    offset = _useState2[0],
+    setScroll = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      width: 0,
+      scrollWidth: 0,
+      height: 0,
+      scrollHeight: 0
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    info = _useState4[0],
+    setInfo = _useState4[1];
+  var scrollLength = props.direction === 'x' ? info.scrollWidth : info.scrollHeight;
+  var length = props.direction === 'x' ? info.width : info.height;
+  var show = scrollLength > length;
+  var handleResize = (0, _hooks.usePersistFn)(function () {
+    var target = props.targetRef.current;
+    if (!target) return;
+    if (context.timer) {
+      clearTimeout(context.timer);
+      context.timer = null;
+    }
+    context.timer = setTimeout(function () {
+      var scrollWidth = target.scrollWidth,
+        scrollHeight = target.scrollHeight,
+        clientHeight = target.clientHeight,
+        clientWidth = target.clientWidth;
+      setInfo({
+        width: clientWidth,
+        scrollWidth: scrollWidth,
+        height: clientHeight,
+        scrollHeight: scrollHeight
+      });
+    }, 200);
+  });
+  (0, _hooks.useResize)({
+    targetRef: props.targetRef,
+    cb: handleResize,
+    timer: 0
+  });
+  var handleWheel = (0, _hooks.usePersistFn)(function (e) {
+    e.preventDefault();
+    var target = e.currentTarget;
+    var wheel = _hooks.util.NormalizeWheel(e);
+    var delta = props.direction === 'x' ? wheel.pixelX : wheel.pixelY;
+    if (props.direction === 'x') {
+      target.scrollLeft += delta;
+    } else {
+      target.scrollTop += delta;
+    }
+    var newOffset = offset + delta / length;
+    if (newOffset < 0) newOffset = 0;
+    if (newOffset > 1) newOffset = 1;
+    setScroll(newOffset);
+  });
+  var handleScroll = (0, _hooks.usePersistFn)(function (percent) {
+    var target = props.targetRef.current;
+    if (!target) return;
+    if (props.direction === 'x') {
+      target.scrollLeft = percent * (info.scrollWidth - info.width);
+    } else {
+      target.scrollTop = percent * (info.scrollHeight - info.height);
+    }
+    setScroll(percent);
+  });
+  (0, _react.useEffect)(function () {
+    var target = props.targetRef.current;
+    if (target) {
+      if (show) {
+        target.addEventListener('wheel', handleWheel, {
+          passive: false
+        });
+      } else {
+        target.removeEventListener('wheel', handleWheel);
+      }
+    }
+    return function () {
+      if (target) {
+        target.removeEventListener('wheel', handleWheel);
+      }
+    };
+  }, [show, props.targetRef.current]);
+  (0, _react.useEffect)(function () {
+    handleResize();
+    return function () {
+      if (context.timer) {
+        clearTimeout(context.timer);
+        context.timer = null;
+      }
+    };
+  }, [props.data]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_scrollbar.default, {
+    direction: props.direction,
+    length: props.direction === 'x' ? info.width : info.height,
+    scrollLength: props.direction === 'x' ? info.scrollWidth : info.scrollHeight,
+    offset: offset,
+    onScroll: handleScroll,
+    jssStyle: props.jssStyle
+  });
+};
+var _default = Scroll;
+exports.default = _default;

package/esm/menu/scrollbar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { MenuJssStyle } from './menu.type';
+interface ScrollbarProps {
+    direction: 'x' | 'y';
+    length: number;
+    scrollLength: number;
+    offset: number;
+    onScroll: (offset: number) => void;
+    jssStyle?: MenuJssStyle;
+}
+declare const Scrollbar: (props: ScrollbarProps) => JSX.Element | null;
+export default Scrollbar;
+//# sourceMappingURL=scrollbar.d.ts.map

package/esm/menu/scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["scrollbar.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,UAAU,cAAc;IACtB,SAAS,EAAE,GAAG,GAAG,GAAG,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAED,QAAA,MAAM,SAAS,UAAW,cAAc,uBAuFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/menu/scrollbar.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _hooks = require("@sheinx/hooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _config = require("../config");
+var _jsxRuntime = require("react/jsx-runtime");
+var Scrollbar = function Scrollbar(props) {
+  var _props$jssStyle, _props$jssStyle$menu;
+  var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
+  var show = props.scrollLength > props.length;
+  var config = (0, _config.useConfig)();
+  var isRtl = config.direction === 'rtl';
+  var _useRef = (0, _react.useRef)({
+      cachedOffset: props.offset
+    }),
+    context = _useRef.current;
+  var barLength = props.length * props.length / props.scrollLength;
+  if (barLength < 20) barLength = 20;
+  var onDragStart = (0, _hooks.usePersistFn)(function () {
+    context.cachedOffset = props.offset;
+  });
+  var onDragMove = (0, _hooks.usePersistFn)(function (deltaX, deltaY) {
+    var value = props.direction === 'x' ? deltaX : deltaY;
+    var newOffset;
+    if (props.direction === 'x' && isRtl) {
+      newOffset = context.cachedOffset - value / (props.length - barLength);
+    } else {
+      newOffset = context.cachedOffset + value / (props.length - barLength);
+    }
+    if (newOffset < 0) newOffset = 0;
+    if (newOffset > 1) newOffset = 1;
+    if (newOffset === context.cachedOffset) return;
+    context.cachedOffset = newOffset;
+    props.onScroll(newOffset);
+  });
+  var handleBgClick = (0, _hooks.usePersistFn)(function (e) {
+    if (e.target !== e.currentTarget) return;
+    var inner = e.target.firstChild;
+    if (!inner) return;
+    var rect = inner.getBoundingClientRect();
+    var newOffset = props.offset;
+    var page = props.length / (props.scrollLength - props.length);
+    var plus = isRtl ? e.clientX < rect.left : e.clientX > rect.left;
+    var add = isRtl ? e.clientX > rect.left : e.clientX < rect.left;
+    if (props.direction === 'x' && add || props.direction === 'y' && e.clientY < rect.top) {
+      newOffset = props.offset - page;
+      if (newOffset < 0) newOffset = 0;
+    } else if (props.direction === 'x' && plus || props.direction === 'y' && e.clientY > rect.top) {
+      newOffset = props.offset + page;
+      if (newOffset > 1) newOffset = 1;
+    }
+    props.onScroll(newOffset);
+  });
+  var _useDragMock = (0, _hooks.useDragMock)({
+      onDragStart: onDragStart,
+      onDragMove: onDragMove
+    }),
+    handleMouseDown = _useDragMock.handleMouseDown,
+    isDragging = _useDragMock.isDragging;
+  if (!show) return null;
+  var style = {};
+  var value = (props.length - barLength) * props.offset;
+  var x = isRtl ? 'right' : 'left';
+  if (props.scrollLength > 0) {
+    if (props.direction === 'x') {
+      style.width = "".concat(props.length / props.scrollLength * 100, "%");
+      style[x] = value;
+    } else {
+      style.height = "".concat(props.length / props.scrollLength * 100, "%");
+      style.top = value;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.scrollbar, props.direction === 'x' && (classes === null || classes === void 0 ? void 0 : classes.scrollbarX), props.direction === 'y' && (classes === null || classes === void 0 ? void 0 : classes.scrollbarY), isDragging && (classes === null || classes === void 0 ? void 0 : classes.scrollbarDragging)),
+    onClick: handleBgClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes === null || classes === void 0 ? void 0 : classes.scrolbarHandler,
+      onMouseDown: handleMouseDown,
+      style: style
+    })
+  });
+};
+var _default = Scrollbar;
+exports.default = _default;

package/esm/message/__example__/01-base.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=01-base.d.ts.map

package/esm/message/__example__/01-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-base.d.ts","sourceRoot":"","sources":["01-base.tsx"],"names":[],"mappings":";;AAUA,wBAkBE"}

package/esm/message/__example__/01-base.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    --
+ * en - Basic
+ *    --
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: 'button',
+      onClick: function onClick() {
+        _.Message.success('成功', 3, {
+          jssStyle: {
+            message: _shineoutStyle.useMessageStyle,
+            alert: _shineoutStyle.useAlertStyle
+          }
+        });
+      },
+      children: "hhihih"
+    })
+  });
+};
+exports.default = _default;

package/esm/message/func.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MessageOptions, PositionType } from './func.type';
+declare const _default: {
+    show: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<() => void>;
+    success: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<() => void>;
+    info: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<() => void>;
+    warn: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<() => void>;
+    warning: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<() => void>;
+    danger: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<() => void>;
+    error: (content: import("react").ReactNode, duration?: number | undefined, options?: MessageOptions | undefined) => Promise<() => void>;
+    close: (key?: PositionType) => void;
+    setOptions: (options: MessageOptions) => void;
+};
+export default _default;
+//# sourceMappingURL=func.d.ts.map

package/esm/message/func.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"func.d.ts","sourceRoot":"","sources":["func.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,cAAc,EAAe,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;;;;;kBAkDxE,YAAY;0BAUJ,cAAc;;AAlBtC,wBAqBE"}

package/esm/message/func.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.for-each.js");
+var _manager = require("./manager");
+var defaultOptions = {};
+var create = function create(type) {
+  return function (content, duration, options) {
+    var mo = Object.assign({}, defaultOptions, options);
+    var duration1 = [duration, defaultOptions.duration, 3].find(function (d) {
+      return typeof d === 'number';
+    });
+    var onClose = mo.onClose,
+      _mo$position = mo.position,
+      position = _mo$position === void 0 ? 'top' : _mo$position,
+      title = mo.title,
+      _mo$className = mo.className,
+      className = _mo$className === void 0 ? '' : _mo$className,
+      _mo$top = mo.top,
+      top = _mo$top === void 0 ? 'auto' : _mo$top,
+      hideClose = mo.hideClose,
+      container = mo.container,
+      jssStyle = mo.jssStyle;
+    return (0, _manager.getComponent)({
+      position: position,
+      container: container,
+      jssStyle: jssStyle
+    }).then(function (messager) {
+      return messager.addMessage({
+        content: content,
+        duration: duration1,
+        type: type,
+        onClose: onClose,
+        title: title,
+        className: className,
+        top: top,
+        position: position,
+        hideClose: hideClose
+      });
+    });
+  };
+};
+var _default = {
+  show: create('default'),
+  success: create('success'),
+  info: create('info'),
+  warn: create('warning'),
+  warning: create('warning'),
+  danger: create('danger'),
+  error: create('danger'),
+  close: function close(key) {
+    if (key) (0, _manager.destroy)(key);else {
+      ['top', 'middle', 'top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(function (k) {
+        (0, _manager.destroy)(k);
+      });
+    }
+  },
+  setOptions: function setOptions(options) {
+    defaultOptions = options;
+  }
+};
+exports.default = _default;