@instructure/ui-editable 10.26.1 → 11.0.0

package/CHANGELOG.md

@@ -3,9 +3,30 @@
 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.0](https://github.com/instructure/instructure-ui/compare/v10.26.0...v11.0.0) (2025-10-06)
 
-**Note:** Version bump only for package @instructure/ui-editable
+
+### 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`
 
 
 

package/es/Editable/index.js

@@ -25,7 +25,7 @@ import { Component } from 'react';
 import { deepEqual } from '@instructure/ui-utils';
 import { logWarn as warn } from '@instructure/console';
 import { requestAnimationFrame } from '@instructure/ui-dom-utils';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 /**
 ---
 category: components
@@ -213,7 +213,6 @@ class Editable extends Component {
   }
 }
 Editable.displayName = "Editable";
-Editable.propTypes = propTypes;
 Editable.allowedProps = allowedProps;
 Editable.defaultProps = {
   readOnly: false,

package/es/Editable/props.js

@@ -22,16 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  mode: PropTypes.oneOf(['view', 'edit']).isRequired,
-  onChangeMode: PropTypes.func.isRequired,
-  children: PropTypes.func,
-  render: PropTypes.func,
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  readOnly: PropTypes.bool,
-  elementRef: PropTypes.func
-};
 const allowedProps = ['mode', 'onChangeMode', 'children', 'render', 'value', 'onChange', 'readOnly', 'elementRef'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/es/InPlaceEdit/index.js

@@ -33,7 +33,7 @@ import { withStyle } from '@instructure/emotion';
 import { View } from '@instructure/ui-view';
 import { Editable } from '../Editable';
 import generateStyle from './styles';
-import { propTypes, allowedProps } from './props';
+import { allowedProps } from './props';
 import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -146,7 +146,7 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_InPlac
       elementRef: this.handleRef
     });
   }
-}, _InPlaceEdit.displayName = "InPlaceEdit", _InPlaceEdit.componentId = 'InPlaceEdit', _InPlaceEdit.propTypes = propTypes, _InPlaceEdit.allowedProps = allowedProps, _InPlaceEdit.defaultProps = {
+}, _InPlaceEdit.displayName = "InPlaceEdit", _InPlaceEdit.componentId = 'InPlaceEdit', _InPlaceEdit.allowedProps = allowedProps, _InPlaceEdit.defaultProps = {
   readOnly: false,
   showFocusRing: true,
   inline: true,

package/es/InPlaceEdit/props.js

@@ -22,19 +22,5 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types';
-const propTypes = {
-  renderViewer: PropTypes.func.isRequired,
-  renderEditor: PropTypes.func.isRequired,
-  renderEditButton: PropTypes.func.isRequired,
-  mode: PropTypes.oneOf(['view', 'edit']).isRequired,
-  onChangeMode: PropTypes.func.isRequired,
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  readOnly: PropTypes.bool,
-  showFocusRing: PropTypes.bool,
-  editButtonPlacement: PropTypes.oneOf(['start', 'end']),
-  inline: PropTypes.bool
-};
 const allowedProps = ['renderViewer', 'renderEditor', 'renderEditButton', 'mode', 'onChangeMode', 'value', 'onChange', 'readOnly', 'showFocusRing', 'editButtonPlacement', 'inline'];
-export { propTypes, allowedProps };
+export { allowedProps };

package/lib/Editable/index.js

@@ -221,7 +221,6 @@ class Editable extends _react.Component {
 }
 exports.Editable = Editable;
 Editable.displayName = "Editable";
-Editable.propTypes = _props2.propTypes;
 Editable.allowedProps = _props2.allowedProps;
 Editable.defaultProps = {
   readOnly: false,

package/lib/Editable/props.js

@@ -1,11 +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"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,14 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  mode: _propTypes.default.oneOf(['view', 'edit']).isRequired,
-  onChangeMode: _propTypes.default.func.isRequired,
-  children: _propTypes.default.func,
-  render: _propTypes.default.func,
-  value: _propTypes.default.any,
-  onChange: _propTypes.default.func,
-  readOnly: _propTypes.default.bool,
-  elementRef: _propTypes.default.func
-};
 const allowedProps = exports.allowedProps = ['mode', 'onChangeMode', 'children', 'render', 'value', 'onChange', 'readOnly', 'elementRef'];

package/lib/InPlaceEdit/index.js

@@ -152,7 +152,7 @@ let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.
       elementRef: this.handleRef
     });
   }
-}, _InPlaceEdit.displayName = "InPlaceEdit", _InPlaceEdit.componentId = 'InPlaceEdit', _InPlaceEdit.propTypes = _props.propTypes, _InPlaceEdit.allowedProps = _props.allowedProps, _InPlaceEdit.defaultProps = {
+}, _InPlaceEdit.displayName = "InPlaceEdit", _InPlaceEdit.componentId = 'InPlaceEdit', _InPlaceEdit.allowedProps = _props.allowedProps, _InPlaceEdit.defaultProps = {
   readOnly: false,
   showFocusRing: true,
   inline: true,

package/lib/InPlaceEdit/props.js

@@ -1,11 +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"));
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -30,17 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  renderViewer: _propTypes.default.func.isRequired,
-  renderEditor: _propTypes.default.func.isRequired,
-  renderEditButton: _propTypes.default.func.isRequired,
-  mode: _propTypes.default.oneOf(['view', 'edit']).isRequired,
-  onChangeMode: _propTypes.default.func.isRequired,
-  value: _propTypes.default.any,
-  onChange: _propTypes.default.func,
-  readOnly: _propTypes.default.bool,
-  showFocusRing: _propTypes.default.bool,
-  editButtonPlacement: _propTypes.default.oneOf(['start', 'end']),
-  inline: _propTypes.default.bool
-};
 const allowedProps = exports.allowedProps = ['renderViewer', 'renderEditor', 'renderEditButton', 'mode', 'onChangeMode', 'value', 'onChange', 'readOnly', 'showFocusRing', 'editButtonPlacement', 'inline'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-editable",
-  "version": "10.26.1",
+  "version": "11.0.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,31 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.0",
+    "@instructure/ui-babel-preset": "11.0.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/console": "10.26.1",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-a11y-content": "10.26.1",
-    "@instructure/ui-buttons": "10.26.1",
-    "@instructure/ui-dom-utils": "10.26.1",
-    "@instructure/ui-flex": "10.26.1",
-    "@instructure/ui-focusable": "10.26.1",
-    "@instructure/ui-icons": "10.26.1",
-    "@instructure/ui-utils": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "prop-types": "^15.8.1"
+    "@instructure/console": "11.0.0",
+    "@instructure/emotion": "11.0.0",
+    "@instructure/shared-types": "11.0.0",
+    "@instructure/ui-a11y-content": "11.0.0",
+    "@instructure/ui-buttons": "11.0.0",
+    "@instructure/ui-dom-utils": "11.0.0",
+    "@instructure/ui-flex": "11.0.0",
+    "@instructure/ui-focusable": "11.0.0",
+    "@instructure/ui-icons": "11.0.0",
+    "@instructure/ui-utils": "11.0.0",
+    "@instructure/ui-view": "11.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18",
-    "react-dom": ">=16.14 <=18"
+    "react": ">=18 <=19",
+    "react-dom": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"

package/src/Editable/index.tsx

@@ -27,7 +27,7 @@ import { deepEqual } from '@instructure/ui-utils'
 import { logWarn as warn } from '@instructure/console'
 import { requestAnimationFrame } from '@instructure/ui-dom-utils'
 
-import { propTypes, allowedProps, EditableState } from './props'
+import { allowedProps, EditableState } from './props'
 import type {
   EditableProps,
   GetContainerProps,
@@ -42,7 +42,6 @@ category: components
 ---
 **/
 class Editable extends Component<EditableProps> {
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     readOnly: false,

package/src/Editable/props.ts

@@ -21,10 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import PropTypes from 'prop-types'
 
-import type { PropValidators } from '@instructure/shared-types'
+import React from 'react'
 
 type GetContainerProps = (props?: Record<string, any>) => {
   ref: React.RefCallback<any>
@@ -112,18 +110,6 @@ type PropKeys = keyof EditableOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type EditableProps = EditableOwnProps
-
-const propTypes: PropValidators<PropKeys> = {
-  mode: PropTypes.oneOf(['view', 'edit']).isRequired,
-  onChangeMode: PropTypes.func.isRequired,
-  children: PropTypes.func,
-  render: PropTypes.func,
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  readOnly: PropTypes.bool,
-  elementRef: PropTypes.func
-}
-
 const allowedProps: AllowedPropKeys = [
   'mode',
   'onChangeMode',
@@ -148,4 +134,4 @@ export type {
   GetEditorProps,
   GetViewerProps
 }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/InPlaceEdit/index.tsx

@@ -36,7 +36,7 @@ import { View } from '@instructure/ui-view'
 import { Editable } from '../Editable'
 import generateStyle from './styles'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { InPlaceEditProps } from './props'
 import type { EditableRenderProps } from '../Editable/props'
 
@@ -48,7 +48,6 @@ category: components
 @withStyle(generateStyle, null)
 class InPlaceEdit extends Component<InPlaceEditProps> {
   static readonly componentId = 'InPlaceEdit'
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     readOnly: false,

package/src/InPlaceEdit/props.ts

@@ -22,9 +22,6 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
-import type { PropValidators } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { EditableProps } from '../Editable/props'
 import React from 'react'
@@ -131,21 +128,6 @@ type InPlaceEditProps = InPlaceEditOwnProps &
   WithStyleProps<null, InPlaceEditStyle>
 
 type InPlaceEditStyle = ComponentStyle<'inPlaceEdit'>
-
-const propTypes: PropValidators<PropKeys> = {
-  renderViewer: PropTypes.func.isRequired,
-  renderEditor: PropTypes.func.isRequired,
-  renderEditButton: PropTypes.func.isRequired,
-  mode: PropTypes.oneOf(['view', 'edit']).isRequired,
-  onChangeMode: PropTypes.func.isRequired,
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  readOnly: PropTypes.bool,
-  showFocusRing: PropTypes.bool,
-  editButtonPlacement: PropTypes.oneOf(['start', 'end']),
-  inline: PropTypes.bool
-}
-
 const allowedProps: AllowedPropKeys = [
   'renderViewer',
   'renderEditor',
@@ -161,4 +143,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { InPlaceEditProps, InPlaceEditStyle }
-export { propTypes, allowedProps }
+export { allowedProps }