@pingux/astro 2.203.0-alpha.0 → 2.205.0-alpha.0

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -31,6 +32,7 @@ var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
 var _react2 = require("@emotion/react");
+var _excluded = ["sx"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -40,10 +42,11 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     isDisabled = props.isDisabled,
     status = props.status,
     helperText = props.helperText,
-    iconProps = props.iconProps,
     hasInlineLoader = props.hasInlineLoader,
     popoverWidth = props.popoverWidth,
-    triggerProps = props.triggerProps;
+    iconProps = props.iconProps,
+    triggerProps = props.triggerProps,
+    triggerProp = props.trigger;
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
@@ -67,7 +70,10 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     state = selectFieldProps.state,
     raTriggerProps = selectFieldProps.triggerProps,
     triggerRef = selectFieldProps.triggerRef;
-  var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
+  var _ref = iconProps || {},
+    iconPropsSx = _ref.sx,
+    restIconProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var triggerNode = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "selectLink",
@@ -87,23 +93,25 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: MenuDown,
+    title: {
+      name: 'Menu Down Icon'
+    },
+    sx: _objectSpread(_objectSpread({}, state.isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null), iconPropsSx)
+  }, restIconProps, {
     title: {
       name: ''
     },
     color: isOnyx ? 'font.link' : 'active',
     size: linkSelectFieldIcon,
     "aria-hidden": "true"
-  }, iconProps, {
-    sx: _objectSpread({
-      transform: state.isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-      transition: 'transform 150ms ease'
-    }, iconProps === null || iconProps === void 0 ? void 0 : iconProps.sx)
   })))), (0, _react2.jsx)(_reactAria.VisuallyHidden, {
     "aria-live": "polite",
     id: helperTextId
   }, helperText));
   return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps, {
-    trigger: trigger
+    trigger: triggerProp || triggerNode
   }));
 });
 LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
@@ -172,8 +180,19 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   onSelectionChange: _propTypes["default"].func,
   /** Display an inline loader inside the select trigger while loading. */
   hasInlineLoader: _propTypes["default"].bool,
+  /**
+   * Props object that is spread directly into the Icon inside the default trigger button.
+   * Supports all IconProps (icon, title, size, color, sx, etc.).
+   * The sx prop is merged with the rotation style.
+   */
+  iconProps: _propTypes["default"].shape({}),
   /** Width of the popover menu. Accepts any valid CSS unit. */
-  popoverWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  popoverWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  /**
+   * A ReactNode that replaces the default Button trigger entirely.
+   * When provided, the local Button element is not rendered.
+   */
+  trigger: _propTypes["default"].node
 }, _statusProp.statusPropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = _objectSpread({
   placeholder: 'Select',

package/lib/cjs/components/LinkSelectField/LinkSelectField.stories.js

@@ -23,7 +23,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithPopoverWidth = exports.WithNoneOption = exports.NoOptionsAvailable = exports.LeftLabel = exports.HelperText = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+exports["default"] = exports.WithPopoverWidth = exports.WithNoneOption = exports.WithIconProps = exports.WithCustomTrigger = exports.NoOptionsAvailable = exports.LeftLabel = exports.HelperText = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
@@ -32,6 +32,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
+var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _users = require("../../api/users");
 var _index = require("../../index");
@@ -94,6 +95,14 @@ var _default = exports["default"] = {
     isRequired: {},
     selectedKey: {
       control: false
+    },
+    iconProps: {
+      control: false,
+      description: 'Props object spread into the Icon inside the default trigger button. Supports icon, title, size, color, sx, and other IconProps. The sx prop is merged with the rotation style.'
+    },
+    trigger: {
+      control: false,
+      description: 'A ReactNode that replaces the default Button trigger entirely. When provided, the local Button element is not rendered.'
     }
   }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   args: {
@@ -352,4 +361,49 @@ WithPopoverWidth.parameters = {
       story: 'The `popoverWidth` prop can be used to set a custom width for the dropdown/popover.'
     }
   }
+};
+var WithIconProps = exports.WithIconProps = function WithIconProps() {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "What's your favorite color?",
+    iconProps: {
+      icon: _EarthIcon["default"],
+      sx: {
+        color: 'accent.40'
+      }
+    }
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+WithIconProps.parameters = {
+  docs: {
+    description: {
+      story: 'Use the `iconProps` prop to customize the icon inside the default trigger button. Here a different icon and custom `sx` color are passed via `iconProps`.'
+    }
+  }
+};
+var WithCustomTrigger = exports.WithCustomTrigger = function WithCustomTrigger() {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "What's your favorite color?",
+    trigger: (0, _react2.jsx)(_index.Button, {
+      variant: "primary"
+    }, "Open menu")
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+WithCustomTrigger.parameters = {
+  docs: {
+    description: {
+      story: 'Use the `trigger` prop to supply a fully custom ReactNode trigger, replacing the default `Button` element entirely.'
+    }
+  }
 };

package/lib/cjs/components/LinkSelectField/LinkSelectField.test.js

@@ -15,6 +15,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -231,23 +232,47 @@ test('passing helper text should display it and correct aria attributes on input
   var helperTextID = helper.getAttribute('id');
   expect(_testWrapper.screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
 });
-test('iconProps are spread to the icon element', function () {
-  var iconTestId = 'custom-icon';
+test('iconProps data-testid is applied to the inner Icon element', function () {
   getComponent({
     iconProps: {
-      'data-testid': iconTestId
+      'data-testid': 'custom-icon',
+      sx: {
+        color: 'red'
+      }
     }
   });
-  expect(_testWrapper.screen.getByTestId(iconTestId)).toBeInTheDocument();
+  var icon = _testWrapper.screen.getByTestId('custom-icon');
+  expect(icon).toBeInTheDocument();
+  expect(icon).toBeInstanceOf(SVGSVGElement);
 });
-test('triggerProps are spread to the trigger button', function () {
+test('iconProps with a custom icon renders the substitute icon without throwing', function () {
   getComponent({
-    triggerProps: {
-      'data-custom': 'custom-trigger'
+    iconProps: {
+      icon: _EarthIcon["default"]
     }
   });
+  // The default trigger button is still present when only iconProps is provided
+  var button = _testWrapper.screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+});
+test('trigger prop replaces the default Button trigger', function () {
+  getComponent({
+    trigger: (0, _react2.jsx)("button", {
+      type: "button",
+      "data-testid": "custom-trigger"
+    }, "Custom")
+  });
+  expect(_testWrapper.screen.getByTestId('custom-trigger')).toBeInTheDocument();
+  // The default Button trigger (identified by its pendo data attribute) should not be rendered
+  expect(document.querySelector('[data-pendo-id="LinkSelectField"]')).not.toBeInTheDocument();
+});
+test('default render is unchanged when neither iconProps nor trigger is provided', function () {
+  getComponent();
+  // The default trigger button is present via getByRole
   var button = _testWrapper.screen.getByRole('button');
-  expect(button).toHaveAttribute('data-custom', 'custom-trigger');
+  expect(button).toBeInTheDocument();
+  // The default button has the pendo ID set by the component
+  expect(document.querySelector('[data-pendo-id="LinkSelectField"]')).toBeInTheDocument();
 });
 
 // Needs to be added to each components test file

package/lib/cjs/components/Stepper/Line.d.ts

@@ -0,0 +1,7 @@
+import { StepStatus } from './Stepper.constants';
+interface LineProps {
+    className?: string;
+    status?: StepStatus;
+}
+declare const Line: ({ className, status, }: LineProps) => import("react/jsx-runtime").JSX.Element;
+export default Line;

package/lib/cjs/components/Stepper/Line.js

@@ -6,9 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Stepper = require("./Stepper.constants");
@@ -29,7 +27,4 @@ var Line = function Line(_ref) {
     className: classNames
   });
 };
-Line.propTypes = {
-  status: _propTypes["default"].oneOf((0, _values["default"])(_Stepper.stepStatuses))
-};
 var _default = exports["default"] = Line;

package/lib/cjs/components/Stepper/Step.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StepStatus } from './Stepper.constants';
+interface StepProps {
+    status?: StepStatus;
+    value?: number;
+    className?: string;
+    orientation?: 'vertical' | 'horizontal';
+}
+declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLElement>>;
+export default Step;

package/lib/cjs/components/Stepper/Step.js

@@ -9,12 +9,10 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckBoldIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckBoldIcon"));
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _Stepper = require("./Stepper.constants");
@@ -23,11 +21,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var
 var COMPLETED = _Stepper.stepStatuses.COMPLETED,
   INACTIVE = _Stepper.stepStatuses.INACTIVE;
 var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var status = props.status,
-    value = props.value,
+  var _props$status = props.status,
+    status = _props$status === void 0 ? INACTIVE : _props$status,
+    _props$value = props.value,
+    value = _props$value === void 0 ? 0 : _props$value,
     className = props.className,
     orientation = props.orientation;
-  var _useHover = (0, _interactions.useHover)(props),
+  var _useHover = (0, _interactions.useHover)({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var stepValue = orientation !== _orientation["default"].VERTICAL && value;
@@ -45,13 +45,5 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }) : stepValue);
 });
-Step.propTypes = {
-  status: _propTypes["default"].oneOf((0, _values["default"])(_Stepper.stepStatuses)),
-  value: _propTypes["default"].number,
-  orientation: _propTypes["default"].oneOf([_orientation["default"].VERTICAL, _orientation["default"].HORIZONTAL])
-};
-Step.defaultProps = {
-  status: INACTIVE,
-  value: 0
-};
+Step.displayName = 'Step';
 var _default = exports["default"] = Step;

package/lib/cjs/components/Stepper/Stepper.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const stepStatuses: {
+    readonly ACTIVE: "active";
+    readonly COMPLETED: "completed";
+    readonly INACTIVE: "inactive";
+};
+export type StepStatus = typeof stepStatuses[keyof typeof stepStatuses];

package/lib/cjs/components/Stepper/Stepper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StepperProps } from '../../types';
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;
+export default Stepper;

package/lib/cjs/components/Stepper/Stepper.js

@@ -23,11 +23,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _list = require("@react-stately/list");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
+var _Tab = _interopRequireDefault(require("../Tab"));
 var _Line = _interopRequireDefault(require("./Line"));
 var _Stepper = require("./Stepper.constants");
 var _Stepper2 = require("./Stepper.styles");
@@ -49,6 +49,15 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     orientation = props.orientation,
     className = props.className,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var stepperRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  if (process.env.NODE_ENV !== 'production' && props.activeStep !== undefined) {
+    var validationError = (0, _isValidPositiveInt["default"])({
+      activeStep: props.activeStep
+    }, 'activeStep', 'Stepper');
+    if (validationError) {
+      console.error(validationError.message);
+    }
+  }
   var state = (0, _list.useSingleSelectListState)(props);
   var getStatus = function getStatus(i) {
     if (i === activeStep) {
@@ -61,7 +70,7 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   var onStepChangeHandler = function onStepChangeHandler(key) {
     if (onStepChange) {
-      onStepChange(+key);
+      onStepChange(Number(key));
     }
   };
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
@@ -107,7 +116,8 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     /* istanbul ignore next */
     var textValue = item && item.value && item.value.label || item.textValue || stepIndex.toString();
-    var container = (0, _react2.jsx)(_.Tab, {
+    var TabItem = _Tab["default"];
+    var container = (0, _react2.jsx)(TabItem, {
       key: stepIndex,
       variant: "stepper.tab",
       tabLineProps: {
@@ -122,13 +132,13 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       content: item.rendered,
       separator: !isFirst && orientation === _orientation["default"].HORIZONTAL && !isFirst && line,
       tooltipTriggerProps: tooltipProps,
-      sx: i !== steps.length - 1 && orientation === _orientation["default"].VERTICAL && _Stepper2.verticalLine
+      sx: i !== steps.length - 1 && orientation === _orientation["default"].VERTICAL ? _Stepper2.verticalLine : undefined
     });
     isFirst = isFirst && !container;
     return container;
   });
   return (0, _react2.jsx)(_.Tabs, (0, _extends2["default"])({
-    ref: ref,
+    ref: stepperRef,
     variant: "stepper.wrapper",
     tabListProps: _objectSpread({
       variant: 'stepper.tabs',
@@ -140,30 +150,6 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     orientation: orientation
   }, others), render);
 });
-Stepper.propTypes = {
-  /**
-   * *For performance reasons,
-  use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-  */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    /** The primary option for the tooltip label. */
-    label: _propTypes["default"].string,
-    children: _propTypes["default"].node,
-    name: _propTypes["default"].string
-  })),
-  /** The number of the current step (using one-based indexing) */
-  activeStep: _isValidPositiveInt["default"],
-  /**
-  * Handler that is called when the current step changes
-  * `(index: number) => void`
-  */
-  onStepChange: _propTypes["default"].func,
-  /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: _propTypes["default"].shape({}),
-  tooltipProps: _propTypes["default"].shape({}),
-  orientation: _propTypes["default"].oneOf(['vertical', 'horizontal'])
-};
 Stepper.displayName = 'Stepper';
 Stepper.defaultProps = {
   orientation: 'horizontal'

package/lib/cjs/components/Stepper/Stepper.stories.js

@@ -16,7 +16,7 @@ var _CreationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/Cre
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _Stepper = _interopRequireDefault(require("./Stepper.mdx"));
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -248,7 +248,7 @@ var Panel = exports.Panel = function Panel() {
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     state = _useOverlayPanelState.state,
     onClose = _useOverlayPanelState.onClose;
-  var triggerRef = _react.useRef < HTMLButtonElement > null;
+  var triggerRef = (0, _react.useRef)(null);
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };