@pingux/astro 2.45.0 → 2.46.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/PopoverMenu/PopoverMenu.d.ts +4 -0
- package/lib/cjs/components/PopoverMenu/PopoverMenu.js +12 -38
- package/lib/cjs/components/PopoverMenu/PopoverMenu.stories.d.ts +12 -0
- package/lib/cjs/components/PopoverMenu/PopoverMenu.stories.js +1 -1
- package/lib/cjs/components/PopoverMenu/PopoverMenu.styles.d.ts +88 -0
- package/lib/cjs/components/PopoverMenu/PopoverMenu.test.d.ts +1 -0
- package/lib/cjs/components/PopoverMenu/index.d.ts +1 -0
- package/lib/cjs/context/MenuContext/index.d.ts +6 -0
- package/lib/cjs/context/MenuContext/index.js +2 -0
- package/lib/cjs/types/index.d.ts +1 -0
- package/lib/cjs/types/index.js +17 -6
- package/lib/cjs/types/popoverMenu.d.ts +31 -0
- package/lib/cjs/types/popoverMenu.js +6 -0
- package/lib/cjs/types/shared/style.d.ts +1 -0
- package/lib/components/PopoverMenu/PopoverMenu.js +13 -39
- package/lib/components/PopoverMenu/PopoverMenu.stories.js +1 -1
- package/lib/context/MenuContext/index.js +3 -0
- package/lib/types/index.js +1 -0
- package/lib/types/popoverMenu.js +1 -0
- package/package.json +1 -1
@@ -23,8 +23,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
23
23
|
var _reactAria = require("react-aria");
|
24
24
|
var _reactStately = require("react-stately");
|
25
25
|
var _interactions = require("@react-aria/interactions");
|
26
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
27
26
|
var _MenuContext = require("../../context/MenuContext");
|
27
|
+
var _hooks = require("../../hooks");
|
28
28
|
var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
|
29
29
|
var _react2 = require("@emotion/react");
|
30
30
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -33,13 +33,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
|
|
33
33
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
34
34
|
var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
35
35
|
var _context;
|
36
|
-
var menuPopoverRef = (0,
|
37
|
-
var triggerRef = (0, _react.useRef)();
|
38
|
-
var menuRef = (0, _react.useRef)();
|
39
|
-
/* istanbul ignore next */
|
40
|
-
(0, _react.useImperativeHandle)(ref, function () {
|
41
|
-
return menuPopoverRef.current;
|
42
|
-
});
|
36
|
+
var menuPopoverRef = (0, _hooks.useLocalOrForwardRef)(ref);
|
37
|
+
var triggerRef = (0, _react.useRef)(null);
|
38
|
+
var menuRef = (0, _react.useRef)(null);
|
43
39
|
var children = props.children,
|
44
40
|
align = props.align,
|
45
41
|
direction = props.direction,
|
@@ -52,11 +48,12 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
52
48
|
_React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
|
53
49
|
menuTrigger = _React$Children$toArr2[0],
|
54
50
|
menu = _React$Children$toArr2[1];
|
55
|
-
var
|
51
|
+
var menuTriggerState = _objectSpread(_objectSpread({}, props), {}, {
|
56
52
|
defaultOpen: isDefaultOpen,
|
57
53
|
closeOnSelect: !isNotClosedOnSelect,
|
58
54
|
shouldFlip: !isNotFlippable
|
59
|
-
})
|
55
|
+
});
|
56
|
+
var state = (0, _reactStately.useMenuTriggerState)(menuTriggerState);
|
60
57
|
var _useMenuTrigger = (0, _reactAria.useMenuTrigger)({}, state, triggerRef),
|
61
58
|
menuTriggerProps = _useMenuTrigger.menuTriggerProps,
|
62
59
|
menuProps = _useMenuTrigger.menuProps;
|
@@ -74,6 +71,8 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
74
71
|
}),
|
75
72
|
positionProps = _useOverlayPosition.overlayProps,
|
76
73
|
placement = _useOverlayPosition.placement;
|
74
|
+
|
75
|
+
/* eslint-disable react/jsx-no-constructed-context-values */
|
77
76
|
var menuContext = _objectSpread(_objectSpread({}, menuProps), {}, {
|
78
77
|
ref: menuRef,
|
79
78
|
onClose: state.close,
|
@@ -102,35 +101,10 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
102
101
|
hasNoArrow: hasNoArrow,
|
103
102
|
isDismissable: true,
|
104
103
|
isNonModal: true
|
105
|
-
}, positionProps, menuProps
|
104
|
+
}, positionProps, menuProps, {
|
105
|
+
role: "dialog"
|
106
|
+
}), contents)));
|
106
107
|
});
|
107
|
-
PopoverMenu.propTypes = {
|
108
|
-
/** Alignment of the popover menu relative to the trigger. */
|
109
|
-
align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
|
110
|
-
/** Where the popover menu opens relative to its trigger. */
|
111
|
-
direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
|
112
|
-
/** Whether the overlay is open by default (controlled). */
|
113
|
-
isOpen: _propTypes["default"].bool,
|
114
|
-
/** Whether the overlay is open by default (uncontrolled). */
|
115
|
-
isDefaultOpen: _propTypes["default"].bool,
|
116
|
-
/** Whether the popover is prevented from closing when a selection is made. */
|
117
|
-
isNotClosedOnSelect: _propTypes["default"].bool,
|
118
|
-
/**
|
119
|
-
* Whether the popover is prevented from flipping directions when insufficient space is
|
120
|
-
* available for the given `direction` placement.
|
121
|
-
*/
|
122
|
-
isNotFlippable: _propTypes["default"].bool,
|
123
|
-
/** Whether the PopoverMenu hides the arrow. */
|
124
|
-
hasNoArrow: _propTypes["default"].bool,
|
125
|
-
/** Whether the PopoverMenu contains focus inside the scope. */
|
126
|
-
isContainFocus: _propTypes["default"].bool,
|
127
|
-
/**
|
128
|
-
* Handler that is called when the overlay's open state changes.
|
129
|
-
*
|
130
|
-
* `(isOpen: boolean) => void`
|
131
|
-
*/
|
132
|
-
onOpenChange: _propTypes["default"].func
|
133
|
-
};
|
134
108
|
PopoverMenu.defaultProps = {
|
135
109
|
align: 'middle',
|
136
110
|
direction: 'bottom',
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { StoryFn } from '@storybook/react';
|
2
|
+
import { PopoverMenuProps } from '../../types';
|
3
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
4
|
+
export default _default;
|
5
|
+
export declare const Default: StoryFn<PopoverMenuProps>;
|
6
|
+
export declare const DefaultOpen: StoryFn;
|
7
|
+
export declare const Controlled: StoryFn;
|
8
|
+
export declare const Placement: StoryFn;
|
9
|
+
export declare const NotFlippable: StoryFn;
|
10
|
+
export declare const NotClosedOnSelect: StoryFn;
|
11
|
+
export declare const DisabledItem: StoryFn;
|
12
|
+
export declare const isPressed: StoryFn;
|
@@ -15,7 +15,7 @@ var _addonActions = require("@storybook/addon-actions");
|
|
15
15
|
var _storybookAddonDesigns = require("storybook-addon-designs");
|
16
16
|
var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
|
17
17
|
var _index = require("../../index");
|
18
|
-
var _figmaLinks = require("../../utils/designUtils/figmaLinks
|
18
|
+
var _figmaLinks = require("../../utils/designUtils/figmaLinks");
|
19
19
|
var _PopoverMenu = _interopRequireDefault(require("./PopoverMenu.mdx"));
|
20
20
|
var _react2 = require("@emotion/react");
|
21
21
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -0,0 +1,88 @@
|
|
1
|
+
declare const _default: {
|
2
|
+
arrow: {
|
3
|
+
color: string;
|
4
|
+
'&:before': {
|
5
|
+
content: string;
|
6
|
+
position: string;
|
7
|
+
borderColor: string;
|
8
|
+
borderStyle: string;
|
9
|
+
};
|
10
|
+
};
|
11
|
+
container: {
|
12
|
+
visibility: string;
|
13
|
+
position: string;
|
14
|
+
bg: string;
|
15
|
+
color: string;
|
16
|
+
borderRadius: number;
|
17
|
+
fontSize: string;
|
18
|
+
lineHeight: number;
|
19
|
+
outline: string;
|
20
|
+
transitionProperty: string;
|
21
|
+
WebkitBoxShadow: string;
|
22
|
+
MozBoxShadow: string;
|
23
|
+
boxShadow: string;
|
24
|
+
'&.is-dark-mode': {
|
25
|
+
color: string;
|
26
|
+
bg: string;
|
27
|
+
'&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
|
28
|
+
borderTopColor: string;
|
29
|
+
};
|
30
|
+
'&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
|
31
|
+
borderBottomColor: string;
|
32
|
+
};
|
33
|
+
'&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
|
34
|
+
borderLeftColor: string;
|
35
|
+
};
|
36
|
+
'&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
|
37
|
+
borderRightColor: string;
|
38
|
+
};
|
39
|
+
};
|
40
|
+
'&[data-popover-placement^=top] > [data-popover-arrow="arrow"]': {
|
41
|
+
bottom: number;
|
42
|
+
};
|
43
|
+
'&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
|
44
|
+
left: string;
|
45
|
+
transform: string;
|
46
|
+
borderWidth: string;
|
47
|
+
borderTopColor: string;
|
48
|
+
transformOrigin: string;
|
49
|
+
};
|
50
|
+
'&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]': {
|
51
|
+
top: number;
|
52
|
+
};
|
53
|
+
'&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
|
54
|
+
top: string;
|
55
|
+
left: string;
|
56
|
+
transform: string;
|
57
|
+
borderWidth: string;
|
58
|
+
borderBottomColor: string;
|
59
|
+
transformOrigin: string;
|
60
|
+
};
|
61
|
+
'&[data-popover-placement^=left] > [data-popover-arrow="arrow"]': {
|
62
|
+
right: number;
|
63
|
+
};
|
64
|
+
'&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
|
65
|
+
right: string;
|
66
|
+
top: string;
|
67
|
+
transform: string;
|
68
|
+
borderWidth: string;
|
69
|
+
borderLeftColor: string;
|
70
|
+
transformOrigin: string;
|
71
|
+
};
|
72
|
+
'&[data-popover-placement^=right] > [data-popover-arrow="arrow"]': {
|
73
|
+
left: number;
|
74
|
+
};
|
75
|
+
'&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
|
76
|
+
left: string;
|
77
|
+
top: string;
|
78
|
+
transform: string;
|
79
|
+
borderWidth: string;
|
80
|
+
borderRightColor: string;
|
81
|
+
transformOrigin: string;
|
82
|
+
};
|
83
|
+
'&.is-open': {
|
84
|
+
visibility: string;
|
85
|
+
};
|
86
|
+
};
|
87
|
+
};
|
88
|
+
export default _default;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './PopoverMenu';
|
@@ -6,6 +6,8 @@ _Object$defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.useMenuContext = exports.MenuContext = void 0;
|
8
8
|
var _react = require("react");
|
9
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
10
|
+
|
9
11
|
var MenuContext = /*#__PURE__*/(0, _react.createContext)({});
|
10
12
|
exports.MenuContext = MenuContext;
|
11
13
|
var useMenuContext = function useMenuContext() {
|
package/lib/cjs/types/index.d.ts
CHANGED
package/lib/cjs/types/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21;
|
3
|
+
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22;
|
4
4
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
5
5
|
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
6
6
|
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
@@ -183,8 +183,19 @@ _forEachInstanceProperty(_context16 = _Object$keys(_popoverContainer)).call(_con
|
|
183
183
|
}
|
184
184
|
});
|
185
185
|
});
|
186
|
+
var _popoverMenu = require("./popoverMenu");
|
187
|
+
_forEachInstanceProperty(_context17 = _Object$keys(_popoverMenu)).call(_context17, function (key) {
|
188
|
+
if (key === "default" || key === "__esModule") return;
|
189
|
+
if (key in exports && exports[key] === _popoverMenu[key]) return;
|
190
|
+
_Object$defineProperty(exports, key, {
|
191
|
+
enumerable: true,
|
192
|
+
get: function get() {
|
193
|
+
return _popoverMenu[key];
|
194
|
+
}
|
195
|
+
});
|
196
|
+
});
|
186
197
|
var _separator = require("./separator");
|
187
|
-
_forEachInstanceProperty(
|
198
|
+
_forEachInstanceProperty(_context18 = _Object$keys(_separator)).call(_context18, function (key) {
|
188
199
|
if (key === "default" || key === "__esModule") return;
|
189
200
|
if (key in exports && exports[key] === _separator[key]) return;
|
190
201
|
_Object$defineProperty(exports, key, {
|
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_separator)).call(_context17,
|
|
195
206
|
});
|
196
207
|
});
|
197
208
|
var _shared = require("./shared");
|
198
|
-
_forEachInstanceProperty(
|
209
|
+
_forEachInstanceProperty(_context19 = _Object$keys(_shared)).call(_context19, function (key) {
|
199
210
|
if (key === "default" || key === "__esModule") return;
|
200
211
|
if (key in exports && exports[key] === _shared[key]) return;
|
201
212
|
_Object$defineProperty(exports, key, {
|
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_shared)).call(_context18, fu
|
|
206
217
|
});
|
207
218
|
});
|
208
219
|
var _table = require("./table");
|
209
|
-
_forEachInstanceProperty(
|
220
|
+
_forEachInstanceProperty(_context20 = _Object$keys(_table)).call(_context20, function (key) {
|
210
221
|
if (key === "default" || key === "__esModule") return;
|
211
222
|
if (key in exports && exports[key] === _table[key]) return;
|
212
223
|
_Object$defineProperty(exports, key, {
|
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_table)).call(_context19, fun
|
|
217
228
|
});
|
218
229
|
});
|
219
230
|
var _text = require("./text");
|
220
|
-
_forEachInstanceProperty(
|
231
|
+
_forEachInstanceProperty(_context21 = _Object$keys(_text)).call(_context21, function (key) {
|
221
232
|
if (key === "default" || key === "__esModule") return;
|
222
233
|
if (key in exports && exports[key] === _text[key]) return;
|
223
234
|
_Object$defineProperty(exports, key, {
|
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_text)).call(_context20, func
|
|
228
239
|
});
|
229
240
|
});
|
230
241
|
var _tooltipTrigger = require("./tooltipTrigger");
|
231
|
-
_forEachInstanceProperty(
|
242
|
+
_forEachInstanceProperty(_context22 = _Object$keys(_tooltipTrigger)).call(_context22, function (key) {
|
232
243
|
if (key === "default" || key === "__esModule") return;
|
233
244
|
if (key in exports && exports[key] === _tooltipTrigger[key]) return;
|
234
245
|
_Object$defineProperty(exports, key, {
|
@@ -0,0 +1,31 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { Alignment, Axis } from './shared';
|
3
|
+
export interface PopoverMenuProps {
|
4
|
+
children?: React.ReactNode;
|
5
|
+
/** Alignment of the popover menu relative to the trigger. */
|
6
|
+
align?: Alignment;
|
7
|
+
/** Where the popover menu opens relative to its trigger. */
|
8
|
+
direction?: Axis;
|
9
|
+
/** Whether the overlay is open by default (controlled). */
|
10
|
+
isOpen?: boolean;
|
11
|
+
/** Whether the overlay is open by default (uncontrolled). */
|
12
|
+
isDefaultOpen?: boolean;
|
13
|
+
/** Whether the popover is prevented from closing when a selection is made. */
|
14
|
+
isNotClosedOnSelect?: boolean;
|
15
|
+
closeOnSelect?: boolean;
|
16
|
+
/**
|
17
|
+
* Whether the popover is prevented from flipping directions when insufficient space is
|
18
|
+
* available for the given `direction` placement.
|
19
|
+
*/
|
20
|
+
isNotFlippable?: boolean;
|
21
|
+
/** Whether the PopoverMenu hides the arrow. */
|
22
|
+
hasNoArrow?: boolean;
|
23
|
+
/** Whether the PopoverMenu contains focus inside the scope. */
|
24
|
+
isContainFocus?: boolean;
|
25
|
+
/**
|
26
|
+
* Handler that is called when the overlay's open state changes.
|
27
|
+
*
|
28
|
+
* `(isOpen: boolean) => void`
|
29
|
+
*/
|
30
|
+
onOpenChange?: (isOpen: boolean) => void;
|
31
|
+
}
|
@@ -13,6 +13,7 @@ export interface StyleProps extends ThemeUICSSProperties, SxProp {
|
|
13
13
|
}
|
14
14
|
export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom';
|
15
15
|
export type Axis = 'top' | 'bottom' | 'left' | 'right';
|
16
|
+
export type Alignment = 'start' | 'end' | 'middle';
|
16
17
|
export type SizeAxis = 'width' | 'height';
|
17
18
|
export type PlacementAxis = Axis | 'center';
|
18
19
|
export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
|
@@ -12,23 +12,19 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
|
12
12
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
13
13
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
14
14
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
15
|
-
import React, { forwardRef,
|
15
|
+
import React, { forwardRef, useRef } from 'react';
|
16
16
|
import { DismissButton, FocusScope, useMenuTrigger, useOverlayPosition } from 'react-aria';
|
17
17
|
import { useMenuTriggerState } from 'react-stately';
|
18
18
|
import { PressResponder } from '@react-aria/interactions';
|
19
|
-
import PropTypes from 'prop-types';
|
20
19
|
import { MenuContext } from '../../context/MenuContext';
|
20
|
+
import { useLocalOrForwardRef } from '../../hooks';
|
21
21
|
import PopoverContainer from '../PopoverContainer';
|
22
22
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
23
23
|
var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
|
24
24
|
var _context;
|
25
|
-
var menuPopoverRef =
|
26
|
-
var triggerRef = useRef();
|
27
|
-
var menuRef = useRef();
|
28
|
-
/* istanbul ignore next */
|
29
|
-
useImperativeHandle(ref, function () {
|
30
|
-
return menuPopoverRef.current;
|
31
|
-
});
|
25
|
+
var menuPopoverRef = useLocalOrForwardRef(ref);
|
26
|
+
var triggerRef = useRef(null);
|
27
|
+
var menuRef = useRef(null);
|
32
28
|
var children = props.children,
|
33
29
|
align = props.align,
|
34
30
|
direction = props.direction,
|
@@ -41,11 +37,12 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
41
37
|
_React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
|
42
38
|
menuTrigger = _React$Children$toArr2[0],
|
43
39
|
menu = _React$Children$toArr2[1];
|
44
|
-
var
|
40
|
+
var menuTriggerState = _objectSpread(_objectSpread({}, props), {}, {
|
45
41
|
defaultOpen: isDefaultOpen,
|
46
42
|
closeOnSelect: !isNotClosedOnSelect,
|
47
43
|
shouldFlip: !isNotFlippable
|
48
|
-
})
|
44
|
+
});
|
45
|
+
var state = useMenuTriggerState(menuTriggerState);
|
49
46
|
var _useMenuTrigger = useMenuTrigger({}, state, triggerRef),
|
50
47
|
menuTriggerProps = _useMenuTrigger.menuTriggerProps,
|
51
48
|
menuProps = _useMenuTrigger.menuProps;
|
@@ -63,6 +60,8 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
63
60
|
}),
|
64
61
|
positionProps = _useOverlayPosition.overlayProps,
|
65
62
|
placement = _useOverlayPosition.placement;
|
63
|
+
|
64
|
+
/* eslint-disable react/jsx-no-constructed-context-values */
|
66
65
|
var menuContext = _objectSpread(_objectSpread({}, menuProps), {}, {
|
67
66
|
ref: menuRef,
|
68
67
|
onClose: state.close,
|
@@ -91,35 +90,10 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
91
90
|
hasNoArrow: hasNoArrow,
|
92
91
|
isDismissable: true,
|
93
92
|
isNonModal: true
|
94
|
-
}, positionProps, menuProps
|
93
|
+
}, positionProps, menuProps, {
|
94
|
+
role: "dialog"
|
95
|
+
}), contents)));
|
95
96
|
});
|
96
|
-
PopoverMenu.propTypes = {
|
97
|
-
/** Alignment of the popover menu relative to the trigger. */
|
98
|
-
align: PropTypes.oneOf(['start', 'end', 'middle']),
|
99
|
-
/** Where the popover menu opens relative to its trigger. */
|
100
|
-
direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
101
|
-
/** Whether the overlay is open by default (controlled). */
|
102
|
-
isOpen: PropTypes.bool,
|
103
|
-
/** Whether the overlay is open by default (uncontrolled). */
|
104
|
-
isDefaultOpen: PropTypes.bool,
|
105
|
-
/** Whether the popover is prevented from closing when a selection is made. */
|
106
|
-
isNotClosedOnSelect: PropTypes.bool,
|
107
|
-
/**
|
108
|
-
* Whether the popover is prevented from flipping directions when insufficient space is
|
109
|
-
* available for the given `direction` placement.
|
110
|
-
*/
|
111
|
-
isNotFlippable: PropTypes.bool,
|
112
|
-
/** Whether the PopoverMenu hides the arrow. */
|
113
|
-
hasNoArrow: PropTypes.bool,
|
114
|
-
/** Whether the PopoverMenu contains focus inside the scope. */
|
115
|
-
isContainFocus: PropTypes.bool,
|
116
|
-
/**
|
117
|
-
* Handler that is called when the overlay's open state changes.
|
118
|
-
*
|
119
|
-
* `(isOpen: boolean) => void`
|
120
|
-
*/
|
121
|
-
onOpenChange: PropTypes.func
|
122
|
-
};
|
123
97
|
PopoverMenu.defaultProps = {
|
124
98
|
align: 'middle',
|
125
99
|
direction: 'bottom',
|
@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import { withDesign } from 'storybook-addon-designs';
|
5
5
|
import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
6
6
|
import { Button, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
|
7
|
-
import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks
|
7
|
+
import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
|
8
8
|
import PopoverMenuReadme from './PopoverMenu.mdx';
|
9
9
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
10
10
|
export default {
|
@@ -1,4 +1,7 @@
|
|
1
1
|
import { createContext, useContext } from 'react';
|
2
|
+
|
3
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
4
|
+
|
2
5
|
export var MenuContext = /*#__PURE__*/createContext({});
|
3
6
|
export var useMenuContext = function useMenuContext() {
|
4
7
|
return useContext(MenuContext);
|
package/lib/types/index.js
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|