@instructure/ui-editable 11.0.1-snapshot-0 → 11.0.1-snapshot-2

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.
 
-## [11.0.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-0) (2025-10-07)
+## [11.0.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-2) (2025-10-10)
 
 **Note:** Version bump only for package @instructure/ui-editable
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-editable",
-  "version": "11.0.1-snapshot-0",
+  "version": "11.0.1-snapshot-2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "11.0.1-snapshot-0",
-    "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
+    "@instructure/ui-axe-check": "11.0.1-snapshot-2",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
@@ -32,17 +32,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.0.1-snapshot-0",
-    "@instructure/emotion": "11.0.1-snapshot-0",
-    "@instructure/shared-types": "11.0.1-snapshot-0",
-    "@instructure/ui-a11y-content": "11.0.1-snapshot-0",
-    "@instructure/ui-buttons": "11.0.1-snapshot-0",
-    "@instructure/ui-dom-utils": "11.0.1-snapshot-0",
-    "@instructure/ui-flex": "11.0.1-snapshot-0",
-    "@instructure/ui-focusable": "11.0.1-snapshot-0",
-    "@instructure/ui-icons": "11.0.1-snapshot-0",
-    "@instructure/ui-utils": "11.0.1-snapshot-0",
-    "@instructure/ui-view": "11.0.1-snapshot-0"
+    "@instructure/console": "11.0.1-snapshot-2",
+    "@instructure/emotion": "11.0.1-snapshot-2",
+    "@instructure/shared-types": "11.0.1-snapshot-2",
+    "@instructure/ui-a11y-content": "11.0.1-snapshot-2",
+    "@instructure/ui-buttons": "11.0.1-snapshot-2",
+    "@instructure/ui-dom-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-flex": "11.0.1-snapshot-2",
+    "@instructure/ui-focusable": "11.0.1-snapshot-2",
+    "@instructure/ui-icons": "11.0.1-snapshot-2",
+    "@instructure/ui-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-view": "11.0.1-snapshot-2"
   },
   "peerDependencies": {
     "react": ">=18 <=19",

package/src/Editable/README.md

@@ -17,207 +17,107 @@ will find examples.
 Using `Editable` gives you complete control, over how in-place editing
 should look.
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-
-      this.state = {
-        mode: props.mode || 'view',
-        value: props.value || '',
-        readOnly: false
-      }
-    }
-
-    renderButton({ isVisible, onClick, onFocus, onBlur, buttonRef }) {
-      if (this.state.readOnly) {
-        return null
-      }
-
-      // To correctly handle focus, always return the Button, but
-      // only visible if isVisible (if you want the UI to work in the standard way)
-      return (
-        <span style={{ opacity: isVisible ? 1 : 0 }}>
-          <Button
-            size="small"
-            margin="0 0 0 x-small"
-            onClick={onClick}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            elementRef={buttonRef}
-          >
-            Do it!
-          </Button>
-        </span>
-      )
-    }
-
-    renderViewer() {
-      return <span>{this.state.value}</span>
-    }
-
-    handleValueChange = (event) => {
-      this.setState({ value: event.target.value })
-    }
-
-    handleModeChange = (newMode) => {
-      this.setState({ mode: newMode })
-    }
-
-    renderEditor({ onBlur, editorRef }) {
-      return (
-        <input
-          ref={editorRef}
+```js
+---
+type: example
+---
+const Example = (props) => {
+  const [mode, setMode] = useState(props.mode || 'view')
+  const [value, setValue] = useState(props.value || '')
+  const [readOnly, setReadOnly] = useState(false)
+
+  const renderButton = ({
+    isVisible,
+    onClick,
+    onFocus,
+    onBlur,
+    buttonRef
+  }) => {
+    if (readOnly) {
+      return null
+    }
+
+    // To correctly handle focus, always return the Button, but
+    // only visible if isVisible (if you want the UI to work in the standard way)
+    return (
+      <span style={{ opacity: isVisible ? 1 : 0 }}>
+        <Button
+          size="small"
+          margin="0 0 0 x-small"
+          onClick={onClick}
+          onFocus={onFocus}
           onBlur={onBlur}
-          value={this.state.value}
-          onChange={this.handleValueChange}
-        />
-      )
-    }
-
-    renderMe = ({
-      mode,
-      getContainerProps,
-      getViewerProps,
-      getEditorProps,
-      getEditButtonProps
-    }) => {
-      return (
-        <View {...getContainerProps()}>
-          {mode === 'view' ? this.renderViewer(getViewerProps()) : null}
-          {mode === 'edit' ? this.renderEditor(getEditorProps()) : null}
-          {this.renderButton(getEditButtonProps())}
-        </View>
-      )
-    }
-
-    onChangeReadOnly = (event) => {
-      this.setState({ readOnly: event.target.checked })
-    }
-
-    render() {
-      return (
-        <View as="div">
-          <View as="div" margin="0 0 small 0">
-            <Checkbox
-              size="small"
-              label="Read Only"
-              checked={this.state.readOnly}
-              onChange={this.onChangeReadOnly}
-            />
-          </View>
-          <Editable
-            mode={this.state.mode}
-            onChangeMode={this.handleModeChange}
-            render={this.renderMe}
-            value={this.state.value}
-            readOnly={this.state.readOnly}
-          />
-        </View>
-      )
-    }
+          elementRef={buttonRef}
+        >
+          Do it!
+        </Button>
+      </span>
+    )
   }
-  render(<Example value="you can edit me" />)
-  ```
-
-- ```js
-  const Example = (props) => {
-    const [mode, setMode] = useState(props.mode || 'view')
-    const [value, setValue] = useState(props.value || '')
-    const [readOnly, setReadOnly] = useState(false)
 
-    const renderButton = ({
-      isVisible,
-      onClick,
-      onFocus,
-      onBlur,
-      buttonRef
-    }) => {
-      if (readOnly) {
-        return null
-      }
-
-      // To correctly handle focus, always return the Button, but
-      // only visible if isVisible (if you want the UI to work in the standard way)
-      return (
-        <span style={{ opacity: isVisible ? 1 : 0 }}>
-          <Button
-            size="small"
-            margin="0 0 0 x-small"
-            onClick={onClick}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            elementRef={buttonRef}
-          >
-            Do it!
-          </Button>
-        </span>
-      )
-    }
-
-    const renderViewer = () => {
-      return <span>{value}</span>
-    }
-
-    const handleValueChange = (event) => {
-      setValue(event.target.value)
-    }
-
-    const handleModeChange = (newMode) => {
-      setMode(newMode)
-    }
+  const renderViewer = () => {
+    return <span>{value}</span>
+  }
 
-    const renderEditor = ({ onBlur, editorRef }) => {
-      return (
-        <input
-          ref={editorRef}
-          onBlur={onBlur}
-          value={value}
-          onChange={handleValueChange}
-        />
-      )
-    }
+  const handleValueChange = (event) => {
+    setValue(event.target.value)
+  }
 
-    const renderMe = ({
-      mode,
-      getContainerProps,
-      getViewerProps,
-      getEditorProps,
-      getEditButtonProps
-    }) => {
-      return (
-        <View {...getContainerProps()}>
-          {mode === 'view' ? renderViewer(getViewerProps()) : null}
-          {mode === 'edit' ? renderEditor(getEditorProps()) : null}
-          {renderButton(getEditButtonProps())}
-        </View>
-      )
-    }
+  const handleModeChange = (newMode) => {
+    setMode(newMode)
+  }
 
-    const onChangeReadOnly = (event) => {
-      setReadOnly(event.target.checked)
-    }
+  const renderEditor = ({ onBlur, editorRef }) => {
+    return (
+      <input
+        ref={editorRef}
+        onBlur={onBlur}
+        value={value}
+        onChange={handleValueChange}
+      />
+    )
+  }
 
+  const renderMe = ({
+    mode,
+    getContainerProps,
+    getViewerProps,
+    getEditorProps,
+    getEditButtonProps
+  }) => {
     return (
-      <View as="div">
-        <View as="div" margin="0 0 small 0">
-          <Checkbox
-            size="small"
-            label="Read Only"
-            checked={readOnly}
-            onChange={onChangeReadOnly}
-          />
-        </View>
-        <Editable
-          mode={mode}
-          onChangeMode={handleModeChange}
-          render={renderMe}
-          value={value}
-          readOnly={readOnly}
-        />
+      <View {...getContainerProps()}>
+        {mode === 'view' ? renderViewer(getViewerProps()) : null}
+        {mode === 'edit' ? renderEditor(getEditorProps()) : null}
+        {renderButton(getEditButtonProps())}
       </View>
     )
   }
 
-  render(<Example value="you can edit me" />)
-  ```
+  const onChangeReadOnly = (event) => {
+    setReadOnly(event.target.checked)
+  }
+
+  return (
+    <View as="div">
+      <View as="div" margin="0 0 small 0">
+        <Checkbox
+          size="small"
+          label="Read Only"
+          checked={readOnly}
+          onChange={onChangeReadOnly}
+        />
+      </View>
+      <Editable
+        mode={mode}
+        onChangeMode={handleModeChange}
+        render={renderMe}
+        value={value}
+        readOnly={readOnly}
+      />
+    </View>
+  )
+}
+
+render(<Example value="you can edit me" />)
+```