@splunk/react-ui 4.17.1 → 4.19.0

package/Image.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 199);
+/******/ 	return __webpack_require__(__webpack_require__.s = 200);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,28 +108,35 @@ module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 135:
+/***/ 136:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/endsWith");
 
 /***/ }),
 
-/***/ 136:
+/***/ 137:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/File");
 
 /***/ }),
 
-/***/ 137:
+/***/ 138:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Message");
 
 /***/ }),
 
-/***/ 199:
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 200:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -148,7 +155,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/endsWith"
-var endsWith_ = __webpack_require__(135);
+var endsWith_ = __webpack_require__(136);
 var endsWith_default = /*#__PURE__*/__webpack_require__.n(endsWith_);
 
 // EXTERNAL MODULE: external "lodash/omit"
@@ -160,7 +167,7 @@ var toLower_ = __webpack_require__(34);
 var toLower_default = /*#__PURE__*/__webpack_require__.n(toLower_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/File"
-var File_ = __webpack_require__(136);
+var File_ = __webpack_require__(137);
 var File_default = /*#__PURE__*/__webpack_require__.n(File_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/format"
@@ -217,7 +224,7 @@ var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Message"
-var Message_ = __webpack_require__(137);
+var Message_ = __webpack_require__(138);
 var Message_default = /*#__PURE__*/__webpack_require__.n(Message_);
 
 // CONCATENATED MODULE: ./src/Image/ImageStyles.ts
@@ -502,13 +509,6 @@ _defineProperty(Image_Image, "defaultProps", defaultProps);
 
 
 
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
 /***/ }),
 
 /***/ 25:

package/JSONTree.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 193);
+/******/ 	return __webpack_require__(__webpack_require__.s = 194);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 113:
+/***/ 114:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isObject");
 
 /***/ }),
 
-/***/ 118:
+/***/ 119:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/fill");
@@ -122,7 +122,7 @@ module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 193:
+/***/ 194:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -145,11 +145,11 @@ var isString_ = __webpack_require__(23);
 var isString_default = /*#__PURE__*/__webpack_require__.n(isString_);
 
 // EXTERNAL MODULE: external "lodash/fill"
-var fill_ = __webpack_require__(118);
+var fill_ = __webpack_require__(119);
 var fill_default = /*#__PURE__*/__webpack_require__.n(fill_);
 
 // EXTERNAL MODULE: external "lodash/isArray"
-var isArray_ = __webpack_require__(73);
+var isArray_ = __webpack_require__(74);
 var isArray_default = /*#__PURE__*/__webpack_require__.n(isArray_);
 
 // EXTERNAL MODULE: external "lodash/isEmpty"
@@ -157,11 +157,11 @@ var isEmpty_ = __webpack_require__(88);
 var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
 
 // EXTERNAL MODULE: external "lodash/isNumber"
-var isNumber_ = __webpack_require__(74);
+var isNumber_ = __webpack_require__(75);
 var isNumber_default = /*#__PURE__*/__webpack_require__.n(isNumber_);
 
 // EXTERNAL MODULE: external "lodash/isObject"
-var isObject_ = __webpack_require__(113);
+var isObject_ = __webpack_require__(114);
 var isObject_default = /*#__PURE__*/__webpack_require__.n(isObject_);
 
 // EXTERNAL MODULE: external "lodash/keys"
@@ -169,7 +169,7 @@ var keys_ = __webpack_require__(9);
 var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
 
 // EXTERNAL MODULE: external "lodash/repeat"
-var repeat_ = __webpack_require__(78);
+var repeat_ = __webpack_require__(80);
 var repeat_default = /*#__PURE__*/__webpack_require__.n(repeat_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -443,34 +443,36 @@ var TreeNode_JSONTreeNode = /*#__PURE__*/function (_Component) {
           expandChildren = _this$props3.expandChildren,
           overflow = _this$props3.overflow,
           path = _this$props3.path;
-      var isPrimitive = !isObject_default()(value); // isObject is true for arrays
-
-      var representation = value; // determine if value should be represented as a simple string
+      var representation = null; // determine if value should be represented as a simple string
       // or as a child node
 
-      if (!isPrimitive) {
-        if (isEmpty_default()(value)) {
-          representation = isArray_default()(value) ? '[]' : '{}';
+      if (!isObject_default()(value)) {
+        // isObject is true for arrays
+        if (typeof value === 'string') {
+          representation = "\"".concat(value, "\"");
+        } else if (typeof value === 'boolean') {
+          representation = value.toString();
+        } else if (value === null) {
+          representation = 'null';
         } else {
-          representation = /*#__PURE__*/external_react_default.a.createElement(JSONTreeNode, {
-            obj: value,
-            path: key !== undefined ? [].concat(_toConsumableArray(path), [key]) : _toConsumableArray(path) // Prevent undefined from being added to path for single value edge-case
-            ,
-            defaultOpen: expandChildren === true,
-            expandChildren: expandChildren,
-            onClickKey: onClickKey,
-            onClickValue: onClickValue,
-            indent: indent,
-            indentLevel: indentLevel + 1,
-            overflow: overflow
-          });
+          representation = value;
         }
-      } else if (typeof value === 'string') {
-        representation = "\"".concat(value, "\"");
-      } else if (typeof value === 'boolean') {
-        representation = value.toString();
-      } else if (value === null) {
-        representation = 'null';
+      } else if (isEmpty_default()(value)) {
+        // isObject is true for arrays
+        representation = isArray_default()(value) ? '[]' : '{}';
+      } else {
+        representation = /*#__PURE__*/external_react_default.a.createElement(JSONTreeNode, {
+          obj: value,
+          path: key !== undefined ? [].concat(_toConsumableArray(path), [key]) : _toConsumableArray(path) // Prevent undefined from being added to path for single value edge-case
+          ,
+          defaultOpen: expandChildren === true,
+          expandChildren: expandChildren,
+          onClickKey: onClickKey,
+          onClickValue: onClickValue,
+          indent: indent,
+          indentLevel: indentLevel + 1,
+          overflow: overflow
+        });
       } // for string or number representations, apply styles and optional interactivity
 
 
@@ -671,21 +673,21 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 73:
+/***/ 74:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isArray");
 
 /***/ }),
 
-/***/ 74:
+/***/ 75:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isNumber");
 
 /***/ }),
 
-/***/ 78:
+/***/ 80:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/repeat");

package/Layer.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 220);
+/******/ 	return __webpack_require__(__webpack_require__.s = 221);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 119:
+/***/ 120:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/pull");
@@ -111,18 +111,18 @@ module.exports = require("lodash/pull");
 /***/ 15:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/EventListener");
+module.exports = require("lodash/includes");
 
 /***/ }),
 
 /***/ 16:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/includes");
+module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
-/***/ 166:
+/***/ 167:
 /***/ (function(module, exports) {
 
 var g;
@@ -156,7 +156,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 220:
+/***/ 221:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -181,7 +181,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/includes"
-var includes_ = __webpack_require__(16);
+var includes_ = __webpack_require__(15);
 var includes_default = /*#__PURE__*/__webpack_require__.n(includes_);
 
 // EXTERNAL MODULE: external "lodash/last"
@@ -189,14 +189,14 @@ var last_ = __webpack_require__(92);
 var last_default = /*#__PURE__*/__webpack_require__.n(last_);
 
 // EXTERNAL MODULE: external "lodash/pull"
-var pull_ = __webpack_require__(119);
+var pull_ = __webpack_require__(120);
 var pull_default = /*#__PURE__*/__webpack_require__.n(pull_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
 var keyboard_ = __webpack_require__(7);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
-var EventListener_ = __webpack_require__(15);
+var EventListener_ = __webpack_require__(16);
 var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 
 // EXTERNAL MODULE: ./src/Layer/LayerStack.tsx
@@ -586,7 +586,7 @@ function LayerStackGlobalProvider(_ref) {
 
 LayerStackGlobalProvider.propTypes = propTypes;
 
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(166)))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(167)))
 
 /***/ })
 

package/Link.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 200);
+/******/ 	return __webpack_require__(__webpack_require__.s = 201);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -115,7 +115,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 200:
+/***/ 201:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/List.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 201);
+/******/ 	return __webpack_require__(__webpack_require__.s = 202);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 201:
+/***/ 202:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -195,6 +195,7 @@ function List_objectWithoutPropertiesLoose(source, excluded) { if (source == nul
 var List_propTypes = {
   children: external_prop_types_default.a.node,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  ordered: external_prop_types_default.a.bool,
   type: external_prop_types_default.a.oneOf(['disc', 'decimal', 'lower-alpha', 'upper-alpha'])
 };
 
@@ -203,15 +204,17 @@ function List(_ref) {
       elementRef = _ref.elementRef,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'disc' : _ref$type,
-      otherProps = List_objectWithoutProperties(_ref, ["children", "elementRef", "type"]);
+      ordered = _ref.ordered,
+      otherProps = List_objectWithoutProperties(_ref, ["children", "elementRef", "type", "ordered"]);
 
   // @docs-props-type ListPropsBase
-  var isUnordered = type === 'disc';
+  if (false) {}
+
   return /*#__PURE__*/external_react_default.a.createElement(StyledOl, List_extends({
-    as: isUnordered ? 'ul' : undefined,
+    as: !ordered && type === 'disc' ? 'ul' : 'ol',
     "data-test": "list",
     ref: elementRef,
-    $type: type
+    $type: ordered || type === 'decimal' ? 'decimal' || false || false : type
   }, otherProps), children);
 }
 

package/MIGRATION.mdx

@@ -0,0 +1,295 @@
+import Link from '@splunk/react-ui/Link';
+import Table from '@splunk/react-ui/Table';
+
+# Migration
+
+This document lists migration guidance for new features and breaking changes.
+
+## 4.18.0
+
+### Deprecated `level="s"` and `level="ss"` and added new `variant` prop for `Heading`
+
+#### Change
+`Heading`'s `level="s"` and `level="ss"` have been deprecated and will be removed in a future major version. A new prop `variant` has been added to `Heading` to add styles from `Typography`'s title variants. 
+
+#### Context
+The values "s" and "ss" aren't as clear as numerical values at describing which `<hX>` HTML tag they correspond to. Instead, use `Heading` `level`(1 - 6) and `variant`(title1 - title6) props to achieve the desired `Heading` style. This separates the concerns of semantics from styling, which allows for better accessibility and design.
+
+#### Migration steps
+It is recommended to update `Heading`'s `level="s"` and `level="ss"` to `level=5` or `level=6` respectively and use the `variant` prop for styling. 
+To keep the same style as `Heading`'s `level="s"` and `level="ss"` follow the below code:
+
+*Enterprise*
+
+`level="s"` styling:
+
+```jsx
+const StyledSHeading = styled(Heading)`
+    font-weight: ${variables.fontWeightSemiBold};
+    font-size: ${variables.fontSize}
+    color: ${pick({
+        dark: variables.gray80,
+        light: variables.gray45,
+    })};
+`;
+
+<StyledSHeading level={4} variant="title4"/>
+```
+
+`level="ss"` styling:
+
+```jsx
+const StyledSSHeading = styled(Heading)`
+    color: ${pick({
+        dark: variables.gray80,
+        light: variables.gray45,
+    })};
+`;
+
+<StyledSHeading level={5} variant="title5"/>
+```
+
+*Prisma*
+
+`level="s"` styling:
+
+```jsx
+const StyledSHeading = styled(Heading)`
+    font-size: ${variables.fontSize};
+    color: ${variables.contentColorDefault};
+`;
+
+<StyledSHeading level={4} variant="title4"/> 
+```
+
+`level="ss"` styling:
+
+```jsx
+No styling is needed. 
+<Heading level="ss"> is equivalent to <StyledSHeading level={5} variant="title5"/>
+```
+
+## 4.17.0
+
+### `Typography` `weight` prop
+
+#### Change
+`Typography` no longer supports numerical values for `weight`.
+
+#### Context
+Supporting both numerical and keyword values creates confusion on which is correct to use.
+Themes has new variables in version 4.17.0 that support all of the weight values in the design system.
+This aligns with the existing API for `variant` in this component.
+
+#### Migration steps
+Convert any usage of a number to the keyword value using the following table based on <Link to="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping" openInNewContext>MDN</Link>: 
+
+<Table>
+    <Table.Head>
+        <Table.HeadCell>Number</Table.HeadCell>
+        <Table.HeadCell>Keyword</Table.HeadCell>
+    </Table.Head>
+    <Table.Body>
+        <Table.Row key={300}>
+            <Table.Cell>{300}</Table.Cell>
+            <Table.Cell>light</Table.Cell>
+        </Table.Row>
+        <Table.Row key={400}>
+            <Table.Cell>{400}</Table.Cell>
+            <Table.Cell>normal</Table.Cell>
+        </Table.Row>
+        <Table.Row key={500}>
+            <Table.Cell>{500}</Table.Cell>
+            <Table.Cell>semiBold</Table.Cell>
+        </Table.Row>
+        <Table.Row key={600}>
+            <Table.Cell>{600}</Table.Cell>
+            <Table.Cell>semiBold</Table.Cell>
+        </Table.Row>
+        <Table.Row key={700}>
+            <Table.Cell>{700}</Table.Cell>
+            <Table.Cell>bold</Table.Cell>
+        </Table.Row>
+           <Table.Row key={800}>
+            <Table.Cell>{800}</Table.Cell>
+            <Table.Cell>extraBold</Table.Cell>
+        </Table.Row>
+           <Table.Row key={900}>
+            <Table.Cell>{900}</Table.Cell>
+            <Table.Cell>heavy</Table.Cell>
+        </Table.Row>
+    </Table.Body>
+</Table>
+
+For example, convert `<Typography as="p" weight={700} />` to `<Typography as="p" weight='bold' />`.
+ 
+## 4.13.0
+
+### Deprecated `Button` `appearance="pill"`
+
+#### Change
+The `Button`'s "pill" appearance is deprecated and will be removed in a future major version.
+
+#### Context
+The “pill” appearance is deprecated due to confusion among designers and engineers between the different uses. To minimize confusion, there will be one primary `Button` rounded style.
+
+#### Migration steps
+Replace all usage of `Button` `appearance="pill"` with `appearance="default"` or use the `Link` component instead.
+
+### Deprecated `placeholder` prop in `Text`, `TextArea`, and `Number` 
+
+#### Change
+The `placeholder` prop in `Text`, `TextArea`, and `Number` is deprecated and will be removed from future major versions.
+
+#### Context
+The `placeholder` prop presents multiple visual and cognitive issues and should not be used.
+
+#### Migration steps
+The `placeholder` prop should be replaced with `ControlGroup`'s `label` or `help`. It is recommended to avoid using a placeholder, but if appropriate the `placeholder` HTML attribute is still supported.
+
+## 4.12.0
+
+### Deprecated `Text`'s `multiline`, `rowsMax`, and `rowsMin` props
+
+#### Change
+`Text`'s `multiline`, `rowsMax`, and `rowsMin` props have been deprecated. Instead use the new `TextArea` component for multiline text input.
+
+#### Context
+`Text` supported two modes -- single or multiline. Each modes had exclusive props: e.g. `maxRows` was only valid with the `multiline` prop.
+This could be confusing and lead to unexpected or unsupported API combinations. Additionally, code in `Text` would only operate in one mode at a time. Moreover, `Text` with the `multiline` prop does not allow line breaks to be inserted with the “enter” key in some browsers.
+
+By separating these modes, we have made it simpler and clearer to decide which component and props to use.
+`Text` should be used for inline text input. `TextArea` should be used for long-form text input.
+This aligns the components with the HTML spec and the Splunk Design System.
+
+#### Migration steps
+Replace instances of `Text` that use the `multiline` prop with the new `TextArea` component.
+
+## 4.11.0
+
+### New `separateStackingContexts` prop for `LayerStackGlobalProvider`
+
+#### Change
+A new prop, `separateStackingContexts`, has been added to `LayerStackGlobalProvider`. `separateStackingContexts` will default to false for backward compatibility but will later default to true in the next major version.
+
+#### Context
+Previously, dropdown menus were stacking on top of and blocking modals and modal-backdrops.
+
+Now with `separateStackingContexts`, 'floating' items such as `Popover` and `Modal` will now be stacked in the order they are opened rather than a fixed order.
+
+#### Migration steps
+To keep the previous behavior, set `separateStackingContexts={false}`.
+
+## 4.8.0
+
+### Deprecated `RadioBar.Option`'s `icon` prop
+
+#### Change
+`RadioBar.Option`'s `icon` prop is deprecated and will be removed in a future major version. 
+
+#### Context
+The `RadioBar.Option` icon should not be used due to misalignment with `Text`.
+
+#### Migration steps
+Replace all usage of `RadioBar.Option`'s `icon` prop with `startAdornment` and/or `endAdornment`.
+
+## 4.7.0
+
+### Deprecated `Message` `appearance="banner"`
+
+#### Change
+`Message`’s `appearance="banner"` option is deprecated and will be removed in a future major version. 
+
+#### Context
+Please use `MessageBar` instead of `Message` with `appearance="banner"`. 
+
+Use `MessageBar` for:
+- System-level messages (such as expired accounts, server outages, account status, etc). 
+- Information, warning, error, or success notifications
+
+Use `Message` or another component for:
+- Feedback of actions taken within the page (such as adding, deleting, or saving an item).
+
+#### Migration steps
+Replace all usage of `Message`’s `appearance="banner"` option to `MessageBar`.
+
+### Deprecated `Message.Link`
+
+#### Change
+`Message.Link` is deprecated and will be removed in a future major version.
+
+### Context
+`MessageBar` now applies the necessary styles to `Link`. 
+
+#### Migration steps
+Replace all usage of `Message.Link` with the `Link` component as a child of the `MessageBar` component. See entries above or our docs for more information on `MessageBar`.
+
+## 4.5.0
+
+### Deprecated `useSyntheticPlaceholder` prop in `Text` and `Number`
+
+#### Change
+The `useSyntheticPlaceholder` prop in `Text` and `Number` is deprecated and will be removed in a future major version.
+
+#### Context
+The `useSyntheticPlaceholder` prop is not needed because we no longer support IE11.
+
+#### Migration steps
+Remove the `useSyntheticPlaceholder` prop. 
+
+### Deprecated `Monogram` `size="xlarge"`
+
+#### Change
+`Monogram`'s `size="xlarge"` is deprecated and will be removed in a future major version.
+
+#### Context
+The `xlarge` option for `Monogram`'s `size` prop is deprecated to align with Figma.
+
+#### Migration steps
+Replace all usage of `xlarge` as the value for `Monogram`'s `size` prop with the values: `small`, `medium`, `large`, or a number.
+
+## 4.0.0
+
+### `Accordion` no longer supports `collapseAll` prop
+
+#### Change
+`Accordion` no longer supports `collapseAll` prop and all panels are allowed to collapse by default.
+
+#### Context
+The user needs to be able to skip over any section with `tab`, which is not possible when the first one is open. This prop is no longer supported due to accessibility issues when set to `false`. 
+
+#### Migration steps
+Remove all usage of `Accordion` `collapseAll`.
+
+### `File` now supports `fullscreen` prop instead of `size="large"`.
+
+#### Change
+`File`’s `size` prop has been removed. Instead, use the `fullscreen` prop. 
+
+#### Context
+If `fullscreen` prop is set, there can only be one `File` component on the page as it will take all files dropped on the page. 
+
+#### Migration steps
+Replace all usage of `size="large"` with `fullscreen` prop. Remove all other usage of `File` `size`.
+
+### `Dropdown` only supports HTMLElement toggle `ref`
+
+#### Change
+`Dropdown` no longer supports passing a toggle that returns a React component instance as `ref`.
+
+#### Context
+Previously, this was causing a warning in React strict mode.
+
+#### Migration steps
+Ensure the toggle `ref` is an `HTMLElement`, `Clickable`, `Button`, or `Link`.
+
+### `Popover` no longer supports `pointerEvents` prop
+
+#### Change
+`Popover`’s `pointerEvents` prop has been removed.
+
+#### Context
+Previously, `Tooltip` closed as soon as a user stopped hovering over the toggle. To allow the `Tooltip` to remain open when hovering/focusing on the toggle or the content area, the `Popover`’s `pointerEvent` prop has been removed. `Tooltip` now has two props: `possibleOpenReasons` and `possibleCloseReasons`, which provide more control over when the `Tooltip` can be opened and closed. 
+
+#### Migration steps
+Replace all usage of `Popover`’s `pointerEvents` prop with `possibleOpenReasons` and `possibleCloseReasons`.