antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,120 @@
+.adm-picker-view {
+  --height: 240px;
+  --item-height: 34px;
+  --item-font-size: var(--adm-font-size-8);
+  height: var(--height);
+  width: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  background: var(--adm-color-background);
+}
+.adm-picker-view-column {
+  height: 100%;
+  flex: 1;
+  -webkit-user-select: none;
+          user-select: none;
+  touch-action: none;
+  position: relative;
+  z-index: 0;
+}
+.adm-picker-view-column-wheel {
+  width: 100%;
+  cursor: -webkit-grab;
+  cursor: grab;
+  position: absolute;
+  top: calc(50% - var(--item-height) / 2);
+  left: 0;
+}
+.adm-picker-view-column-wheel::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  top: -100vh;
+}
+.adm-picker-view-column-wheel::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  bottom: -100vh;
+}
+.adm-picker-view-column-item {
+  font-size: var(--item-font-size);
+  padding: 0 6px;
+  height: var(--item-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.adm-picker-view-column-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.adm-picker-view-column-accessible {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
+  padding-bottom: 1px;
+}
+.adm-picker-view-column-accessible > * {
+  flex: 1;
+  text-overflow: ellipsis;
+}
+.adm-picker-view-column-accessible-current {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.adm-picker-view-column-accessible-button {
+  width: 100%;
+  height: 100%;
+}
+.adm-picker-view-mask {
+  position: absolute;
+  z-index: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+.adm-picker-view-mask-top,
+.adm-picker-view-mask-bottom {
+  flex: auto;
+}
+.adm-picker-view-mask-middle {
+  height: var(--item-height);
+  box-sizing: border-box;
+  flex: none;
+  border-top: solid 1px var(--adm-color-border);
+  border-bottom: solid 1px var(--adm-color-border);
+}
+.adm-picker-view-mask-top {
+  background: var(--adm-color-background);
+  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+          mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+.adm-picker-view-mask-bottom {
+  background: var(--adm-color-background);
+  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+          mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+.adm-picker-view-loading-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/cjs/components/picker-view/picker-view.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PickerProps } from '../picker';
+export declare type PickerValue = string | null;
+export declare type PickerValueExtend = {
+    columns: PickerColumnItem[][];
+    items: (PickerColumnItem | null)[];
+};
+export declare type PickerColumnItem = {
+    label: ReactNode;
+    value: string;
+    key?: string | number;
+};
+export declare type PickerColumn = (string | PickerColumnItem)[];
+export declare type PickerViewProps = {
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[];
+    defaultValue?: PickerValue[];
+    mouseWheel?: boolean;
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
+} & Pick<PickerProps, 'renderLabel'> & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
+export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerView = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _wheel = require("./wheel");
+
+var _columnsExtend = require("./columns-extend");
+
+var _nativeProps = require("../../utils/native-props");
+
+var _ahooks = require("ahooks");
+
+var _pickerUtils = require("../picker/picker-utils");
+
+var _spinLoading = _interopRequireDefault(require("../spin-loading"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classPrefix = `adm-picker-view`;
+const defaultProps = {
+  defaultValue: [],
+  renderLabel: _pickerUtils.defaultRenderLabel,
+  mouseWheel: false,
+  loadingContent: _react.default.createElement("div", {
+    className: `${classPrefix}-loading-content`
+  }, _react.default.createElement(_spinLoading.default, null))
+};
+const PickerView = (0, _react.memo)(p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [innerValue, setInnerValue] = (0, _react.useState)(props.value === undefined ? props.defaultValue : props.value); // Sync `value` to `innerValue`
+
+  (0, _react.useEffect)(() => {
+    if (props.value === undefined) return; // Uncontrolled mode
+
+    if (props.value === innerValue) return;
+    setInnerValue(props.value);
+  }, [props.value]);
+  (0, _react.useEffect)(() => {
+    if (props.value === innerValue) return;
+    const timeout = window.setTimeout(() => {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [props.value, innerValue]);
+  const extend = (0, _columnsExtend.useColumnsExtend)(props.columns, innerValue);
+  const columns = extend.columns;
+  (0, _ahooks.useDebounceEffect)(() => {
+    var _a;
+
+    if (props.value === innerValue) return;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerValue, extend);
+  }, [innerValue], {
+    wait: 0,
+    leading: false,
+    trailing: true
+  });
+  const handleSelect = (0, _react.useCallback)((val, index) => {
+    setInnerValue(prev => {
+      const next = [...prev];
+      next[index] = val;
+      return next;
+    });
+  }, []);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: `${classPrefix}`
+  }, props.loading ? props.loadingContent : _react.default.createElement(_react.default.Fragment, null, columns.map((column, index) => _react.default.createElement(_wheel.Wheel, {
+    key: index,
+    index: index,
+    column: column,
+    value: innerValue[index],
+    onSelect: handleSelect,
+    renderLabel: props.renderLabel,
+    mouseWheel: props.mouseWheel
+  })), _react.default.createElement("div", {
+    className: `${classPrefix}-mask`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-mask-top`
+  }), _react.default.createElement("div", {
+    className: `${classPrefix}-mask-middle`
+  }), _react.default.createElement("div", {
+    className: `${classPrefix}-mask-bottom`
+  })))));
+});
+exports.PickerView = PickerView;
+PickerView.displayName = 'PickerView';

package/cjs/components/picker-view/wheel.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { PickerColumnItem, PickerValue } from './index';
+declare type Props = {
+    index: number;
+    column: PickerColumnItem[];
+    value: PickerValue;
+    onSelect: (value: PickerValue, index: number) => void;
+    renderLabel: (item: PickerColumnItem) => ReactNode;
+    mouseWheel: boolean;
+};
+export declare const Wheel: React.NamedExoticComponent<Props>;
+export {};

package/cjs/components/picker-view/wheel.js

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wheel = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _web = require("@react-spring/web");
+
+var _react2 = require("@use-gesture/react");
+
+var _rubberband = require("../../utils/rubberband");
+
+var _bound = require("../../utils/bound");
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _ahooks = require("ahooks");
+
+var _measureCssLength = require("../../utils/measure-css-length");
+
+var _supportsPassive = require("../../utils/supports-passive");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classPrefix = `adm-picker-view`;
+const Wheel = (0, _react.memo)(props => {
+  const {
+    value,
+    column,
+    renderLabel
+  } = props;
+
+  function onSelect(val) {
+    props.onSelect(val, props.index);
+  }
+
+  const [{
+    y
+  }, api] = (0, _web.useSpring)(() => ({
+    from: {
+      y: 0
+    },
+    config: {
+      tension: 400,
+      mass: 0.8
+    }
+  }));
+  const draggingRef = (0, _react.useRef)(false);
+  const rootRef = (0, _react.useRef)(null);
+  const itemHeight = (0, _react.useRef)(34);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    itemHeight.current = (0, _measureCssLength.measureCSSLength)(window.getComputedStyle(root).getPropertyValue('--item-height'));
+  });
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    if (draggingRef.current) return;
+    if (value === null) return;
+    const targetIndex = column.findIndex(item => item.value === value);
+    if (targetIndex < 0) return;
+    const finalPosition = targetIndex * -itemHeight.current;
+    api.start({
+      y: finalPosition,
+      immediate: y.goal !== finalPosition
+    });
+  }, [value, column]);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    if (column.length === 0) {
+      if (value !== null) {
+        onSelect(null);
+      }
+    } else {
+      if (!column.some(item => item.value === value)) {
+        const firstItem = column[0];
+        onSelect(firstItem.value);
+      }
+    }
+  }, [column, value]);
+
+  function scrollSelect(index) {
+    const finalPosition = index * -itemHeight.current;
+    api.start({
+      y: finalPosition
+    });
+    const item = column[index];
+    if (!item) return;
+    onSelect(item.value);
+  }
+
+  const handleDrag = state => {
+    draggingRef.current = true;
+    const min = -((column.length - 1) * itemHeight.current);
+    const max = 0;
+
+    if (state.last) {
+      draggingRef.current = false;
+      const position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
+      const targetIndex = min < max ? -Math.round((0, _bound.bound)(position, min, max) / itemHeight.current) : 0;
+      scrollSelect(targetIndex);
+    } else {
+      const position = state.offset[1];
+      api.start({
+        y: (0, _rubberband.rubberbandIfOutOfBounds)(position, min, max, itemHeight.current * 50, 0.2)
+      });
+    }
+  };
+
+  (0, _react2.useDrag)(state => {
+    state.event.stopPropagation();
+    handleDrag(state);
+  }, {
+    axis: 'y',
+    from: () => [0, y.get()],
+    filterTaps: true,
+    pointer: {
+      touch: true
+    },
+    target: rootRef
+  });
+  (0, _react2.useWheel)(state => {
+    state.event.stopPropagation();
+    handleDrag(state);
+  }, {
+    axis: 'y',
+    from: () => [0, y.get()],
+    preventDefault: true,
+    target: props.mouseWheel ? rootRef : undefined,
+    eventOptions: _supportsPassive.supportsPassive ? {
+      passive: false
+    } : false
+  });
+  let selectedIndex = null;
+
+  function renderAccessible() {
+    if (selectedIndex === null) {
+      return null;
+    }
+
+    const current = column[selectedIndex];
+    const previousIndex = selectedIndex - 1;
+    const nextIndex = selectedIndex + 1;
+    const previous = column[previousIndex];
+    const next = column[nextIndex];
+    return _react.default.createElement("div", {
+      className: 'adm-picker-view-column-accessible'
+    }, _react.default.createElement("div", {
+      className: 'adm-picker-view-column-accessible-current',
+      role: 'button',
+      "aria-label": current ? `当前选择的是：${current.label}` : '当前未选择'
+    }, "-"), _react.default.createElement("div", {
+      className: 'adm-picker-view-column-accessible-button',
+      onClick: () => {
+        if (!previous) return;
+        scrollSelect(previousIndex);
+      },
+      role: previous ? 'button' : 'text',
+      "aria-label": !previous ? '没有上一项' : `选择上一项：${previous.label}`
+    }, "-"), _react.default.createElement("div", {
+      className: 'adm-picker-view-column-accessible-button',
+      onClick: () => {
+        if (!next) return;
+        scrollSelect(nextIndex);
+      },
+      role: next ? 'button' : 'text',
+      "aria-label": !next ? '没有下一项' : `选择下一项：${next.label}`
+    }, "-"));
+  }
+
+  return _react.default.createElement("div", {
+    className: `${classPrefix}-column`
+  }, _react.default.createElement(_web.animated.div, {
+    ref: rootRef,
+    style: {
+      translateY: y
+    },
+    className: `${classPrefix}-column-wheel`,
+    "aria-hidden": true
+  }, column.map((item, index) => {
+    var _a;
+
+    const selected = props.value === item.value;
+    if (selected) selectedIndex = index;
+
+    function handleClick() {
+      draggingRef.current = false;
+      scrollSelect(index);
+    }
+
+    return _react.default.createElement("div", {
+      key: (_a = item.key) !== null && _a !== void 0 ? _a : item.value,
+      "data-selected": item.value === value,
+      className: `${classPrefix}-column-item`,
+      onClick: handleClick,
+      "aria-hidden": !selected,
+      "aria-label": selected ? 'active' : ''
+    }, _react.default.createElement("div", {
+      className: `${classPrefix}-column-item-label`
+    }, renderLabel(item)));
+  })), renderAccessible());
+}, (prev, next) => {
+  if (prev.index !== next.index) return false;
+  if (prev.value !== next.value) return false;
+  if (prev.onSelect !== next.onSelect) return false;
+
+  if (!(0, _isEqual.default)(prev.column, next.column)) {
+    return false;
+  }
+
+  return true;
+});
+exports.Wheel = Wheel;
+Wheel.displayName = 'Wheel';

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

package/cjs/components/popover/arrow.js

@@ -0,0 +1,25 @@
+"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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Arrow = (0, _react.memo)(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'
+  }))));
+});
+exports.Arrow = Arrow;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import './popover.less';
+import './popover-menu.less';
+export type { PopoverProps, PopoverRef } from './popover';
+export type { PopoverMenuProps, Action } from './popover-menu';
+export declare type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export declare 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?: DeprecatedPlacement | Placement | undefined;
+    stopPropagation?: "click"[] | undefined;
+    content: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--z-index", 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[];
+        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,22 @@
+"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 = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_popover2.Popover, {
+  Menu: _popoverMenu2.PopoverMenu
+});
+
+exports.default = _default;

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,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizePlacement = normalizePlacement;
+const 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,52 @@
+.adm-popover-menu {
+  --border-color: #eeeeee;
+}
+.adm-popover-menu.adm-popover {
+  --content-padding: 0;
+}
+.adm-popover-menu-list {
+  overflow: hidden;
+  min-width: 120px;
+}
+.adm-popover-menu-list-inner {
+  margin-top: -1px;
+}
+.adm-popover-menu-item {
+  display: flex;
+  padding-left: 20px;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+.adm-popover-menu-item-icon {
+  flex: none;
+  padding-right: 8px;
+  font-size: 20px;
+}
+.adm-popover-menu-item-text {
+  flex: auto;
+  padding: 14px 20px 14px 0;
+  border-top: solid 1px var(--border-color);
+}
+.adm-popover-menu-item-disabled {
+  cursor: not-allowed;
+}
+.adm-popover-menu-item-disabled > * {
+  opacity: 0.4;
+}
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+  background-color: var(--border-color);
+}
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  bottom: -1px;
+  left: 0;
+  border-bottom: solid 1px var(--border-color);
+}
+.adm-popover.adm-popover-dark.adm-popover-menu {
+  --border-color: #333333;
+  --background: rgba(0, 0, 0, 0.9);
+}

package/cjs/components/popover/popover-menu.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PopoverProps, PopoverRef } from './popover';
+export declare type Action = {
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    key?: string | number;
+    onClick?: () => void;
+};
+export declare type PopoverMenuProps = Omit<PopoverProps, 'content'> & {
+    actions: Action[];
+    onAction?: (item: Action) => void;
+};
+export declare const PopoverMenu: React.ForwardRefExoticComponent<Omit<PopoverProps, "content"> & {
+    actions: Action[];
+    onAction?: ((item: Action) => void) | undefined;
+} & React.RefAttributes<PopoverRef>>;