@splunk/react-ui 4.17.1 → 4.18.0

package/DualListbox.js

@@ -255,7 +255,7 @@ var findNextValue = function findNextValue(index, originalValues, removedValues)
 
 
 // EXTERNAL MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
-var scrollIntoViewIfNeeded = __webpack_require__(89);
+var scrollIntoViewIfNeeded = __webpack_require__(88);
 
 // EXTERNAL MODULE: ./src/utils/fuzzyMatch.ts
 var fuzzyMatch = __webpack_require__(56);
@@ -1455,10 +1455,13 @@ function DualListbox(_ref) {
         break;
 
       case 'space':
-        handleSingleSelection(event, {
-          name: name,
-          value: activeValue
-        });
+        if (activeValue != null) {
+          handleSingleSelection(event, {
+            name: name,
+            value: activeValue
+          });
+        }
+
         break;
 
       case 'enter':
@@ -1748,7 +1751,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 89:
+/***/ 88:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/File.js

@@ -122,7 +122,7 @@ module.exports = require("@splunk/react-ui/Progress");
 
 /***/ }),
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/EventListener");
@@ -165,7 +165,7 @@ var isString_ = __webpack_require__(23);
 var isString_default = /*#__PURE__*/__webpack_require__.n(isString_);
 
 // 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: external "@splunk/themes"
@@ -278,7 +278,7 @@ var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes/mixins"
-var mixins_ = __webpack_require__(79);
+var mixins_ = __webpack_require__(80);
 
 // CONCATENATED MODULE: ./src/File/ItemStyles.ts
 
@@ -1169,17 +1169,17 @@ module.exports = require("lodash/debounce");
 
 /***/ }),
 
-/***/ 79:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/mixins");
+module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 8:
+/***/ 80:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/id");
+module.exports = require("@splunk/themes/mixins");
 
 /***/ })
 

package/FormRows.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 179);
+/******/ 	return __webpack_require__(__webpack_require__.s = 180);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -136,7 +136,7 @@ module.exports = require("@splunk/react-ui/Button");
 
 /***/ }),
 
-/***/ 179:
+/***/ 180:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -210,7 +210,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/CloseButton"
-var CloseButton_ = __webpack_require__(90);
+var CloseButton_ = __webpack_require__(89);
 var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
@@ -764,7 +764,7 @@ module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 
-/***/ 90:
+/***/ 89:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/CloseButton");

package/Heading.js

@@ -137,13 +137,13 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
-// EXTERNAL MODULE: external "@splunk/themes"
-var themes_ = __webpack_require__(0);
-
 // EXTERNAL MODULE: external "@splunk/react-ui/Typography"
 var Typography_ = __webpack_require__(134);
 var Typography_default = /*#__PURE__*/__webpack_require__.n(Typography_);
 
+// EXTERNAL MODULE: external "@splunk/themes"
+var themes_ = __webpack_require__(0);
+
 // CONCATENATED MODULE: ./src/Heading/HeadingStyles.ts
 
 
@@ -203,7 +203,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var 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]),
-  level: external_prop_types_default.a.oneOf([1, 2, 3, 4, 's', 'ss', 5, 6])
+  level: external_prop_types_default.a.oneOf([1, 2, 3, 4, 's', 'ss', 5, 6]),
+  variant: external_prop_types_default.a.oneOf(['title1', 'title2', 'title3', 'title4', 'title5', 'title6', 'title7'])
 };
 // h1-h6 use the same intrinsic element type
 var levelToElement = {
@@ -239,6 +240,9 @@ function Heading(_ref) {
 
   var element = levelToElement[level];
   var finalVariant = variant || elementToVariant[element];
+
+  if (false) {}
+
   return /*#__PURE__*/external_react_default.a.createElement(StyledTypography, _extends({
     forwardedAs: element,
     $isSection: isSection(level),

package/JSONTree.js

@@ -153,7 +153,7 @@ var isArray_ = __webpack_require__(73);
 var isArray_default = /*#__PURE__*/__webpack_require__.n(isArray_);
 
 // EXTERNAL MODULE: external "lodash/isEmpty"
-var isEmpty_ = __webpack_require__(88);
+var isEmpty_ = __webpack_require__(87);
 var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
 
 // EXTERNAL MODULE: external "lodash/isNumber"
@@ -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__(79);
 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
 
 
@@ -685,14 +687,14 @@ module.exports = require("lodash/isNumber");
 
 /***/ }),
 
-/***/ 78:
+/***/ 79:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/repeat");
 
 /***/ }),
 
-/***/ 88:
+/***/ 87:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isEmpty");

package/Layer.js

@@ -111,14 +111,14 @@ 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");
 
 /***/ }),
 
@@ -174,18 +174,18 @@ var external_react_ = __webpack_require__(2);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
 // EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(91);
+var external_react_dom_ = __webpack_require__(90);
 
 // EXTERNAL MODULE: external "prop-types"
 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"
-var last_ = __webpack_require__(92);
+var last_ = __webpack_require__(91);
 var last_default = /*#__PURE__*/__webpack_require__.n(last_);
 
 // EXTERNAL MODULE: external "lodash/pull"
@@ -196,11 +196,11 @@ var pull_default = /*#__PURE__*/__webpack_require__.n(pull_);
 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
-var LayerStack = __webpack_require__(93);
+var LayerStack = __webpack_require__(92);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -513,21 +513,21 @@ module.exports = require("@splunk/ui-utils/keyboard");
 
 /***/ }),
 
-/***/ 91:
+/***/ 90:
 /***/ (function(module, exports) {
 
 module.exports = require("react-dom");
 
 /***/ }),
 
-/***/ 92:
+/***/ 91:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/last");
 
 /***/ }),
 
-/***/ 93:
+/***/ 92:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/Link.js

@@ -141,7 +141,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowSquareTopRight"
-var ArrowSquareTopRight_ = __webpack_require__(94);
+var ArrowSquareTopRight_ = __webpack_require__(93);
 var ArrowSquareTopRight_default = /*#__PURE__*/__webpack_require__.n(ArrowSquareTopRight_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/External"
@@ -355,7 +355,7 @@ module.exports = require("@splunk/react-icons/enterprise/External");
 
 /***/ }),
 
-/***/ 94:
+/***/ 93:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowSquareTopRight");

package/List.js

@@ -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`.