@pingux/astro 2.45.0-alpha.1 → 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/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/iconButton.d.ts +2 -1
- package/lib/cjs/types/index.d.ts +1 -0
- package/lib/cjs/types/index.js +18 -7
- 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/OverlayPanel/OverlayPanel.js +3 -31
- package/lib/components/OverlayPanel/OverlayPanel.stories.js +7 -6
- package/lib/types/index.js +1 -0
- package/lib/types/overlayPanel.js +1 -0
- package/package.json +1 -1
@@ -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
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;
|
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");
|
@@ -161,8 +161,19 @@ _forEachInstanceProperty(_context14 = _Object$keys(_loader)).call(_context14, fu
|
|
161
161
|
}
|
162
162
|
});
|
163
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
|
+
});
|
164
175
|
var _popoverContainer = require("./popoverContainer");
|
165
|
-
_forEachInstanceProperty(
|
176
|
+
_forEachInstanceProperty(_context16 = _Object$keys(_popoverContainer)).call(_context16, function (key) {
|
166
177
|
if (key === "default" || key === "__esModule") return;
|
167
178
|
if (key in exports && exports[key] === _popoverContainer[key]) return;
|
168
179
|
_Object$defineProperty(exports, key, {
|
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_popoverContainer)).call(_con
|
|
173
184
|
});
|
174
185
|
});
|
175
186
|
var _separator = require("./separator");
|
176
|
-
_forEachInstanceProperty(
|
187
|
+
_forEachInstanceProperty(_context17 = _Object$keys(_separator)).call(_context17, function (key) {
|
177
188
|
if (key === "default" || key === "__esModule") return;
|
178
189
|
if (key in exports && exports[key] === _separator[key]) return;
|
179
190
|
_Object$defineProperty(exports, key, {
|
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_separator)).call(_context16,
|
|
184
195
|
});
|
185
196
|
});
|
186
197
|
var _shared = require("./shared");
|
187
|
-
_forEachInstanceProperty(
|
198
|
+
_forEachInstanceProperty(_context18 = _Object$keys(_shared)).call(_context18, function (key) {
|
188
199
|
if (key === "default" || key === "__esModule") return;
|
189
200
|
if (key in exports && exports[key] === _shared[key]) return;
|
190
201
|
_Object$defineProperty(exports, key, {
|
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_shared)).call(_context17, fu
|
|
195
206
|
});
|
196
207
|
});
|
197
208
|
var _table = require("./table");
|
198
|
-
_forEachInstanceProperty(
|
209
|
+
_forEachInstanceProperty(_context19 = _Object$keys(_table)).call(_context19, function (key) {
|
199
210
|
if (key === "default" || key === "__esModule") return;
|
200
211
|
if (key in exports && exports[key] === _table[key]) return;
|
201
212
|
_Object$defineProperty(exports, key, {
|
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_table)).call(_context18, fun
|
|
206
217
|
});
|
207
218
|
});
|
208
219
|
var _text = require("./text");
|
209
|
-
_forEachInstanceProperty(
|
220
|
+
_forEachInstanceProperty(_context20 = _Object$keys(_text)).call(_context20, function (key) {
|
210
221
|
if (key === "default" || key === "__esModule") return;
|
211
222
|
if (key in exports && exports[key] === _text[key]) return;
|
212
223
|
_Object$defineProperty(exports, key, {
|
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_text)).call(_context19, func
|
|
217
228
|
});
|
218
229
|
});
|
219
230
|
var _tooltipTrigger = require("./tooltipTrigger");
|
220
|
-
_forEachInstanceProperty(
|
231
|
+
_forEachInstanceProperty(_context21 = _Object$keys(_tooltipTrigger)).call(_context21, function (key) {
|
221
232
|
if (key === "default" || key === "__esModule") return;
|
222
233
|
if (key in exports && exports[key] === _tooltipTrigger[key]) return;
|
223
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,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
|
};
|
package/lib/types/index.js
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|