@instructure/ui-motion 11.0.2-snapshot-5 → 11.0.2-snapshot-7

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.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v11.0.1...v11.0.2-snapshot-5) (2025-10-30)
+## [11.0.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.0.1...v11.0.2-snapshot-7) (2025-11-03)
 
 **Note:** Version bump only for package @instructure/ui-motion
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-motion",
-  "version": "11.0.2-snapshot-5",
+  "version": "11.0.2-snapshot-7",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,19 +23,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "11.0.2-snapshot-5",
-    "@instructure/ui-themes": "11.0.2-snapshot-5",
+    "@instructure/ui-babel-preset": "11.0.2-snapshot-7",
+    "@instructure/ui-themes": "11.0.2-snapshot-7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.0.2-snapshot-5",
-    "@instructure/shared-types": "11.0.2-snapshot-5",
-    "@instructure/ui-dom-utils": "11.0.2-snapshot-5",
-    "@instructure/ui-react-utils": "11.0.2-snapshot-5",
-    "@instructure/ui-utils": "11.0.2-snapshot-5"
+    "@instructure/emotion": "11.0.2-snapshot-7",
+    "@instructure/shared-types": "11.0.2-snapshot-7",
+    "@instructure/ui-dom-utils": "11.0.2-snapshot-7",
+    "@instructure/ui-react-utils": "11.0.2-snapshot-7",
+    "@instructure/ui-utils": "11.0.2-snapshot-7"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Transition/README.md

@@ -2,47 +2,43 @@
 describes: Transition
 ---
 
-The `Transition` wrapper helps you easily transition elements in and out of
-your UI. The component defaults to the `fade` opacity transition.
+The `Transition` wrapper helps you easily transition elements in and out of your UI. The component defaults to the `fade` opacity transition.
+
+> This component uses `setTimeout()` to fire events when the animations end (the duration is set in the theme).
 
 ```js
 ---
 type: example
 ---
-class Example extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      in: true
-    }
-  }
+const Example = () => {
+  const [isIn, setIsIn] = useState(true)
 
-  handleButtonClick = () => {
-    this.setState((state) => {
-      return {
-        in: !state.in
-      }
-    })
-  };
+  const handleButtonClick = () => {
+    setIsIn((prevIsIn) => !prevIsIn)
+  }
 
-  render () {
-    return (
+  return (
+    <div>
       <div>
-        <div>
-          <Button margin="small 0" size="small" onClick={this.handleButtonClick}>
-            <div aria-live="polite">Fade {this.state.in ? 'Out' : 'In'}</div>
-          </Button>
-        </div>
-        <Transition
-          transitionOnMount
-          in={this.state.in}
-          type="fade"
-        >
-          <Avatar name="Fade" />
-        </Transition>
+        <Button margin="small 0" size="small" onClick={handleButtonClick}>
+          <div aria-live="polite">Fade {isIn ? 'Out' : 'In'}</div>
+        </Button>
       </div>
-    )
-  }
+      <Transition
+        onEnter={()=>console.log('onEnter')}
+        onEntered={()=>console.log('onEntered')}
+        onEntering={()=>console.log('onEntering')}
+        onExit={()=>console.log('onExit')}
+        onExited={()=>console.log('onExited')}
+        onExiting={()=>console.log('onExiting')}
+        onTransition={(to, from)=>console.log('onTransition', to,  from)}
+        in={isIn}
+        type="fade"
+      >
+        <Avatar name="Fade" />
+      </Transition>
+    </div>
+  )
 }
 
 render(<Example />)
@@ -54,41 +50,30 @@ render(<Example />)
 ---
 type: example
 ---
-class Example extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      in: true
-    }
-  }
+const Example = () => {
+  const [isIn, setIsIn] = useState(true)
 
-  handleButtonClick = () => {
-    this.setState((state) => {
-      return {
-        in: !state.in
-      }
-    })
-  };
+  const handleButtonClick = () => {
+    setIsIn((prevIsIn) => !prevIsIn)
+  }
 
-  render () {
-    return (
+  return (
+    <div>
       <div>
-        <div>
-          <Button margin="small 0" size="small" onClick={this.handleButtonClick}>
-            <div aria-live="polite">{this.state.in ? 'Collapse' : 'Expand'}</div>
-          </Button>
-        </div>
-        <Transition
-          transitionOnMount
-          unmountOnExit
-          in={this.state.in}
-          type="scale"
-        >
-          <Avatar name="Collapse" />
-        </Transition>
+        <Button margin="small 0" size="small" onClick={handleButtonClick}>
+          <div aria-live="polite">{isIn ? 'Collapse' : 'Expand'}</div>
+        </Button>
       </div>
-    )
-  }
+      <Transition
+        transitionOnMount
+        unmountOnExit
+        in={isIn}
+        type="scale"
+      >
+        <Avatar name="Collapse" />
+      </Transition>
+    </div>
+  )
 }
 
 render(<Example />)
@@ -102,34 +87,21 @@ internationalized for right to left (rtl) languages. The following example uses
 ---
 type: example
 ---
-class Example extends React.Component {
-
-  static contextType = TextDirectionContext
+const Example = () => {
+  const textDirection = useContext(TextDirectionContext)
+  const [direction, setDirection] = useState('left')
+  const [isIn, setIsIn] = useState(true)
+
+  const handleDirectionChange = (e, value) => {
+    setDirection(value)
+    setIsIn(true)
+  }
 
-  constructor (props) {
-    super(props)
-    this.state = {
-      direction: 'left',
-      in: true
-    }
+  const handleButtonClick = () => {
+    setIsIn((prevIsIn) => !prevIsIn)
   }
 
-  handleDirectionChange = (e, value) => {
-    this.setState({
-      direction: value,
-      in: true
-    })
-  };
-
-  handleButtonClick = () => {
-    this.setState((state) => {
-      return {
-        in: !state.in
-      }
-    })
-  };
-
-  mirrorDirection (direction) {
+  const mirrorDirection = (direction) => {
     const mirror = {
       left: 'right',
       right: 'left',
@@ -137,52 +109,51 @@ class Example extends React.Component {
       down: 'down'
     }
     return mirror[direction]
-  };
-
-  render () {
-    const rtl = this.context === 'rtl'
-    const direction = rtl ? this.mirrorDirection(this.state.direction) : this.state.direction
-    const directionVariants = [
-      {value: 'left', label: 'Start'},
-      {value: 'right', label: 'End'},
-      {value: 'down', label: 'Down'},
-      {value: 'up', label: 'Up'}
-    ]
-    return (
+  }
+
+  const rtl = textDirection === 'rtl'
+  const finalDirection = rtl ? mirrorDirection(direction) : direction
+  const directionVariants = [
+    {value: 'left', label: 'Start'},
+    {value: 'right', label: 'End'},
+    {value: 'down', label: 'Down'},
+    {value: 'up', label: 'Up'}
+  ]
+
+  return (
+    <div>
       <div>
-        <div>
-          <RadioInputGroup
-            onChange={this.handleDirectionChange}
-            name="slideExample"
-            description={<ScreenReaderContent>Select a direction</ScreenReaderContent>}
-            value={direction}
-            variant="toggle"
-          >
-            {directionVariants.map(dir => <RadioInput key={dir.value} value={dir.value} label={dir.label} />)}
-          </RadioInputGroup>
-          <Button size="small" margin="medium none small" onClick={this.handleButtonClick}>
-            <div aria-live="polite">Slide {this.state.in ? 'Out' : 'In'}</div>
-          </Button>
-        </div>
-        <div style={{
-          position: 'relative',
-          overflow: 'hidden',
-          height: '15rem',
-          display: 'flex',
-          justifyContent: (this.state.direction === 'right') ? 'flex-end' : 'flex-start'
-        }}>
-          <Transition
-            transitionOnMount
-            unmountOnExit
-            in={this.state.in}
-            type={`slide-${direction}`}
-          >
-            <Avatar name="Slide" />
-          </Transition>
-        </div>
+        <RadioInputGroup
+          onChange={handleDirectionChange}
+          name="slideExample"
+          description={<ScreenReaderContent>Select a direction</ScreenReaderContent>}
+          value={finalDirection}
+          variant="toggle"
+        >
+          {directionVariants.map(dir => <RadioInput key={dir.value} value={dir.value} label={dir.label} />)}
+        </RadioInputGroup>
+        <Button size="small" margin="medium none small" onClick={handleButtonClick}>
+          <div aria-live="polite">Slide {isIn ? 'Out' : 'In'}</div>
+        </Button>
       </div>
-    )
-  }
+      <div style={{
+        position: 'relative',
+        overflow: 'hidden',
+        height: '15rem',
+        display: 'flex',
+        justifyContent: (direction === 'right') ? 'flex-end' : 'flex-start'
+      }}>
+        <Transition
+          transitionOnMount
+          unmountOnExit
+          in={isIn}
+          type={`slide-${finalDirection}`}
+        >
+          <Avatar name="Slide" />
+        </Transition>
+      </div>
+    </div>
+  )
 }
 
 render(<Example />)