@pingux/astro 2.140.0-alpha.5 → 2.140.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/Popover/Popover.d.ts +14 -0
- package/lib/cjs/components/Popover/Popover.js +67 -0
- package/lib/cjs/components/Popover/Popover.test.d.ts +1 -0
- package/lib/cjs/components/Popover/Popover.test.js +70 -0
- package/lib/cjs/components/Popover/index.d.ts +1 -0
- package/lib/cjs/components/Popover/index.js +14 -0
- package/lib/cjs/components/SelectFieldBase/SelectFieldBase.test.js +0 -3
- package/lib/cjs/hooks/useSelectField/useSelectField.js +5 -9
- package/lib/components/Popover/Popover.js +55 -0
- package/lib/components/Popover/Popover.test.js +67 -0
- package/lib/components/Popover/index.js +1 -0
- package/lib/components/SelectFieldBase/SelectFieldBase.test.js +0 -3
- package/lib/hooks/useSelectField/useSelectField.js +5 -9
- package/package.json +2 -2
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { OverlayTriggerState } from 'react-stately';
|
|
3
|
+
import type { AriaPopoverProps } from '@react-aria/overlays';
|
|
4
|
+
export interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
state: OverlayTriggerState;
|
|
7
|
+
className?: string;
|
|
8
|
+
popoverRef?: React.RefObject<HTMLDivElement>;
|
|
9
|
+
style?: React.CSSProperties;
|
|
10
|
+
width?: string | number;
|
|
11
|
+
'data-testid'?: string;
|
|
12
|
+
}
|
|
13
|
+
declare const Popover: (props: PopoverProps) => React.JSX.Element | null;
|
|
14
|
+
export default Popover;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
5
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
6
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
7
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
8
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
9
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
10
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
|
11
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
12
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
13
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
14
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
exports["default"] = void 0;
|
|
18
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
19
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
20
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
21
|
+
var React = _interopRequireWildcard(require("react"));
|
|
22
|
+
var _overlays = require("@react-aria/overlays");
|
|
23
|
+
var _hooks = require("../../hooks");
|
|
24
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
|
25
|
+
var _react2 = require("@emotion/react");
|
|
26
|
+
var _excluded = ["popoverRef", "state", "children", "className", "isNonModal", "width"];
|
|
27
|
+
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); }
|
|
28
|
+
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; }
|
|
29
|
+
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; }
|
|
30
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
31
|
+
var Popover = function Popover(props) {
|
|
32
|
+
var ref = React.useRef(null);
|
|
33
|
+
var _props$popoverRef = props.popoverRef,
|
|
34
|
+
popoverRef = _props$popoverRef === void 0 ? ref : _props$popoverRef,
|
|
35
|
+
state = props.state,
|
|
36
|
+
children = props.children,
|
|
37
|
+
className = props.className,
|
|
38
|
+
isNonModal = props.isNonModal,
|
|
39
|
+
width = props.width,
|
|
40
|
+
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
41
|
+
var _usePopover = (0, _overlays.usePopover)(_objectSpread(_objectSpread({}, props), {}, {
|
|
42
|
+
popoverRef: popoverRef
|
|
43
|
+
}), state),
|
|
44
|
+
popoverProps = _usePopover.popoverProps,
|
|
45
|
+
underlayProps = _usePopover.underlayProps;
|
|
46
|
+
var isOpen = state.isOpen;
|
|
47
|
+
var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
|
|
48
|
+
isOpen: isOpen
|
|
49
|
+
}),
|
|
50
|
+
classNames = _useStatusClasses.classNames;
|
|
51
|
+
if (!isOpen) {
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
return (0, _react2.jsx)(_overlays.Overlay, null, !isNonModal && (0, _react2.jsx)("div", underlayProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
|
|
55
|
+
ref: popoverRef,
|
|
56
|
+
variant: "popoverMenu.container",
|
|
57
|
+
className: classNames,
|
|
58
|
+
role: "presentation",
|
|
59
|
+
width: width
|
|
60
|
+
}, popoverProps, others), !isNonModal && (0, _react2.jsx)(_overlays.DismissButton, {
|
|
61
|
+
onDismiss: state.close
|
|
62
|
+
}), children, (0, _react2.jsx)(_overlays.DismissButton, {
|
|
63
|
+
onDismiss: state.close
|
|
64
|
+
})));
|
|
65
|
+
};
|
|
66
|
+
var _default = Popover;
|
|
67
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
var _react2 = require("@testing-library/react");
|
|
7
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
|
8
|
+
var _Popover = _interopRequireDefault(require("./Popover"));
|
|
9
|
+
var _react3 = require("@emotion/react");
|
|
10
|
+
var mockState = function mockState(isOpen) {
|
|
11
|
+
return {
|
|
12
|
+
isOpen: isOpen,
|
|
13
|
+
close: jest.fn(),
|
|
14
|
+
open: jest.fn(),
|
|
15
|
+
toggle: jest.fn(),
|
|
16
|
+
setOpen: jest.fn()
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
var triggerRef = /*#__PURE__*/_react["default"].createRef();
|
|
20
|
+
var defaultProps = {
|
|
21
|
+
'data-testid': 'popover',
|
|
22
|
+
state: mockState(true),
|
|
23
|
+
triggerRef: triggerRef
|
|
24
|
+
};
|
|
25
|
+
var getComponent = function getComponent() {
|
|
26
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
27
|
+
return (0, _react2.render)((0, _react3.jsx)(_Popover["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react3.jsx)(_Box["default"], {
|
|
28
|
+
"data-testid": "popover-children"
|
|
29
|
+
}, "I am in a popover")));
|
|
30
|
+
};
|
|
31
|
+
describe('Popover', function () {
|
|
32
|
+
test('does not render when isOpen is false', function () {
|
|
33
|
+
getComponent({
|
|
34
|
+
state: mockState(false)
|
|
35
|
+
});
|
|
36
|
+
expect(_react2.screen.queryByTestId('popover')).not.toBeInTheDocument();
|
|
37
|
+
});
|
|
38
|
+
test('renders when isOpen is true', function () {
|
|
39
|
+
getComponent({
|
|
40
|
+
state: mockState(true)
|
|
41
|
+
});
|
|
42
|
+
expect(_react2.screen.getByTestId('popover')).toBeInTheDocument();
|
|
43
|
+
expect(_react2.screen.getByTestId('popover-children')).toBeInTheDocument();
|
|
44
|
+
});
|
|
45
|
+
test('applies custom className', function () {
|
|
46
|
+
getComponent({
|
|
47
|
+
state: mockState(true),
|
|
48
|
+
className: 'custom-class'
|
|
49
|
+
});
|
|
50
|
+
expect(_react2.screen.getByTestId('popover')).toHaveClass('custom-class');
|
|
51
|
+
});
|
|
52
|
+
test('applies custom width', function () {
|
|
53
|
+
getComponent({
|
|
54
|
+
state: mockState(true),
|
|
55
|
+
width: 300
|
|
56
|
+
});
|
|
57
|
+
expect(_react2.screen.getByTestId('popover')).toHaveStyle({
|
|
58
|
+
width: '300px'
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
test('renders underlay and DismissButton when isNonModal is false', function () {
|
|
62
|
+
var _screen$getByTestId$p;
|
|
63
|
+
getComponent({
|
|
64
|
+
state: mockState(true),
|
|
65
|
+
isNonModal: false
|
|
66
|
+
});
|
|
67
|
+
expect((_screen$getByTestId$p = _react2.screen.getByTestId('popover').parentElement) === null || _screen$getByTestId$p === void 0 ? void 0 : _screen$getByTestId$p.querySelector('div')).toBeTruthy();
|
|
68
|
+
expect(_react2.screen.getByTestId('popover')).toBeInTheDocument();
|
|
69
|
+
});
|
|
70
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Popover';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
_Object$defineProperty(exports, "default", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _Popover["default"];
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
var _Popover = _interopRequireDefault(require("./Popover"));
|
|
@@ -298,9 +298,6 @@ test('two listbox can not be open at the same time', function () {
|
|
|
298
298
|
name: 'Alpha'
|
|
299
299
|
})).toBeInTheDocument();
|
|
300
300
|
_userEvent["default"].click(button2);
|
|
301
|
-
expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
|
|
302
|
-
expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
|
|
303
|
-
_userEvent["default"].click(button2);
|
|
304
301
|
expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
|
|
305
302
|
expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
|
|
306
303
|
expect(_testWrapper.screen.queryByRole('option', {
|
|
@@ -25,7 +25,7 @@ var _select = require("@react-aria/select");
|
|
|
25
25
|
var _utils = require("@react-aria/utils");
|
|
26
26
|
var _select2 = require("@react-stately/select");
|
|
27
27
|
var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox"));
|
|
28
|
-
var
|
|
28
|
+
var _Popover = _interopRequireDefault(require("../../components/Popover/Popover"));
|
|
29
29
|
var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox"));
|
|
30
30
|
var _labelModes = require("../../utils/devUtils/constants/labelModes");
|
|
31
31
|
var _ = require("..");
|
|
@@ -204,15 +204,11 @@ var useSelectField = function useSelectField(props, ref) {
|
|
|
204
204
|
return state.close();
|
|
205
205
|
}
|
|
206
206
|
}));
|
|
207
|
-
var overlay = (0, _react2.jsx)(
|
|
208
|
-
hasNoArrow: true,
|
|
209
|
-
isDismissable: true,
|
|
207
|
+
var overlay = (0, _react2.jsx)(_Popover["default"], {
|
|
210
208
|
isNonModal: true,
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
ref: popoverRef,
|
|
215
|
-
style: style
|
|
209
|
+
triggerRef: triggerRef,
|
|
210
|
+
style: style,
|
|
211
|
+
state: state
|
|
216
212
|
}, (0, _react2.jsx)(_ScrollBox["default"], scrollBoxProps, listbox));
|
|
217
213
|
return {
|
|
218
214
|
columnStyleProps: columnStyleProps,
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
2
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
3
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
4
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
5
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
|
6
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
7
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
|
8
|
+
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
|
9
|
+
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
10
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
11
|
+
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
12
|
+
var _excluded = ["popoverRef", "state", "children", "className", "isNonModal", "width"];
|
|
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
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
+
import * as React from 'react';
|
|
16
|
+
import { DismissButton, Overlay, usePopover } from '@react-aria/overlays';
|
|
17
|
+
import { useStatusClasses } from '../../hooks';
|
|
18
|
+
import Box from '../Box';
|
|
19
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
20
|
+
var Popover = function Popover(props) {
|
|
21
|
+
var ref = React.useRef(null);
|
|
22
|
+
var _props$popoverRef = props.popoverRef,
|
|
23
|
+
popoverRef = _props$popoverRef === void 0 ? ref : _props$popoverRef,
|
|
24
|
+
state = props.state,
|
|
25
|
+
children = props.children,
|
|
26
|
+
className = props.className,
|
|
27
|
+
isNonModal = props.isNonModal,
|
|
28
|
+
width = props.width,
|
|
29
|
+
others = _objectWithoutProperties(props, _excluded);
|
|
30
|
+
var _usePopover = usePopover(_objectSpread(_objectSpread({}, props), {}, {
|
|
31
|
+
popoverRef: popoverRef
|
|
32
|
+
}), state),
|
|
33
|
+
popoverProps = _usePopover.popoverProps,
|
|
34
|
+
underlayProps = _usePopover.underlayProps;
|
|
35
|
+
var isOpen = state.isOpen;
|
|
36
|
+
var _useStatusClasses = useStatusClasses(className, {
|
|
37
|
+
isOpen: isOpen
|
|
38
|
+
}),
|
|
39
|
+
classNames = _useStatusClasses.classNames;
|
|
40
|
+
if (!isOpen) {
|
|
41
|
+
return null;
|
|
42
|
+
}
|
|
43
|
+
return ___EmotionJSX(Overlay, null, !isNonModal && ___EmotionJSX("div", underlayProps), ___EmotionJSX(Box, _extends({
|
|
44
|
+
ref: popoverRef,
|
|
45
|
+
variant: "popoverMenu.container",
|
|
46
|
+
className: classNames,
|
|
47
|
+
role: "presentation",
|
|
48
|
+
width: width
|
|
49
|
+
}, popoverProps, others), !isNonModal && ___EmotionJSX(DismissButton, {
|
|
50
|
+
onDismiss: state.close
|
|
51
|
+
}), children, ___EmotionJSX(DismissButton, {
|
|
52
|
+
onDismiss: state.close
|
|
53
|
+
})));
|
|
54
|
+
};
|
|
55
|
+
export default Popover;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import Box from '../Box';
|
|
5
|
+
import Popover from './Popover';
|
|
6
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
7
|
+
var mockState = function mockState(isOpen) {
|
|
8
|
+
return {
|
|
9
|
+
isOpen: isOpen,
|
|
10
|
+
close: jest.fn(),
|
|
11
|
+
open: jest.fn(),
|
|
12
|
+
toggle: jest.fn(),
|
|
13
|
+
setOpen: jest.fn()
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
var triggerRef = /*#__PURE__*/React.createRef();
|
|
17
|
+
var defaultProps = {
|
|
18
|
+
'data-testid': 'popover',
|
|
19
|
+
state: mockState(true),
|
|
20
|
+
triggerRef: triggerRef
|
|
21
|
+
};
|
|
22
|
+
var getComponent = function getComponent() {
|
|
23
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
24
|
+
return render(___EmotionJSX(Popover, _extends({}, defaultProps, props), ___EmotionJSX(Box, {
|
|
25
|
+
"data-testid": "popover-children"
|
|
26
|
+
}, "I am in a popover")));
|
|
27
|
+
};
|
|
28
|
+
describe('Popover', function () {
|
|
29
|
+
test('does not render when isOpen is false', function () {
|
|
30
|
+
getComponent({
|
|
31
|
+
state: mockState(false)
|
|
32
|
+
});
|
|
33
|
+
expect(screen.queryByTestId('popover')).not.toBeInTheDocument();
|
|
34
|
+
});
|
|
35
|
+
test('renders when isOpen is true', function () {
|
|
36
|
+
getComponent({
|
|
37
|
+
state: mockState(true)
|
|
38
|
+
});
|
|
39
|
+
expect(screen.getByTestId('popover')).toBeInTheDocument();
|
|
40
|
+
expect(screen.getByTestId('popover-children')).toBeInTheDocument();
|
|
41
|
+
});
|
|
42
|
+
test('applies custom className', function () {
|
|
43
|
+
getComponent({
|
|
44
|
+
state: mockState(true),
|
|
45
|
+
className: 'custom-class'
|
|
46
|
+
});
|
|
47
|
+
expect(screen.getByTestId('popover')).toHaveClass('custom-class');
|
|
48
|
+
});
|
|
49
|
+
test('applies custom width', function () {
|
|
50
|
+
getComponent({
|
|
51
|
+
state: mockState(true),
|
|
52
|
+
width: 300
|
|
53
|
+
});
|
|
54
|
+
expect(screen.getByTestId('popover')).toHaveStyle({
|
|
55
|
+
width: '300px'
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
test('renders underlay and DismissButton when isNonModal is false', function () {
|
|
59
|
+
var _screen$getByTestId$p;
|
|
60
|
+
getComponent({
|
|
61
|
+
state: mockState(true),
|
|
62
|
+
isNonModal: false
|
|
63
|
+
});
|
|
64
|
+
expect((_screen$getByTestId$p = screen.getByTestId('popover').parentElement) === null || _screen$getByTestId$p === void 0 ? void 0 : _screen$getByTestId$p.querySelector('div')).toBeTruthy();
|
|
65
|
+
expect(screen.getByTestId('popover')).toBeInTheDocument();
|
|
66
|
+
});
|
|
67
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Popover';
|
|
@@ -291,9 +291,6 @@ test('two listbox can not be open at the same time', function () {
|
|
|
291
291
|
name: 'Alpha'
|
|
292
292
|
})).toBeInTheDocument();
|
|
293
293
|
userEvent.click(button2);
|
|
294
|
-
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
|
|
295
|
-
expect(screen.queryByRole('option')).not.toBeInTheDocument();
|
|
296
|
-
userEvent.click(button2);
|
|
297
294
|
expect(screen.queryByRole('listbox')).toBeInTheDocument();
|
|
298
295
|
expect(screen.queryAllByRole('option')).toHaveLength(3);
|
|
299
296
|
expect(screen.queryByRole('option', {
|
|
@@ -18,7 +18,7 @@ import { useSelect } from '@react-aria/select';
|
|
|
18
18
|
import { useResizeObserver } from '@react-aria/utils';
|
|
19
19
|
import { useSelectState } from '@react-stately/select';
|
|
20
20
|
import ListBox from '../../components/ListBox/ListBox';
|
|
21
|
-
import
|
|
21
|
+
import Popover from '../../components/Popover/Popover';
|
|
22
22
|
import ScrollBox from '../../components/ScrollBox';
|
|
23
23
|
import { modes } from '../../utils/devUtils/constants/labelModes';
|
|
24
24
|
import { useColumnStyles, useDeprecationWarning, useField } from '..';
|
|
@@ -193,15 +193,11 @@ var useSelectField = function useSelectField(props, ref) {
|
|
|
193
193
|
return state.close();
|
|
194
194
|
}
|
|
195
195
|
}));
|
|
196
|
-
var overlay = ___EmotionJSX(
|
|
197
|
-
hasNoArrow: true,
|
|
198
|
-
isDismissable: true,
|
|
196
|
+
var overlay = ___EmotionJSX(Popover, {
|
|
199
197
|
isNonModal: true,
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
ref: popoverRef,
|
|
204
|
-
style: style
|
|
198
|
+
triggerRef: triggerRef,
|
|
199
|
+
style: style,
|
|
200
|
+
state: state
|
|
205
201
|
}, ___EmotionJSX(ScrollBox, scrollBoxProps, listbox));
|
|
206
202
|
return {
|
|
207
203
|
columnStyleProps: columnStyleProps,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pingux/astro",
|
|
3
|
-
"version": "2.140.0
|
|
3
|
+
"version": "2.140.0",
|
|
4
4
|
"description": "React component library for Ping Identity's design system",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"@react-aria/list": "^3.0.0-beta.0",
|
|
72
72
|
"@react-aria/listbox": "~3.10.2",
|
|
73
73
|
"@react-aria/live-announcer": "~3.1.1",
|
|
74
|
-
"@react-aria/overlays": "^3.
|
|
74
|
+
"@react-aria/overlays": "^3.28.0",
|
|
75
75
|
"@react-aria/progress": "^3.4.9",
|
|
76
76
|
"@react-aria/select": "^3.14.5",
|
|
77
77
|
"@react-aria/selection": "~3.10.1",
|