@pingux/astro 2.45.0-alpha.0 → 2.45.0-alpha.2
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/ButtonBar/ButtonBar.d.ts +4 -0
- package/lib/cjs/components/ButtonBar/ButtonBar.js +0 -5
- package/lib/cjs/components/ButtonBar/ButtonBar.stories.d.ts +8 -0
- package/lib/cjs/components/ButtonBar/ButtonBar.styles.d.ts +17 -0
- package/lib/cjs/components/ButtonBar/ButtonBar.test.d.ts +1 -0
- package/lib/cjs/components/ButtonBar/ButtonBar.test.js +0 -7
- package/lib/cjs/components/OverlayPanel/OverlayPanel.d.ts +4 -0
- package/lib/cjs/components/OverlayPanel/OverlayPanel.js +1 -29
- package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.d.ts +8 -0
- package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +7 -6
- package/lib/cjs/components/OverlayPanel/OverlayPanel.styles.d.ts +64 -0
- package/lib/cjs/components/OverlayPanel/OverlayPanel.test.d.ts +1 -0
- package/lib/cjs/components/OverlayPanel/index.d.ts +1 -0
- package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.d.ts +1 -1
- package/lib/cjs/types/buttonBar.d.ts +6 -0
- package/lib/cjs/types/buttonBar.js +6 -0
- package/lib/cjs/types/iconButton.d.ts +2 -1
- package/lib/cjs/types/index.d.ts +2 -0
- package/lib/cjs/types/index.js +38 -16
- package/lib/cjs/types/overlayPanel.d.ts +23 -0
- package/lib/cjs/types/overlayPanel.js +6 -0
- package/lib/cjs/types/shared/style.d.ts +1 -0
- package/lib/components/ButtonBar/ButtonBar.js +0 -5
- package/lib/components/ButtonBar/ButtonBar.test.js +0 -7
- package/lib/components/OverlayPanel/OverlayPanel.js +3 -31
- package/lib/components/OverlayPanel/OverlayPanel.stories.js +7 -6
- package/lib/types/buttonBar.js +1 -0
- package/lib/types/index.js +2 -0
- package/lib/types/overlayPanel.js +1 -0
- package/package.json +1 -1
@@ -12,7 +12,6 @@ exports["default"] = void 0;
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
13
13
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
15
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
16
15
|
var _index = require("../../index");
|
17
16
|
var _react2 = require("@emotion/react");
|
18
17
|
var _excluded = ["align", "children"];
|
@@ -28,10 +27,6 @@ var ButtonBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
28
27
|
variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
|
29
28
|
}, others), children);
|
30
29
|
});
|
31
|
-
ButtonBar.propTypes = {
|
32
|
-
/** Justifies the component's children. */
|
33
|
-
align: _propTypes["default"].oneOf(['left', 'right'])
|
34
|
-
};
|
35
30
|
ButtonBar.defaultProps = {
|
36
31
|
align: 'left'
|
37
32
|
};
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { StoryFn } from '@storybook/react';
|
2
|
+
import { ButtonBarProps } 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<ButtonBarProps>;
|
6
|
+
export declare const RightAligned: StoryFn;
|
7
|
+
export declare const Secondary: StoryFn;
|
8
|
+
export declare const SecondaryRightAligned: StoryFn;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
declare const _default: {
|
2
|
+
container: {
|
3
|
+
bg: string;
|
4
|
+
gap: string;
|
5
|
+
justifyContent: string;
|
6
|
+
px: string;
|
7
|
+
py: string;
|
8
|
+
};
|
9
|
+
justifyRightContainer: {
|
10
|
+
justifyContent: string;
|
11
|
+
bg: string;
|
12
|
+
gap: string;
|
13
|
+
px: string;
|
14
|
+
py: string;
|
15
|
+
};
|
16
|
+
};
|
17
|
+
export default _default;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -91,11 +91,4 @@ test('justify-content left when align prop is excluded', function () {
|
|
91
91
|
getComponent();
|
92
92
|
var element = _testWrapper.screen.getByTestId(testId);
|
93
93
|
expect(element).toHaveStyleRule('justify-content', 'left');
|
94
|
-
});
|
95
|
-
test('an error is thrown when align has invalid prop value', function () {
|
96
|
-
expect(function () {
|
97
|
-
return getComponent({
|
98
|
-
align: 'rihgt'
|
99
|
-
});
|
100
|
-
}).toThrow('Failed prop type');
|
101
94
|
});
|
@@ -9,16 +9,13 @@ _Object$defineProperty(exports, "__esModule", {
|
|
9
9
|
value: true
|
10
10
|
});
|
11
11
|
exports["default"] = void 0;
|
12
|
-
var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
|
13
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
14
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
15
14
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
16
15
|
var _react = _interopRequireWildcard(require("react"));
|
17
16
|
var _reactAria = require("react-aria");
|
18
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
19
17
|
var _ = require("../..");
|
20
18
|
var _hooks = require("../../hooks");
|
21
|
-
var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
|
22
19
|
var _react2 = require("@emotion/react");
|
23
20
|
var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef"];
|
24
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); }
|
@@ -36,11 +33,7 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
36
33
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
37
34
|
var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
|
38
35
|
onClose = _useOverlayPanelState.onClose;
|
39
|
-
var overlayPanelRef = (0,
|
40
|
-
/* istanbul ignore next */
|
41
|
-
(0, _react.useImperativeHandle)(ref, function () {
|
42
|
-
return overlayPanelRef.current;
|
43
|
-
});
|
36
|
+
var overlayPanelRef = (0, _hooks.useLocalOrForwardRef)(ref);
|
44
37
|
|
45
38
|
// this is code to avoid regressions -- implementations that do not use the
|
46
39
|
// useMountTransition hook will not break, because this className gives the
|
@@ -72,27 +65,6 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
72
65
|
className: classNames
|
73
66
|
}, children)));
|
74
67
|
});
|
75
|
-
OverlayPanel.propTypes = {
|
76
|
-
/** Sets the open state of the menu. */
|
77
|
-
isOpen: _propTypes["default"].bool,
|
78
|
-
/** Sets the size of the overlay panel. */
|
79
|
-
size: _propTypes["default"].oneOf((0, _values["default"])(_panelSizes.panelSizes)),
|
80
|
-
/** JSX styling that is passed into the component. */
|
81
|
-
sx: _propTypes["default"].shape({
|
82
|
-
width: _propTypes["default"].string
|
83
|
-
}),
|
84
|
-
/** State object that is passed in from the useOverlayPanelState hook */
|
85
|
-
state: _propTypes["default"].shape({
|
86
|
-
close: _propTypes["default"].func
|
87
|
-
}),
|
88
|
-
/** Callback function that runs when the esc key is used to close the OverlayPanel. */
|
89
|
-
onClose: _propTypes["default"].func,
|
90
|
-
/** Boolean that determines whether or not the css transition is occuring. */
|
91
|
-
isTransitioning: _propTypes["default"].bool,
|
92
|
-
/** Ref that is connected to the button that triggers the overlay state.
|
93
|
-
Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
|
94
|
-
triggerRef: _propTypes["default"].shape({})
|
95
|
-
};
|
96
68
|
OverlayPanel.defaultProps = {
|
97
69
|
size: 'medium'
|
98
70
|
};
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { StoryFn } from '@storybook/react';
|
2
|
+
import { OverlayPanelProps } 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<OverlayPanelProps>;
|
6
|
+
export declare const CustomWidth: StoryFn;
|
7
|
+
export declare const Expandable: StoryFn;
|
8
|
+
export declare const InnerPanel: StoryFn<OverlayPanelProps>;
|
@@ -25,6 +25,7 @@ var _hooks = require("../../hooks");
|
|
25
25
|
var _index = require("../../index");
|
26
26
|
var _images = require("../../utils/devUtils/constants/images");
|
27
27
|
var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
|
28
|
+
var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
|
28
29
|
var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel.mdx"));
|
29
30
|
var _react2 = require("@emotion/react");
|
30
31
|
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); }
|
@@ -67,7 +68,7 @@ var Default = function Default(_ref) {
|
|
67
68
|
var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
|
68
69
|
state = _useOverlayPanelState.state,
|
69
70
|
onClose = _useOverlayPanelState.onClose;
|
70
|
-
var triggerRef = (0, _react.useRef)();
|
71
|
+
var triggerRef = (0, _react.useRef)(null);
|
71
72
|
return (
|
72
73
|
// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
|
73
74
|
// readers when an overlay is open.
|
@@ -96,7 +97,7 @@ var CustomWidth = function CustomWidth() {
|
|
96
97
|
var _useOverlayPanelState2 = (0, _hooks.useOverlayPanelState)(),
|
97
98
|
state = _useOverlayPanelState2.state,
|
98
99
|
onClose = _useOverlayPanelState2.onClose;
|
99
|
-
var triggerRef = (0, _react.useRef)();
|
100
|
+
var triggerRef = (0, _react.useRef)(null);
|
100
101
|
return (
|
101
102
|
// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
|
102
103
|
// readers when an overlay opens.
|
@@ -127,7 +128,7 @@ var Expandable = function Expandable() {
|
|
127
128
|
var _useOverlayPanelState3 = (0, _hooks.useOverlayPanelState)(),
|
128
129
|
state = _useOverlayPanelState3.state,
|
129
130
|
onClose = _useOverlayPanelState3.onClose;
|
130
|
-
var triggerRef = (0, _react.useRef)();
|
131
|
+
var triggerRef = (0, _react.useRef)(null);
|
131
132
|
var _useState = (0, _react.useState)(false),
|
132
133
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
133
134
|
isExpanded = _useState2[0],
|
@@ -384,8 +385,8 @@ var InnerPanel = function InnerPanel(_ref3) {
|
|
384
385
|
var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
|
385
386
|
innerState = _useOverlayPanelState5.state,
|
386
387
|
onCloseInner = _useOverlayPanelState5.onClose;
|
387
|
-
var outerTriggerRef = (0, _react.useRef)();
|
388
|
-
var innerTriggerRef = (0, _react.useRef)();
|
388
|
+
var outerTriggerRef = (0, _react.useRef)(null);
|
389
|
+
var innerTriggerRef = (0, _react.useRef)(null);
|
389
390
|
var _useState5 = (0, _react.useState)(false),
|
390
391
|
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
391
392
|
messagesOpen = _useState6[0],
|
@@ -473,7 +474,7 @@ var InnerPanel = function InnerPanel(_ref3) {
|
|
473
474
|
onClose: toggleMessagesOpen
|
474
475
|
}, (0, _react2.jsx)(_reactStately.Item, {
|
475
476
|
key: "message2",
|
476
|
-
status: "
|
477
|
+
status: _statuses["default"].SUCCESS
|
477
478
|
}, "Z Index higher than inner pannel")))
|
478
479
|
);
|
479
480
|
};
|
@@ -0,0 +1,64 @@
|
|
1
|
+
declare const _default: {
|
2
|
+
container: {
|
3
|
+
position: string;
|
4
|
+
overflowY: string;
|
5
|
+
zIndex: number;
|
6
|
+
top: number;
|
7
|
+
bottom: number;
|
8
|
+
right: string;
|
9
|
+
background: string;
|
10
|
+
alignItems: string;
|
11
|
+
justifyContent: string;
|
12
|
+
borderLeft: string;
|
13
|
+
borderLeftColor: string;
|
14
|
+
boxShadow: string;
|
15
|
+
display: string;
|
16
|
+
p: string;
|
17
|
+
transition: string;
|
18
|
+
maxWidth: string;
|
19
|
+
'&.is-small': {
|
20
|
+
width: string;
|
21
|
+
};
|
22
|
+
'&.is-medium': {
|
23
|
+
width: string;
|
24
|
+
};
|
25
|
+
'&.is-large': {
|
26
|
+
width: string;
|
27
|
+
};
|
28
|
+
'&.is-full': {
|
29
|
+
width: string;
|
30
|
+
};
|
31
|
+
'&.is-open.is-transitioning': {
|
32
|
+
right: number;
|
33
|
+
};
|
34
|
+
'&.is-open-no-transition': {
|
35
|
+
right: number;
|
36
|
+
};
|
37
|
+
};
|
38
|
+
body: {
|
39
|
+
display: string;
|
40
|
+
height: string;
|
41
|
+
width: string;
|
42
|
+
'&.is-open': {
|
43
|
+
display: string;
|
44
|
+
};
|
45
|
+
};
|
46
|
+
innerPanel: {
|
47
|
+
position: string;
|
48
|
+
zIndex: number;
|
49
|
+
bottom: number;
|
50
|
+
right: number;
|
51
|
+
background: string;
|
52
|
+
display: string;
|
53
|
+
alignItems: string;
|
54
|
+
justifyContent: string;
|
55
|
+
boxShadow: string;
|
56
|
+
minWidth: string;
|
57
|
+
maxWidth: string;
|
58
|
+
width: string;
|
59
|
+
height: string;
|
60
|
+
p: string;
|
61
|
+
backgroundColor: string;
|
62
|
+
};
|
63
|
+
};
|
64
|
+
export default _default;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './OverlayPanel';
|
@@ -9,7 +9,7 @@ interface UseOverlayPanelStateProps {
|
|
9
9
|
export interface UseOverlayPanelReturnState extends OverlayTriggerState {
|
10
10
|
isTransitioning?: boolean;
|
11
11
|
}
|
12
|
-
interface UseOverlayPanelStateReturnOnClose {
|
12
|
+
export interface UseOverlayPanelStateReturnOnClose {
|
13
13
|
(stateProp?: OverlayTriggerState, triggerRef?: React.RefObject<HTMLButtonElement>, onCloseProp?: VoidFunction): void;
|
14
14
|
}
|
15
15
|
interface UseOverlayPanelStateReturnValues {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { IconButtonProps as ThemeUIIconButtonProps, ThemeUICSSObject } from 'theme-ui';
|
2
2
|
import { TestingAttributes } from './shared/test';
|
3
3
|
import { IconTypeExtended } from './icon';
|
4
|
-
import { HoverProps, PressProps } from './shared';
|
4
|
+
import { HoverProps, IconSize, PressProps } from './shared';
|
5
5
|
export interface IconButtonProps extends ThemeUIIconButtonProps, TestingAttributes, PressProps, HoverProps {
|
6
6
|
/** The styling variation of the element. */
|
7
7
|
variant?: string | undefined;
|
@@ -18,4 +18,5 @@ export interface IconButtonProps extends ThemeUIIconButtonProps, TestingAttribut
|
|
18
18
|
isDisabled?: boolean;
|
19
19
|
/** Inline styling prop */
|
20
20
|
sx?: ThemeUICSSObject;
|
21
|
+
size?: IconSize;
|
21
22
|
}
|
package/lib/cjs/types/index.d.ts
CHANGED
@@ -2,6 +2,7 @@ export * from './badge';
|
|
2
2
|
export * from './box';
|
3
3
|
export * from './bracket';
|
4
4
|
export * from './button';
|
5
|
+
export * from './buttonBar';
|
5
6
|
export * from './card';
|
6
7
|
export * from './fieldHelperText';
|
7
8
|
export * from './icon';
|
@@ -11,6 +12,7 @@ export * from './item';
|
|
11
12
|
export * from './link';
|
12
13
|
export * from './listItem';
|
13
14
|
export * from './loader';
|
15
|
+
export * from './overlayPanel';
|
14
16
|
export * from './popoverContainer';
|
15
17
|
export * from './separator';
|
16
18
|
export * from './shared';
|
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;
|
3
|
+
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21;
|
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");
|
@@ -51,8 +51,19 @@ _forEachInstanceProperty(_context4 = _Object$keys(_button)).call(_context4, func
|
|
51
51
|
}
|
52
52
|
});
|
53
53
|
});
|
54
|
+
var _buttonBar = require("./buttonBar");
|
55
|
+
_forEachInstanceProperty(_context5 = _Object$keys(_buttonBar)).call(_context5, function (key) {
|
56
|
+
if (key === "default" || key === "__esModule") return;
|
57
|
+
if (key in exports && exports[key] === _buttonBar[key]) return;
|
58
|
+
_Object$defineProperty(exports, key, {
|
59
|
+
enumerable: true,
|
60
|
+
get: function get() {
|
61
|
+
return _buttonBar[key];
|
62
|
+
}
|
63
|
+
});
|
64
|
+
});
|
54
65
|
var _card = require("./card");
|
55
|
-
_forEachInstanceProperty(
|
66
|
+
_forEachInstanceProperty(_context6 = _Object$keys(_card)).call(_context6, function (key) {
|
56
67
|
if (key === "default" || key === "__esModule") return;
|
57
68
|
if (key in exports && exports[key] === _card[key]) return;
|
58
69
|
_Object$defineProperty(exports, key, {
|
@@ -63,7 +74,7 @@ _forEachInstanceProperty(_context5 = _Object$keys(_card)).call(_context5, functi
|
|
63
74
|
});
|
64
75
|
});
|
65
76
|
var _fieldHelperText = require("./fieldHelperText");
|
66
|
-
_forEachInstanceProperty(
|
77
|
+
_forEachInstanceProperty(_context7 = _Object$keys(_fieldHelperText)).call(_context7, function (key) {
|
67
78
|
if (key === "default" || key === "__esModule") return;
|
68
79
|
if (key in exports && exports[key] === _fieldHelperText[key]) return;
|
69
80
|
_Object$defineProperty(exports, key, {
|
@@ -74,7 +85,7 @@ _forEachInstanceProperty(_context6 = _Object$keys(_fieldHelperText)).call(_conte
|
|
74
85
|
});
|
75
86
|
});
|
76
87
|
var _icon = require("./icon");
|
77
|
-
_forEachInstanceProperty(
|
88
|
+
_forEachInstanceProperty(_context8 = _Object$keys(_icon)).call(_context8, function (key) {
|
78
89
|
if (key === "default" || key === "__esModule") return;
|
79
90
|
if (key in exports && exports[key] === _icon[key]) return;
|
80
91
|
_Object$defineProperty(exports, key, {
|
@@ -85,7 +96,7 @@ _forEachInstanceProperty(_context7 = _Object$keys(_icon)).call(_context7, functi
|
|
85
96
|
});
|
86
97
|
});
|
87
98
|
var _iconBadge = require("./iconBadge");
|
88
|
-
_forEachInstanceProperty(
|
99
|
+
_forEachInstanceProperty(_context9 = _Object$keys(_iconBadge)).call(_context9, function (key) {
|
89
100
|
if (key === "default" || key === "__esModule") return;
|
90
101
|
if (key in exports && exports[key] === _iconBadge[key]) return;
|
91
102
|
_Object$defineProperty(exports, key, {
|
@@ -96,7 +107,7 @@ _forEachInstanceProperty(_context8 = _Object$keys(_iconBadge)).call(_context8, f
|
|
96
107
|
});
|
97
108
|
});
|
98
109
|
var _iconButton = require("./iconButton");
|
99
|
-
_forEachInstanceProperty(
|
110
|
+
_forEachInstanceProperty(_context10 = _Object$keys(_iconButton)).call(_context10, function (key) {
|
100
111
|
if (key === "default" || key === "__esModule") return;
|
101
112
|
if (key in exports && exports[key] === _iconButton[key]) return;
|
102
113
|
_Object$defineProperty(exports, key, {
|
@@ -107,7 +118,7 @@ _forEachInstanceProperty(_context9 = _Object$keys(_iconButton)).call(_context9,
|
|
107
118
|
});
|
108
119
|
});
|
109
120
|
var _item = require("./item");
|
110
|
-
_forEachInstanceProperty(
|
121
|
+
_forEachInstanceProperty(_context11 = _Object$keys(_item)).call(_context11, function (key) {
|
111
122
|
if (key === "default" || key === "__esModule") return;
|
112
123
|
if (key in exports && exports[key] === _item[key]) return;
|
113
124
|
_Object$defineProperty(exports, key, {
|
@@ -118,7 +129,7 @@ _forEachInstanceProperty(_context10 = _Object$keys(_item)).call(_context10, func
|
|
118
129
|
});
|
119
130
|
});
|
120
131
|
var _link = require("./link");
|
121
|
-
_forEachInstanceProperty(
|
132
|
+
_forEachInstanceProperty(_context12 = _Object$keys(_link)).call(_context12, function (key) {
|
122
133
|
if (key === "default" || key === "__esModule") return;
|
123
134
|
if (key in exports && exports[key] === _link[key]) return;
|
124
135
|
_Object$defineProperty(exports, key, {
|
@@ -129,7 +140,7 @@ _forEachInstanceProperty(_context11 = _Object$keys(_link)).call(_context11, func
|
|
129
140
|
});
|
130
141
|
});
|
131
142
|
var _listItem = require("./listItem");
|
132
|
-
_forEachInstanceProperty(
|
143
|
+
_forEachInstanceProperty(_context13 = _Object$keys(_listItem)).call(_context13, function (key) {
|
133
144
|
if (key === "default" || key === "__esModule") return;
|
134
145
|
if (key in exports && exports[key] === _listItem[key]) return;
|
135
146
|
_Object$defineProperty(exports, key, {
|
@@ -140,7 +151,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_listItem)).call(_context12,
|
|
140
151
|
});
|
141
152
|
});
|
142
153
|
var _loader = require("./loader");
|
143
|
-
_forEachInstanceProperty(
|
154
|
+
_forEachInstanceProperty(_context14 = _Object$keys(_loader)).call(_context14, function (key) {
|
144
155
|
if (key === "default" || key === "__esModule") return;
|
145
156
|
if (key in exports && exports[key] === _loader[key]) return;
|
146
157
|
_Object$defineProperty(exports, key, {
|
@@ -150,8 +161,19 @@ _forEachInstanceProperty(_context13 = _Object$keys(_loader)).call(_context13, fu
|
|
150
161
|
}
|
151
162
|
});
|
152
163
|
});
|
164
|
+
var _overlayPanel = require("./overlayPanel");
|
165
|
+
_forEachInstanceProperty(_context15 = _Object$keys(_overlayPanel)).call(_context15, function (key) {
|
166
|
+
if (key === "default" || key === "__esModule") return;
|
167
|
+
if (key in exports && exports[key] === _overlayPanel[key]) return;
|
168
|
+
_Object$defineProperty(exports, key, {
|
169
|
+
enumerable: true,
|
170
|
+
get: function get() {
|
171
|
+
return _overlayPanel[key];
|
172
|
+
}
|
173
|
+
});
|
174
|
+
});
|
153
175
|
var _popoverContainer = require("./popoverContainer");
|
154
|
-
_forEachInstanceProperty(
|
176
|
+
_forEachInstanceProperty(_context16 = _Object$keys(_popoverContainer)).call(_context16, function (key) {
|
155
177
|
if (key === "default" || key === "__esModule") return;
|
156
178
|
if (key in exports && exports[key] === _popoverContainer[key]) return;
|
157
179
|
_Object$defineProperty(exports, key, {
|
@@ -162,7 +184,7 @@ _forEachInstanceProperty(_context14 = _Object$keys(_popoverContainer)).call(_con
|
|
162
184
|
});
|
163
185
|
});
|
164
186
|
var _separator = require("./separator");
|
165
|
-
_forEachInstanceProperty(
|
187
|
+
_forEachInstanceProperty(_context17 = _Object$keys(_separator)).call(_context17, function (key) {
|
166
188
|
if (key === "default" || key === "__esModule") return;
|
167
189
|
if (key in exports && exports[key] === _separator[key]) return;
|
168
190
|
_Object$defineProperty(exports, key, {
|
@@ -173,7 +195,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_separator)).call(_context15,
|
|
173
195
|
});
|
174
196
|
});
|
175
197
|
var _shared = require("./shared");
|
176
|
-
_forEachInstanceProperty(
|
198
|
+
_forEachInstanceProperty(_context18 = _Object$keys(_shared)).call(_context18, function (key) {
|
177
199
|
if (key === "default" || key === "__esModule") return;
|
178
200
|
if (key in exports && exports[key] === _shared[key]) return;
|
179
201
|
_Object$defineProperty(exports, key, {
|
@@ -184,7 +206,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_shared)).call(_context16, fu
|
|
184
206
|
});
|
185
207
|
});
|
186
208
|
var _table = require("./table");
|
187
|
-
_forEachInstanceProperty(
|
209
|
+
_forEachInstanceProperty(_context19 = _Object$keys(_table)).call(_context19, function (key) {
|
188
210
|
if (key === "default" || key === "__esModule") return;
|
189
211
|
if (key in exports && exports[key] === _table[key]) return;
|
190
212
|
_Object$defineProperty(exports, key, {
|
@@ -195,7 +217,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_table)).call(_context17, fun
|
|
195
217
|
});
|
196
218
|
});
|
197
219
|
var _text = require("./text");
|
198
|
-
_forEachInstanceProperty(
|
220
|
+
_forEachInstanceProperty(_context20 = _Object$keys(_text)).call(_context20, function (key) {
|
199
221
|
if (key === "default" || key === "__esModule") return;
|
200
222
|
if (key in exports && exports[key] === _text[key]) return;
|
201
223
|
_Object$defineProperty(exports, key, {
|
@@ -206,7 +228,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_text)).call(_context18, func
|
|
206
228
|
});
|
207
229
|
});
|
208
230
|
var _tooltipTrigger = require("./tooltipTrigger");
|
209
|
-
_forEachInstanceProperty(
|
231
|
+
_forEachInstanceProperty(_context21 = _Object$keys(_tooltipTrigger)).call(_context21, function (key) {
|
210
232
|
if (key === "default" || key === "__esModule") return;
|
211
233
|
if (key in exports && exports[key] === _tooltipTrigger[key]) return;
|
212
234
|
_Object$defineProperty(exports, key, {
|
@@ -0,0 +1,23 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { OverlayTriggerState } from 'react-stately';
|
3
|
+
import { ThemeUICSSObject } from 'theme-ui';
|
4
|
+
import { UseOverlayPanelStateReturnOnClose } from '../hooks/useOverlayPanelState/useOverlayPanelState';
|
5
|
+
import { TestingAttributes } from './shared/test';
|
6
|
+
import { BoxProps } from './box';
|
7
|
+
import { PanelSize } from './shared';
|
8
|
+
export interface OverlayPanelProps extends BoxProps, TestingAttributes {
|
9
|
+
/** Sets the open state of the menu. */
|
10
|
+
isOpen?: boolean;
|
11
|
+
/** Sets the size of the overlay panel. */
|
12
|
+
size?: PanelSize;
|
13
|
+
/** Callback function that runs when the esc key is used to close the OverlayPanel. */
|
14
|
+
onClose?: UseOverlayPanelStateReturnOnClose;
|
15
|
+
/** Boolean that determines whether or not the css transition is occuring. */
|
16
|
+
isTransitioning?: boolean;
|
17
|
+
/** Ref that is connected to the button that triggers the overlay state.
|
18
|
+
Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
|
19
|
+
triggerRef?: React.RefObject<HTMLButtonElement>;
|
20
|
+
/** Inline styling prop for item */
|
21
|
+
sx?: ThemeUICSSObject;
|
22
|
+
state?: OverlayTriggerState;
|
23
|
+
}
|
@@ -15,6 +15,7 @@ export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom star
|
|
15
15
|
export type Axis = 'top' | 'bottom' | 'left' | 'right';
|
16
16
|
export type SizeAxis = 'width' | 'height';
|
17
17
|
export type PlacementAxis = Axis | 'center';
|
18
|
+
export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
|
18
19
|
type IconTShirtSize = 'xs' | 'sm' | 'md';
|
19
20
|
type pixelSize = 'em' | 'px' | 'rem';
|
20
21
|
export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;
|
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
3
3
|
var _excluded = ["align", "children"];
|
4
4
|
import React, { forwardRef } from 'react';
|
5
|
-
import PropTypes from 'prop-types';
|
6
5
|
import { Box } from '../../index';
|
7
6
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
8
7
|
var ButtonBar = /*#__PURE__*/forwardRef(function (props, ref) {
|
@@ -15,10 +14,6 @@ var ButtonBar = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
15
14
|
variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
|
16
15
|
}, others), children);
|
17
16
|
});
|
18
|
-
ButtonBar.propTypes = {
|
19
|
-
/** Justifies the component's children. */
|
20
|
-
align: PropTypes.oneOf(['left', 'right'])
|
21
|
-
};
|
22
17
|
ButtonBar.defaultProps = {
|
23
18
|
align: 'left'
|
24
19
|
};
|
@@ -88,11 +88,4 @@ test('justify-content left when align prop is excluded', function () {
|
|
88
88
|
getComponent();
|
89
89
|
var element = screen.getByTestId(testId);
|
90
90
|
expect(element).toHaveStyleRule('justify-content', 'left');
|
91
|
-
});
|
92
|
-
test('an error is thrown when align has invalid prop value', function () {
|
93
|
-
expect(function () {
|
94
|
-
return getComponent({
|
95
|
-
align: 'rihgt'
|
96
|
-
});
|
97
|
-
}).toThrow('Failed prop type');
|
98
91
|
});
|
@@ -2,13 +2,10 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
3
3
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
4
4
|
var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef"];
|
5
|
-
import
|
6
|
-
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
5
|
+
import React, { forwardRef } from 'react';
|
7
6
|
import { FocusScope } from 'react-aria';
|
8
|
-
import PropTypes from 'prop-types';
|
9
7
|
import { Box } from '../..';
|
10
|
-
import { useOverlayPanelState, useStatusClasses } from '../../hooks';
|
11
|
-
import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
|
8
|
+
import { useLocalOrForwardRef, useOverlayPanelState, useStatusClasses } from '../../hooks';
|
12
9
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
13
10
|
var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
|
14
11
|
var _props$sx;
|
@@ -23,11 +20,7 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
23
20
|
others = _objectWithoutProperties(props, _excluded);
|
24
21
|
var _useOverlayPanelState = useOverlayPanelState(),
|
25
22
|
onClose = _useOverlayPanelState.onClose;
|
26
|
-
var overlayPanelRef =
|
27
|
-
/* istanbul ignore next */
|
28
|
-
useImperativeHandle(ref, function () {
|
29
|
-
return overlayPanelRef.current;
|
30
|
-
});
|
23
|
+
var overlayPanelRef = useLocalOrForwardRef(ref);
|
31
24
|
|
32
25
|
// this is code to avoid regressions -- implementations that do not use the
|
33
26
|
// useMountTransition hook will not break, because this className gives the
|
@@ -59,27 +52,6 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
59
52
|
className: classNames
|
60
53
|
}, children)));
|
61
54
|
});
|
62
|
-
OverlayPanel.propTypes = {
|
63
|
-
/** Sets the open state of the menu. */
|
64
|
-
isOpen: PropTypes.bool,
|
65
|
-
/** Sets the size of the overlay panel. */
|
66
|
-
size: PropTypes.oneOf(_Object$values(panelSizes)),
|
67
|
-
/** JSX styling that is passed into the component. */
|
68
|
-
sx: PropTypes.shape({
|
69
|
-
width: PropTypes.string
|
70
|
-
}),
|
71
|
-
/** State object that is passed in from the useOverlayPanelState hook */
|
72
|
-
state: PropTypes.shape({
|
73
|
-
close: PropTypes.func
|
74
|
-
}),
|
75
|
-
/** Callback function that runs when the esc key is used to close the OverlayPanel. */
|
76
|
-
onClose: PropTypes.func,
|
77
|
-
/** Boolean that determines whether or not the css transition is occuring. */
|
78
|
-
isTransitioning: PropTypes.bool,
|
79
|
-
/** Ref that is connected to the button that triggers the overlay state.
|
80
|
-
Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
|
81
|
-
triggerRef: PropTypes.shape({})
|
82
|
-
};
|
83
55
|
OverlayPanel.defaultProps = {
|
84
56
|
size: 'medium'
|
85
57
|
};
|
@@ -14,6 +14,7 @@ import { useOverlayPanelState } from '../../hooks';
|
|
14
14
|
import { Avatar, Box, Breadcrumbs, Button, ButtonBar, ColorField, IconButton, ListView, ListViewItem, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
|
15
15
|
import { pingImg } from '../../utils/devUtils/constants/images';
|
16
16
|
import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
|
17
|
+
import statuses from '../../utils/devUtils/constants/statuses';
|
17
18
|
import OverlayPanelReadme from './OverlayPanel.mdx';
|
18
19
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
19
20
|
export default {
|
@@ -53,7 +54,7 @@ export var Default = function Default(_ref) {
|
|
53
54
|
var _useOverlayPanelState = useOverlayPanelState(),
|
54
55
|
state = _useOverlayPanelState.state,
|
55
56
|
onClose = _useOverlayPanelState.onClose;
|
56
|
-
var triggerRef = useRef();
|
57
|
+
var triggerRef = useRef(null);
|
57
58
|
return (
|
58
59
|
// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
|
59
60
|
// readers when an overlay is open.
|
@@ -81,7 +82,7 @@ export var CustomWidth = function CustomWidth() {
|
|
81
82
|
var _useOverlayPanelState2 = useOverlayPanelState(),
|
82
83
|
state = _useOverlayPanelState2.state,
|
83
84
|
onClose = _useOverlayPanelState2.onClose;
|
84
|
-
var triggerRef = useRef();
|
85
|
+
var triggerRef = useRef(null);
|
85
86
|
return (
|
86
87
|
// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
|
87
88
|
// readers when an overlay opens.
|
@@ -111,7 +112,7 @@ export var Expandable = function Expandable() {
|
|
111
112
|
var _useOverlayPanelState3 = useOverlayPanelState(),
|
112
113
|
state = _useOverlayPanelState3.state,
|
113
114
|
onClose = _useOverlayPanelState3.onClose;
|
114
|
-
var triggerRef = useRef();
|
115
|
+
var triggerRef = useRef(null);
|
115
116
|
var _useState = useState(false),
|
116
117
|
_useState2 = _slicedToArray(_useState, 2),
|
117
118
|
isExpanded = _useState2[0],
|
@@ -367,8 +368,8 @@ export var InnerPanel = function InnerPanel(_ref3) {
|
|
367
368
|
var _useOverlayPanelState5 = useOverlayPanelState(),
|
368
369
|
innerState = _useOverlayPanelState5.state,
|
369
370
|
onCloseInner = _useOverlayPanelState5.onClose;
|
370
|
-
var outerTriggerRef = useRef();
|
371
|
-
var innerTriggerRef = useRef();
|
371
|
+
var outerTriggerRef = useRef(null);
|
372
|
+
var innerTriggerRef = useRef(null);
|
372
373
|
var _useState5 = useState(false),
|
373
374
|
_useState6 = _slicedToArray(_useState5, 2),
|
374
375
|
messagesOpen = _useState6[0],
|
@@ -456,7 +457,7 @@ export var InnerPanel = function InnerPanel(_ref3) {
|
|
456
457
|
onClose: toggleMessagesOpen
|
457
458
|
}, ___EmotionJSX(Item, {
|
458
459
|
key: "message2",
|
459
|
-
status:
|
460
|
+
status: statuses.SUCCESS
|
460
461
|
}, "Z Index higher than inner pannel")))
|
461
462
|
);
|
462
463
|
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
package/lib/types/index.js
CHANGED
@@ -2,6 +2,7 @@ export * from './badge';
|
|
2
2
|
export * from './box';
|
3
3
|
export * from './bracket';
|
4
4
|
export * from './button';
|
5
|
+
export * from './buttonBar';
|
5
6
|
export * from './card';
|
6
7
|
export * from './fieldHelperText';
|
7
8
|
export * from './icon';
|
@@ -11,6 +12,7 @@ export * from './item';
|
|
11
12
|
export * from './link';
|
12
13
|
export * from './listItem';
|
13
14
|
export * from './loader';
|
15
|
+
export * from './overlayPanel';
|
14
16
|
export * from './popoverContainer';
|
15
17
|
export * from './separator';
|
16
18
|
export * from './shared';
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|