@instructure/ui-toggle-details 10.26.1 → 11.0.1-snapshot-0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (2025-10-06)
+## [11.0.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-0) (2025-10-07)
 
 **Note:** Version bump only for package @instructure/ui-toggle-details
 
@@ -11,6 +11,35 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+# [11.0.0](https://github.com/instructure/instructure-ui/compare/v10.26.0...v11.0.0) (2025-10-06)
+
+
+### Features
+
+* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
+
+
+### BREAKING CHANGES
+
+* **many:** InstUI v11 contains the following breaking changes:
+- React 16 and 17 are no longer supported
+- remove `PropTypes` from all packages
+- remove `CodeEditor` component
+- remove `@instui/theme-registry` package
+- remove `@testable`, `@experimental`, `@hack` decorators
+- InstUISettingsProvider's `as` prop is removed
+- `canvas.use()`, `canvasHighContrast.use()` functions are removed
+- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
+- `variables` field on theme objects are removed
+- remove deprecated props from Table: Row's `isStacked`, Body's
+  `isStacked`, `hover`, and `headers`
+- `Table`'s `caption` prop is now required
+- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
+
+
+
+
+
 # [10.26.0](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.26.0) (2025-10-01)
 
 **Note:** Version bump only for package @instructure/ui-toggle-details

package/es/ToggleDetails/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _ToggleDetails;
+var _dec, _class, _ToggleDetails;
 /*
  * The MIT License (MIT)
  *
@@ -23,29 +23,31 @@ var _dec, _dec2, _class, _ToggleDetails;
  * SOFTWARE.
  */
 
-import { Component } from 'react';
+import { Component, createRef } from 'react';
 import { Button } from '@instructure/ui-buttons';
 import { IconArrowOpenEndSolid, IconArrowOpenDownSolid } from '@instructure/ui-icons';
 import { Expandable } from '@instructure/ui-expandable';
 import { omitProps, pickProps } from '@instructure/ui-react-utils';
 import { isActiveElement } from '@instructure/ui-dom-utils';
-import { testable } from '@instructure/ui-testable';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps, propTypes } from './props';
+import { allowedProps } from './props';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
 ---
 **/
-let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ToggleDetails = class ToggleDetails extends Component {
+let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ToggleDetails = class ToggleDetails extends Component {
   constructor(...args) {
     super(...args);
-    this.ref = null;
-    this._button = null;
-    this.getButtonRef = el => this._button = el;
+    this._buttonNode = null;
+    this.ref = /*#__PURE__*/createRef();
+    // TODO this solution was generated with Gemini, should be tested if it works as fine as before
+    this.setButtonRef = node => {
+      this._buttonNode = node;
+    };
     this.handleToggle = (event, expanded) => {
       if (typeof this.props.onToggle === 'function') {
         this.props.onToggle(event, expanded);
@@ -53,11 +55,11 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     };
   }
   get focused() {
-    return isActiveElement(this._button);
+    return isActiveElement(this._buttonNode);
   }
   focus() {
-    var _this$_button;
-    (_this$_button = this._button) === null || _this$_button === void 0 ? void 0 : _this$_button.focus();
+    var _this$_buttonNode;
+    (_this$_buttonNode = this._buttonNode) === null || _this$_buttonNode === void 0 ? void 0 : _this$_buttonNode.focus();
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -82,8 +84,6 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   }
   renderToggle(toggleProps, expanded) {
     const variant = this.props.variant;
-    // Do not put aria-controls and aria-expanded into the toggle if there
-    // is nothing to open
     const tProps = this.props.children ? toggleProps : {
       onClick: toggleProps.onClick
     };
@@ -98,7 +98,7 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         ...props,
         display: "block",
         textAlign: "start",
-        elementRef: this.getButtonRef,
+        elementRef: this.setButtonRef,
         children: summary
       });
     } else if (props.href) {
@@ -106,7 +106,7 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       return _jsx("a", {
         ...props,
         css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.toggle,
-        ref: this.getButtonRef,
+        ref: this.setButtonRef,
         children: summary
       });
     } else {
@@ -115,7 +115,7 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         ...props,
         type: "button",
         css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle,
-        ref: this.getButtonRef,
+        ref: this.setButtonRef,
         children: summary
       });
     }
@@ -161,15 +161,14 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         var _this$props$styles8;
         return _jsxs("div", {
           css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.toggleDetails,
-          ref: el => {
-            this.ref = el;
-          },
+          ref: this.ref,
+          "data-cid": "ToggleDetails",
           children: [this.renderToggle(getToggleProps(), expanded), this.renderDetails(expanded, getDetailsProps())]
         });
       }
     });
   }
-}, _ToggleDetails.displayName = "ToggleDetails", _ToggleDetails.componentId = 'ToggleDetails', _ToggleDetails.allowedProps = allowedProps, _ToggleDetails.propTypes = propTypes, _ToggleDetails.defaultProps = {
+}, _ToggleDetails.displayName = "ToggleDetails", _ToggleDetails.componentId = 'ToggleDetails', _ToggleDetails.allowedProps = allowedProps, _ToggleDetails.defaultProps = {
   variant: 'default',
   size: 'medium',
   fluidWidth: false,
@@ -178,6 +177,6 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   iconPosition: 'start',
   defaultExpanded: false,
   children: null
-}, _ToggleDetails)) || _class) || _class);
+}, _ToggleDetails)) || _class);
 export default ToggleDetails;
 export { ToggleDetails };

package/es/ToggleDetails/props.js

@@ -22,20 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-import { controllable } from '@instructure/ui-prop-types';
-const propTypes = {
-  variant: PropTypes.oneOf(['default', 'filled']),
-  summary: PropTypes.node.isRequired,
-  expanded: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded'),
-  defaultExpanded: PropTypes.bool,
-  onToggle: PropTypes.func,
-  icon: PropTypes.func,
-  iconExpanded: PropTypes.func,
-  iconPosition: PropTypes.oneOf(['start', 'end']),
-  fluidWidth: PropTypes.bool,
-  children: PropTypes.node,
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
-};
 const allowedProps = ['variant', 'summary', 'expanded', 'defaultExpanded', 'onToggle', 'icon', 'iconExpanded', 'iconPosition', 'fluidWidth', 'children', 'size'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/ToggleGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _ToggleGroup;
+var _dec, _class, _ToggleGroup;
 /*
  * The MIT License (MIT)
  *
@@ -32,8 +32,7 @@ import { isActiveElement } from '@instructure/ui-dom-utils';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { IconArrowOpenEndSolid, IconArrowOpenDownSolid } from '@instructure/ui-icons';
-import { testable } from '@instructure/ui-testable';
-import { allowedProps, propTypes } from './props';
+import { allowedProps } from './props';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -44,7 +43,7 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ToggleGroup = class ToggleGroup extends Component {
+let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ToggleGroup = class ToggleGroup extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -136,6 +135,7 @@ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           borderRadius: "medium",
           background: "primary",
           borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+          "data-cid": "ToggleGroup",
           children: [_jsxs(Flex, {
             padding: this.props.size === 'small' ? 'x-small' : 'small small small x-small',
             children: [_jsx(Flex.Item, {
@@ -153,7 +153,7 @@ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }
     });
   }
-}, _ToggleGroup.displayName = "ToggleGroup", _ToggleGroup.componentId = 'ToggleGroup', _ToggleGroup.allowedProps = allowedProps, _ToggleGroup.propTypes = propTypes, _ToggleGroup.defaultProps = {
+}, _ToggleGroup.displayName = "ToggleGroup", _ToggleGroup.componentId = 'ToggleGroup', _ToggleGroup.allowedProps = allowedProps, _ToggleGroup.defaultProps = {
   size: 'medium',
   icon: IconArrowOpenEndSolid,
   iconExpanded: IconArrowOpenDownSolid,
@@ -161,6 +161,6 @@ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   transition: true,
   as: 'span',
   border: true
-}, _ToggleGroup)) || _class) || _class);
+}, _ToggleGroup)) || _class);
 export default ToggleGroup;
 export { ToggleGroup };

package/es/ToggleGroup/props.js

@@ -22,22 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-import { controllable } from '@instructure/ui-prop-types';
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  summary: PropTypes.node.isRequired,
-  toggleLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  as: PropTypes.elementType,
-  elementRef: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  expanded: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded'),
-  defaultExpanded: PropTypes.bool,
-  onToggle: PropTypes.func,
-  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  iconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  transition: PropTypes.bool,
-  border: PropTypes.bool
-};
 const allowedProps = ['children', 'summary', 'toggleLabel', 'as', 'elementRef', 'size', 'expanded', 'defaultExpanded', 'onToggle', 'icon', 'iconExpanded', 'transition', 'border'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/lib/ToggleDetails/index.js

@@ -13,13 +13,12 @@ var _Expandable = require("@instructure/ui-expandable/lib/Expandable");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _ToggleDetails;
+var _dec, _class, _ToggleDetails;
 /*
  * The MIT License (MIT)
  *
@@ -48,12 +47,15 @@ var _dec, _dec2, _class, _ToggleDetails;
 category: components
 ---
 **/
-let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ToggleDetails = class ToggleDetails extends _react.Component {
+let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ToggleDetails = class ToggleDetails extends _react.Component {
   constructor(...args) {
     super(...args);
-    this.ref = null;
-    this._button = null;
-    this.getButtonRef = el => this._button = el;
+    this._buttonNode = null;
+    this.ref = /*#__PURE__*/(0, _react.createRef)();
+    // TODO this solution was generated with Gemini, should be tested if it works as fine as before
+    this.setButtonRef = node => {
+      this._buttonNode = node;
+    };
     this.handleToggle = (event, expanded) => {
       if (typeof this.props.onToggle === 'function') {
         this.props.onToggle(event, expanded);
@@ -61,11 +63,11 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
     };
   }
   get focused() {
-    return (0, _isActiveElement.isActiveElement)(this._button);
+    return (0, _isActiveElement.isActiveElement)(this._buttonNode);
   }
   focus() {
-    var _this$_button;
-    (_this$_button = this._button) === null || _this$_button === void 0 ? void 0 : _this$_button.focus();
+    var _this$_buttonNode;
+    (_this$_buttonNode = this._buttonNode) === null || _this$_buttonNode === void 0 ? void 0 : _this$_buttonNode.focus();
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -90,8 +92,6 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
   }
   renderToggle(toggleProps, expanded) {
     const variant = this.props.variant;
-    // Do not put aria-controls and aria-expanded into the toggle if there
-    // is nothing to open
     const tProps = this.props.children ? toggleProps : {
       onClick: toggleProps.onClick
     };
@@ -106,7 +106,7 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
         ...props,
         display: "block",
         textAlign: "start",
-        elementRef: this.getButtonRef,
+        elementRef: this.setButtonRef,
         children: summary
       });
     } else if (props.href) {
@@ -114,7 +114,7 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
       return (0, _jsxRuntime.jsx)("a", {
         ...props,
         css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.toggle,
-        ref: this.getButtonRef,
+        ref: this.setButtonRef,
         children: summary
       });
     } else {
@@ -123,7 +123,7 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
         ...props,
         type: "button",
         css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle,
-        ref: this.getButtonRef,
+        ref: this.setButtonRef,
         children: summary
       });
     }
@@ -169,15 +169,14 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
         var _this$props$styles8;
         return (0, _jsxRuntime.jsxs)("div", {
           css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.toggleDetails,
-          ref: el => {
-            this.ref = el;
-          },
+          ref: this.ref,
+          "data-cid": "ToggleDetails",
           children: [this.renderToggle(getToggleProps(), expanded), this.renderDetails(expanded, getDetailsProps())]
         });
       }
     });
   }
-}, _ToggleDetails.displayName = "ToggleDetails", _ToggleDetails.componentId = 'ToggleDetails', _ToggleDetails.allowedProps = _props.allowedProps, _ToggleDetails.propTypes = _props.propTypes, _ToggleDetails.defaultProps = {
+}, _ToggleDetails.displayName = "ToggleDetails", _ToggleDetails.componentId = 'ToggleDetails', _ToggleDetails.allowedProps = _props.allowedProps, _ToggleDetails.defaultProps = {
   variant: 'default',
   size: 'medium',
   fluidWidth: false,
@@ -186,5 +185,5 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
   iconPosition: 'start',
   defaultExpanded: false,
   children: null
-}, _ToggleDetails)) || _class) || _class);
+}, _ToggleDetails)) || _class);
 var _default = exports.default = ToggleDetails;

package/lib/ToggleDetails/props.js

@@ -1,12 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -31,17 +28,4 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  variant: _propTypes.default.oneOf(['default', 'filled']),
-  summary: _propTypes.default.node.isRequired,
-  expanded: (0, _controllable.controllable)(_propTypes.default.bool, 'onToggle', 'defaultExpanded'),
-  defaultExpanded: _propTypes.default.bool,
-  onToggle: _propTypes.default.func,
-  icon: _propTypes.default.func,
-  iconExpanded: _propTypes.default.func,
-  iconPosition: _propTypes.default.oneOf(['start', 'end']),
-  fluidWidth: _propTypes.default.bool,
-  children: _propTypes.default.node,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large'])
-};
 const allowedProps = exports.allowedProps = ['variant', 'summary', 'expanded', 'defaultExpanded', 'onToggle', 'icon', 'iconExpanded', 'iconPosition', 'fluidWidth', 'children', 'size'];

package/lib/ToggleGroup/index.js

@@ -18,13 +18,12 @@ var _Flex = require("@instructure/ui-flex/lib/Flex");
 var _View = require("@instructure/ui-view/lib/View");
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
 var _IconArrowOpenDownSolid = require("@instructure/ui-icons/lib/IconArrowOpenDownSolid.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _props = require("./props");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _ToggleGroup;
+var _dec, _class, _ToggleGroup;
 /*
  * The MIT License (MIT)
  *
@@ -53,7 +52,7 @@ var _dec, _dec2, _class, _ToggleGroup;
 category: components
 ---
 **/
-let ToggleGroup = exports.ToggleGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ToggleGroup = class ToggleGroup extends _react.Component {
+let ToggleGroup = exports.ToggleGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ToggleGroup = class ToggleGroup extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -145,6 +144,7 @@ let ToggleGroup = exports.ToggleGroup = (_dec = (0, _emotion.withStyle)(_styles.
           borderRadius: "medium",
           background: "primary",
           borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+          "data-cid": "ToggleGroup",
           children: [(0, _jsxRuntime.jsxs)(_Flex.Flex, {
             padding: this.props.size === 'small' ? 'x-small' : 'small small small x-small',
             children: [(0, _jsxRuntime.jsx)(_Flex.Flex.Item, {
@@ -162,7 +162,7 @@ let ToggleGroup = exports.ToggleGroup = (_dec = (0, _emotion.withStyle)(_styles.
       }
     });
   }
-}, _ToggleGroup.displayName = "ToggleGroup", _ToggleGroup.componentId = 'ToggleGroup', _ToggleGroup.allowedProps = _props.allowedProps, _ToggleGroup.propTypes = _props.propTypes, _ToggleGroup.defaultProps = {
+}, _ToggleGroup.displayName = "ToggleGroup", _ToggleGroup.componentId = 'ToggleGroup', _ToggleGroup.allowedProps = _props.allowedProps, _ToggleGroup.defaultProps = {
   size: 'medium',
   icon: _IconArrowOpenEndSolid.IconArrowOpenEndSolid,
   iconExpanded: _IconArrowOpenDownSolid.IconArrowOpenDownSolid,
@@ -170,5 +170,5 @@ let ToggleGroup = exports.ToggleGroup = (_dec = (0, _emotion.withStyle)(_styles.
   transition: true,
   as: 'span',
   border: true
-}, _ToggleGroup)) || _class) || _class);
+}, _ToggleGroup)) || _class);
 var _default = exports.default = ToggleGroup;

package/lib/ToggleGroup/props.js

@@ -1,12 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -31,19 +28,4 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  summary: _propTypes.default.node.isRequired,
-  toggleLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-  as: _propTypes.default.elementType,
-  elementRef: _propTypes.default.func,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  expanded: (0, _controllable.controllable)(_propTypes.default.bool, 'onToggle', 'defaultExpanded'),
-  defaultExpanded: _propTypes.default.bool,
-  onToggle: _propTypes.default.func,
-  icon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  iconExpanded: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  transition: _propTypes.default.bool,
-  border: _propTypes.default.bool
-};
 const allowedProps = exports.allowedProps = ['children', 'summary', 'toggleLabel', 'as', 'elementRef', 'size', 'expanded', 'defaultExpanded', 'onToggle', 'icon', 'iconExpanded', 'transition', 'border'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-toggle-details",
-  "version": "10.26.1",
+  "version": "11.0.1-snapshot-0",
   "description": "A styled toggleable, accordion-like component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,34 +23,31 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.1-snapshot-0",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
+    "@instructure/ui-themes": "11.0.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-buttons": "10.26.1",
-    "@instructure/ui-dom-utils": "10.26.1",
-    "@instructure/ui-expandable": "10.26.1",
-    "@instructure/ui-flex": "10.26.1",
-    "@instructure/ui-icons": "10.26.1",
-    "@instructure/ui-motion": "10.26.1",
-    "@instructure/ui-prop-types": "10.26.1",
-    "@instructure/ui-react-utils": "10.26.1",
-    "@instructure/ui-testable": "10.26.1",
-    "@instructure/ui-utils": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "@instructure/uid": "10.26.1",
-    "prop-types": "^15.8.1"
+    "@instructure/emotion": "11.0.1-snapshot-0",
+    "@instructure/shared-types": "11.0.1-snapshot-0",
+    "@instructure/ui-buttons": "11.0.1-snapshot-0",
+    "@instructure/ui-dom-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-expandable": "11.0.1-snapshot-0",
+    "@instructure/ui-flex": "11.0.1-snapshot-0",
+    "@instructure/ui-icons": "11.0.1-snapshot-0",
+    "@instructure/ui-motion": "11.0.1-snapshot-0",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-view": "11.0.1-snapshot-0",
+    "@instructure/uid": "11.0.1-snapshot-0"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"

package/src/ToggleDetails/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component } from 'react'
+import { Component, createRef } from 'react'
 import { Button } from '@instructure/ui-buttons'
 import {
   IconArrowOpenEndSolid,
@@ -31,13 +31,12 @@ import {
 import { Expandable } from '@instructure/ui-expandable'
 import { omitProps, pickProps } from '@instructure/ui-react-utils'
 import { isActiveElement } from '@instructure/ui-dom-utils'
-import { testable } from '@instructure/ui-testable'
 
 import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { ToggleDetailsProps } from './props'
-import { allowedProps, propTypes } from './props'
+import { allowedProps } from './props'
 import type { ExpandableToggleProps } from '@instructure/ui-expandable'
 import type { ViewProps } from '@instructure/ui-view'
 
@@ -47,11 +46,9 @@ category: components
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class ToggleDetails extends Component<ToggleDetailsProps> {
   static readonly componentId = 'ToggleDetails'
   static allowedProps = allowedProps
-  static propTypes = propTypes
 
   static defaultProps = {
     variant: 'default',
@@ -64,15 +61,20 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     children: null
   }
 
-  ref: Element | null = null
-  _button: HTMLElement | null = null
+  _buttonNode: HTMLElement | null = null
+  ref = createRef<HTMLDivElement>()
+
+  // TODO this solution was generated with Gemini, should be tested if it works as fine as before
+  setButtonRef = (node: Element | null) => {
+    this._buttonNode = node as HTMLElement | null
+  }
 
   get focused() {
-    return isActiveElement(this._button)
+    return isActiveElement(this._buttonNode)
   }
 
   focus() {
-    this._button?.focus()
+    this._buttonNode?.focus()
   }
 
   componentDidMount() {
@@ -83,8 +85,6 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     this.props.makeStyles?.()
   }
 
-  getButtonRef = (el: Element | null) => (this._button = el as HTMLElement)
-
   renderSummary(expanded: boolean) {
     const { summary, iconPosition } = this.props
 
@@ -102,8 +102,6 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     expanded: boolean
   ) {
     const { variant } = this.props
-    // Do not put aria-controls and aria-expanded into the toggle if there
-    // is nothing to open
     const tProps = this.props.children
       ? toggleProps
       : { onClick: toggleProps.onClick }
@@ -120,14 +118,14 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
           {...props}
           display="block"
           textAlign="start"
-          elementRef={this.getButtonRef}
+          elementRef={this.setButtonRef}
         >
           {summary}
         </Button>
       )
     } else if (props.href) {
       return (
-        <a {...props} css={this.props.styles?.toggle} ref={this.getButtonRef}>
+        <a {...props} css={this.props.styles?.toggle} ref={this.setButtonRef}>
           {summary}
         </a>
       )
@@ -137,7 +135,7 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
           {...props}
           type="button"
           css={this.props.styles?.toggle}
-          ref={this.getButtonRef}
+          ref={this.setButtonRef}
         >
           {summary}
         </button>
@@ -188,9 +186,8 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
           return (
             <div
               css={this.props.styles?.toggleDetails}
-              ref={(el) => {
-                this.ref = el
-              }}
+              ref={this.ref}
+              data-cid="ToggleDetails"
             >
               {this.renderToggle(getToggleProps(), expanded)}
               {this.renderDetails(expanded, getDetailsProps())}