@ebscn/ui 1.0.3-beta.3 → 1.0.3-beta.30

package/cjs/components/list/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import './list.less';
+export type { ListProps, ListRef } from './list';
+export type { ListItemProps } from './list-item';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    header?: import("react").ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--font-size" | "--border-bottom" | "--active-background-color" | "--align-items" | "--border-inner" | "--border-top" | "--extra-max-width" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./list").ListRef>> & {
+    Item: import("react").FC<import("./list-item").ListItemProps>;
+};
+export default _default;

package/cjs/components/list/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./list.css");
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+var _list2 = require("./list");
+var _listItem = require("./list-item");
+var _default = exports.default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_list2.List, {
+  Item: _listItem.ListItem
+});

package/cjs/components/list/list-item.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type ListItemProps = {
+    title?: ReactNode;
+    children?: ReactNode;
+    description?: ReactNode;
+    prefix?: ReactNode;
+    extra?: ReactNode;
+    clickable?: boolean;
+    arrow?: boolean | ReactNode;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+} & NativeProps<'--prefix-width' | '--align-items' | '--active-background-color'>;
+export declare const ListItem: FC<ListItemProps>;

package/cjs/components/list/list-item.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _nativeProps = require("../../utils/native-props");
+var _antdMobileIcons = require("antd-mobile-icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _isNodeWithContent = require("../../utils/is-node-with-content");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var classPrefix = "ebscn-list-item";
+var ListItem = function (props) {
+  var _a;
+  var clickable = (_a = props.clickable) !== null && _a !== void 0 ? _a : !!props.onClick;
+  var arrow = props.arrow === undefined ? clickable : props.arrow;
+  var content = _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, (0, _isNodeWithContent.isNodeWithContent)(props.prefix) && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-content-prefix")
+  }, props.prefix), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-content-main")
+  }, (0, _isNodeWithContent.isNodeWithContent)(props.title) && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-title")
+  }, props.title), props.children, (0, _isNodeWithContent.isNodeWithContent)(props.description) && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-description")
+  }, props.description)), (0, _isNodeWithContent.isNodeWithContent)(props.extra) && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-content-extra")
+  }, props.extra), (0, _isNodeWithContent.isNodeWithContent)(arrow) && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-content-arrow")
+  }, arrow === true ? _react.default.createElement(_antdMobileIcons.RightOutline, null) : arrow));
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(clickable ? 'a' : 'div', {
+    className: (0, _classnames.default)("".concat(classPrefix), clickable ? ['ebscn-plain-anchor'] : [], props.disabled && "".concat(classPrefix, "-disabled")),
+    onClick: props.disabled ? undefined : props.onClick
+  }, content));
+};
+exports.ListItem = ListItem;

package/cjs/components/list/list.css

@@ -0,0 +1,101 @@
+.ebscn-list {
+  --header-font-size: var(--ebscn-font-size-7);
+  --prefix-width: 'auto';
+  --prefix-padding-right: 12px;
+  --align-items: center;
+  --active-background-color: var(--ebscn-color-border);
+  --border-inner: solid 1px var(--ebscn-color-border);
+  --border-top: solid 1px var(--ebscn-color-border);
+  --border-bottom: solid 1px var(--ebscn-color-border);
+  --padding-left: 12px;
+  --padding-right: 12px;
+  --font-size: var(--ebscn-font-size-9);
+  --extra-max-width: 70%;
+}
+.ebscn-list-header {
+  color: var(--ebscn-color-weak);
+  font-size: var(--header-font-size);
+  padding: 8px var(--padding-right) 8px var(--padding-left);
+}
+.ebscn-list-body {
+  background-color: var(--ebscn-color-background);
+  overflow: hidden;
+  font-size: var(--font-size);
+}
+.ebscn-list-body-inner {
+  margin-top: -1px;
+}
+.ebscn-list-default .ebscn-list-body {
+  border-bottom: var(--border-bottom);
+}
+.ebscn-list-card {
+  margin: 12px;
+}
+.ebscn-list-card .ebscn-list-body {
+  border-radius: 8px;
+}
+.ebscn-list-card .ebscn-list-header {
+  padding-left: 0;
+}
+.ebscn-list-item {
+  display: block;
+  padding-left: var(--padding-left);
+  position: relative;
+  background-color: var(--ebscn-color-background);
+  line-height: 1.5;
+}
+.ebscn-list-item-title,
+.ebscn-list-item-description {
+  color: var(--ebscn-color-weak);
+  font-size: var(--ebscn-font-size-main);
+}
+.ebscn-list-item-content {
+  display: flex;
+  align-items: var(--align-items);
+  justify-content: flex-start;
+  border-top: var(--border-inner);
+  padding-right: var(--padding-right);
+}
+.ebscn-list-item-content-prefix {
+  width: var(--prefix-width);
+  flex: none;
+  padding-right: var(--prefix-padding-right);
+}
+.ebscn-list-item-content-main {
+  flex: auto;
+  padding: 12px 0;
+}
+.ebscn-list-item-content-extra {
+  flex: none;
+  padding-left: 12px;
+  font-size: var(--ebscn-font-size-7);
+  color: var(--ebscn-color-weak);
+  max-width: var(--extra-max-width);
+}
+.ebscn-list-item-content-arrow {
+  flex: none;
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+  color: var(--ebscn-color-light);
+  font-size: 19px;
+}
+.ebscn-list-item-disabled {
+  cursor: not-allowed;
+}
+.ebscn-list-item-disabled.ebscn-list-item-disabled > .ebscn-list-item-content > * {
+  opacity: 0.4;
+  pointer-events: none;
+}
+a.ebscn-list-item:active:not(.ebscn-list-item-disabled) {
+  background-color: var(--active-background-color);
+}
+a.ebscn-list-item:active:not(.ebscn-list-item-disabled)::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  bottom: -1px;
+  left: 0;
+  border-bottom: var(--border-inner);
+}

package/cjs/components/list/list.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type ListProps = {
+    header?: ReactNode;
+    mode?: 'default' | 'card';
+    children?: ReactNode;
+} & NativeProps<'--active-background-color' | '--align-items' | '--border-bottom' | '--border-inner' | '--border-top' | '--extra-max-width' | '--font-size' | '--header-font-size' | '--padding-left' | '--padding-right' | '--prefix-padding-right' | '--prefix-width'>;
+export type ListRef = {
+    nativeElement: HTMLDivElement | null;
+};
+export declare const List: React.ForwardRefExoticComponent<{
+    header?: ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--font-size" | "--border-bottom" | "--active-background-color" | "--align-items" | "--border-inner" | "--border-top" | "--extra-max-width" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ListRef>>;

package/cjs/components/list/list.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _nativeProps = require("../../utils/native-props");
+var _withDefaultProps = require("../../utils/with-default-props");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var classPrefix = "ebscn-list";
+var defaultProps = {
+  mode: 'default'
+};
+var List = exports.List = (0, _react.forwardRef)(function (p, ref) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var nativeElementRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      get nativeElement() {
+        return nativeElementRef.current;
+      }
+    };
+  });
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-").concat(props.mode)),
+    ref: nativeElementRef
+  }, props.header && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-header")
+  }, props.header), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-body")
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-body-inner")
+  }, props.children))));
+});

package/cjs/components/number-keyboard/number-keyboard.css

@@ -1,77 +1,90 @@
+html[data-prefers-color-scheme='dark'] .ebscn-number-keyboard-delete {
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+}
 .ebscn-number-keyboard {
   display: none;
   position: fixed;
+  z-index: 9999;
   bottom: 0;
+  left: 0;
   transform: translateY(101%);
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  height: 216px;
-  padding: 0 0 0 0;
+  height: 223px;
+  padding: 3px;
+  background-color: #fff;
+  background-color: var(--ebscn-color-keyboard-bg);
+  box-sizing: border-box;
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-number-keyboard :last-child {
-  background: var(--ebscn-color-primary);
-  color: var(--ebscn-color-background);
-}
 .ebscn-number-keyboard-key {
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
+  width: calc(25% - 8.25px);
+  height: 46px;
+  line-height: 46px;
+  border-radius: 4.17px;
+  margin: 3px;
   text-align: center;
-  font-size: 24px;
-  font-weight: Regular;
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
-  background: var(--ebscn-color-background);
+  font-weight: 400;
+  font-size: 23px;
+  color: #333;
+  color: var(--ebscn-color-text);
+  background-color: #fff;
+  background-color: var(--ebscn-color-keyboard-key-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-number-keyboard-key:active {
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
-  font-size: 24px;
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
-  background: var(--ebscn-color-border);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
+}
+.ebscn-number-keyboard-ABC {
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
 }
 .ebscn-number-keyboard-option {
+  font-size: 19px;
   font-size: var(--ebscn-font-size-11);
-  background: #e1e3e8;
+  color: #333;
+  color: var(--ebscn-color-text);
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-option:active {
-  font-size: var(--ebscn-font-size-11);
-  background: #CACBD0;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-number-keyboard-delete {
-  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-delete:active {
-  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete.png) no-repeat center;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+  background-size: 25px 25px;
 }
 .ebscn-number-keyboard-confirmKey {
+  background-color: #e84225;
   background-color: var(--ebscn-color-primary);
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
+  font-size: 19px;
   font-size: var(--ebscn-font-size-11);
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
+  color: #fff;
+  color: var(--ebscn-color-white);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-confirmKey:active {
-  background-color: #D03B21;
-  color: var(--ebscn-color-background);
+  background-color: #d13c21;
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-number-keyboard {
-    height: calc(216px + env(safe-area-inset-bottom));
-    height: calc(216px + constant(safe-area-inset-bottom));
+    height: calc(223px + env(safe-area-inset-bottom));
+    height: calc(223px + constant(safe-area-inset-bottom));
   }
 }

package/cjs/components/number-keyboard/number-keyboard.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { NativeProps } from '../../utils/native-props';
+import './number-keyboard.less';
 export type NumberKeyboardProps = {
     types?: 'fullKeyboard' | 'numberKeyboard' | 'numberKeyboardWithDot';
     type?: 'fullKeyboard' | 'numberKeyboard' | 'numberKeyboardWithDot';

package/cjs/components/number-keyboard/number-keyboard.js

@@ -8,6 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _nativeProps = require("../../utils/native-props");
 var _withDefaultProps = require("../../utils/with-default-props");
+require("./number-keyboard.css");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -82,7 +83,7 @@ function NumberKeyboard(p) {
   }, keys.map(function (item, index) {
     return _react.default.createElement("div", {
       key: item || index,
-      className: (0, _classnames.default)(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
+      className: (0, _classnames.default)("".concat(classPrefix, "-key"), item === 'ABC' ? "".concat(classPrefix, "-ABC") : '', typeof item !== 'number' && item.length && item !== '.' && item !== '确定' && item !== 'ABC' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
       onClick: function () {
         if (visible) {
           onKeyPress(item);

package/cjs/components/picker/picker.css

@@ -25,6 +25,7 @@
   padding: 4px 4px;
 }
 .ebscn-picker-header-button {
+  font-size: 14px;
   font-size: var(--header-button-font-size);
   display: inline-block;
   padding: 8px 8px;
@@ -36,7 +37,9 @@
 }
 .ebscn-picker-header-title {
   padding: 4px 4px;
+  font-size: 14px;
   font-size: var(--title-font-size);
+  color: #333;
   color: var(--ebscn-color-text);
   text-align: center;
   flex: 1;

package/cjs/components/picker-view/picker-view.css

@@ -1,12 +1,14 @@
 .ebscn-picker-view {
   --height: 240px;
-  --item-height: 34px;
+  --item-height: 33px;
   --item-font-size: var(--ebscn-font-size-8);
+  height: 240px;
   height: var(--height);
   width: 100%;
   display: flex;
   position: relative;
   overflow: hidden;
+  background: #fff;
   background: var(--ebscn-color-background);
 }
 .ebscn-picker-view-column {
@@ -23,6 +25,7 @@
   cursor: -webkit-grab;
   cursor: grab;
   position: absolute;
+  top: calc(50% - 16.5px);
   top: calc(50% - var(--item-height) / 2);
   left: 0;
 }
@@ -43,8 +46,10 @@
   bottom: -100vh;
 }
 .ebscn-picker-view-column-item {
+  font-size: 16px;
   font-size: var(--item-font-size);
   padding: 0 6px;
+  height: 33px;
   height: var(--item-height);
   display: flex;
   justify-content: center;
@@ -63,6 +68,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  top: -33px;
   top: calc(var(--item-height) * -1);
   z-index: 0;
   padding-bottom: 1px;
@@ -96,10 +102,12 @@
   flex: auto;
 }
 .ebscn-picker-view-mask-middle {
+  height: 33px;
   height: var(--item-height);
+  margin: 0 16px;
   box-sizing: border-box;
   flex: none;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(0, 0, 0, 0.04);
   z-index: 0;
 }
 .ebscn-picker-view-mask-top {
@@ -123,6 +131,7 @@
   position: relative;
   left: 0;
   top: 0;
+  height: 33px;
   height: var(--item-height);
   width: 0;
   pointer-events: none;

package/cjs/components/popover/arrow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Arrow: React.NamedExoticComponent<NativeProps>;

package/cjs/components/popover/arrow.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Arrow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _nativeProps = require("../../utils/native-props");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var Arrow = exports.Arrow = (0, _react.memo)(function (props) {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+    viewBox: '0 0 30 16'
+  }, _react.default.createElement("g", {
+    fill: 'currentColor'
+  }, _react.default.createElement("path", {
+    d: 'M0,0 L30,0 L18.07289,14.312538 C16.65863,16.009645 14.13637,16.238942 12.43926,14.824685 C12.25341,14.669808 12.08199,14.49839 11.92711,14.312538 L0,0 L0,0 Z'
+  }))));
+});

package/cjs/components/popover/index.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import './popover.less';
+import './popover-menu.less';
+export type { PopoverProps, PopoverRef } from './popover';
+export type { PopoverMenuProps, Action } from './popover-menu';
+export type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export type DeprecatedPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    defaultVisible?: boolean | undefined;
+    visible?: boolean | undefined;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
+    getContainer?: import("../../utils/render-to-container").GetContainer | undefined;
+    destroyOnHide?: boolean | undefined;
+    children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    mode?: "dark" | "light" | undefined;
+    trigger?: "click" | undefined;
+    placement?: Placement | DeprecatedPlacement | undefined;
+    stopPropagation?: "click"[] | undefined;
+    content: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--z-index" | "--arrow-size", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./popover").PopoverRef>> & {
+    Menu: import("react").ForwardRefExoticComponent<Omit<import("./popover").PopoverProps, "content"> & {
+        actions: import("./popover-menu").Action[];
+        maxCount?: number | undefined;
+        onAction?: ((item: import("./popover-menu").Action) => void) | undefined;
+    } & import("react").RefAttributes<import("./popover").PopoverRef>>;
+};
+export default _default;

package/cjs/components/popover/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./popover.css");
+require("./popover-menu.css");
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+var _popoverMenu2 = require("./popover-menu");
+var _popover2 = require("./popover");
+var _default = exports.default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_popover2.Popover, {
+  Menu: _popoverMenu2.PopoverMenu
+});

package/cjs/components/popover/normalize-placement.d.ts

@@ -0,0 +1,2 @@
+import { DeprecatedPlacement, Placement } from './index';
+export declare function normalizePlacement(placement: Placement | DeprecatedPlacement): Placement;

package/cjs/components/popover/normalize-placement.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizePlacement = normalizePlacement;
+var record = {
+  'topLeft': 'top-start',
+  'topRight': 'top-end',
+  'bottomLeft': 'bottom-start',
+  'bottomRight': 'bottom-end',
+  'leftTop': 'left-start',
+  'leftBottom': 'left-end',
+  'rightTop': 'right-start',
+  'rightBottom': 'right-end'
+};
+function normalizePlacement(placement) {
+  var _a;
+  return (_a = record[placement]) !== null && _a !== void 0 ? _a : placement;
+}

package/cjs/components/popover/popover-menu.css

@@ -0,0 +1,65 @@
+.ebscn-popover-menu {
+  --border-color: var(--ebscn-color-border);
+}
+.ebscn-popover-menu.ebscn-popover {
+  --content-padding: 0;
+}
+.ebscn-popover-menu-list {
+  overflow: hidden;
+  min-width: 120px;
+}
+.ebscn-popover-menu-list-inner {
+  margin-top: -1px;
+}
+.ebscn-popover-menu-list-scroll {
+  padding-right: 2px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: auto;
+}
+.ebscn-popover-menu-list-scroll::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 4px;
+}
+.ebscn-popover-menu-list-scroll::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #ddd;
+}
+.ebscn-popover-menu-item {
+  display: flex;
+  padding-left: 20px;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+.ebscn-popover-menu-item-icon {
+  flex: none;
+  padding-right: 8px;
+  font-size: 20px;
+}
+.ebscn-popover-menu-item-text {
+  flex: auto;
+  padding: 14px 20px 14px 0;
+  border-top: solid 1px var(--border-color);
+}
+.ebscn-popover-menu-item-disabled {
+  cursor: not-allowed;
+}
+.ebscn-popover-menu-item-disabled > * {
+  opacity: 0.4;
+}
+.ebscn-popover-menu-item:active:not(.ebscn-popover-menu-item-disabled) {
+  background-color: var(--border-color);
+}
+.ebscn-popover-menu-item:active:not(.ebscn-popover-menu-item-disabled)::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  bottom: -1px;
+  left: 0;
+  border-bottom: solid 1px var(--border-color);
+}
+.ebscn-popover.ebscn-popover-dark.ebscn-popover-menu {
+  --border-color: var(--ebscn-color-text);
+  --background: rgba(0, 0, 0, 0.9);
+}