@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.
Files changed (30) hide show
  1. package/lib/cjs/components/ButtonBar/ButtonBar.d.ts +4 -0
  2. package/lib/cjs/components/ButtonBar/ButtonBar.js +0 -5
  3. package/lib/cjs/components/ButtonBar/ButtonBar.stories.d.ts +8 -0
  4. package/lib/cjs/components/ButtonBar/ButtonBar.styles.d.ts +17 -0
  5. package/lib/cjs/components/ButtonBar/ButtonBar.test.d.ts +1 -0
  6. package/lib/cjs/components/ButtonBar/ButtonBar.test.js +0 -7
  7. package/lib/cjs/components/OverlayPanel/OverlayPanel.d.ts +4 -0
  8. package/lib/cjs/components/OverlayPanel/OverlayPanel.js +1 -29
  9. package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.d.ts +8 -0
  10. package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +7 -6
  11. package/lib/cjs/components/OverlayPanel/OverlayPanel.styles.d.ts +64 -0
  12. package/lib/cjs/components/OverlayPanel/OverlayPanel.test.d.ts +1 -0
  13. package/lib/cjs/components/OverlayPanel/index.d.ts +1 -0
  14. package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.d.ts +1 -1
  15. package/lib/cjs/types/buttonBar.d.ts +6 -0
  16. package/lib/cjs/types/buttonBar.js +6 -0
  17. package/lib/cjs/types/iconButton.d.ts +2 -1
  18. package/lib/cjs/types/index.d.ts +2 -0
  19. package/lib/cjs/types/index.js +38 -16
  20. package/lib/cjs/types/overlayPanel.d.ts +23 -0
  21. package/lib/cjs/types/overlayPanel.js +6 -0
  22. package/lib/cjs/types/shared/style.d.ts +1 -0
  23. package/lib/components/ButtonBar/ButtonBar.js +0 -5
  24. package/lib/components/ButtonBar/ButtonBar.test.js +0 -7
  25. package/lib/components/OverlayPanel/OverlayPanel.js +3 -31
  26. package/lib/components/OverlayPanel/OverlayPanel.stories.js +7 -6
  27. package/lib/types/buttonBar.js +1 -0
  28. package/lib/types/index.js +2 -0
  29. package/lib/types/overlayPanel.js +1 -0
  30. package/package.json +1 -1
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ButtonBarProps } from '../../types';
3
+ declare const ButtonBar: React.ForwardRefExoticComponent<ButtonBarProps & React.RefAttributes<HTMLDivElement>>;
4
+ export default ButtonBar;
@@ -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
  });
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { OverlayPanelProps } from '../../types';
3
+ declare const OverlayPanel: React.ForwardRefExoticComponent<OverlayPanelProps & React.RefAttributes<HTMLDivElement>>;
4
+ export default OverlayPanel;
@@ -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, _react.useRef)();
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: "success"
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 { 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 {
@@ -0,0 +1,6 @@
1
+ import { TestingAttributes } from './shared/test';
2
+ import { BoxProps } from './box';
3
+ export interface ButtonBarProps extends BoxProps, TestingAttributes {
4
+ /** Justifies the component's children. */
5
+ align?: 'left' | 'right';
6
+ }
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
+ _Object$defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
@@ -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
  }
@@ -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';
@@ -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(_context5 = _Object$keys(_card)).call(_context5, function (key) {
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(_context6 = _Object$keys(_fieldHelperText)).call(_context6, function (key) {
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(_context7 = _Object$keys(_icon)).call(_context7, function (key) {
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(_context8 = _Object$keys(_iconBadge)).call(_context8, function (key) {
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(_context9 = _Object$keys(_iconButton)).call(_context9, function (key) {
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(_context10 = _Object$keys(_item)).call(_context10, function (key) {
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(_context11 = _Object$keys(_link)).call(_context11, function (key) {
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(_context12 = _Object$keys(_listItem)).call(_context12, function (key) {
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(_context13 = _Object$keys(_loader)).call(_context13, function (key) {
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(_context14 = _Object$keys(_popoverContainer)).call(_context14, function (key) {
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(_context15 = _Object$keys(_separator)).call(_context15, function (key) {
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(_context16 = _Object$keys(_shared)).call(_context16, function (key) {
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(_context17 = _Object$keys(_table)).call(_context17, function (key) {
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(_context18 = _Object$keys(_text)).call(_context18, function (key) {
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(_context19 = _Object$keys(_tooltipTrigger)).call(_context19, function (key) {
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
+ }
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
+ _Object$defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
@@ -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 _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
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 = useRef();
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: "success"
460
+ status: statuses.SUCCESS
460
461
  }, "Z Index higher than inner pannel")))
461
462
  );
462
463
  };
@@ -0,0 +1 @@
1
+ export {};
@@ -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 {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.45.0-alpha.0",
3
+ "version": "2.45.0-alpha.2",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",