@instructure/ui-position 8.11.2-snapshot.7 → 8.12.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
+
+**Note:** Version bump only for package @instructure/ui-position
+
 ## [8.11.1](https://github.com/instructure/instructure-ui/compare/v8.11.0...v8.11.1) (2021-10-19)
 
 **Note:** Version bump only for package @instructure/ui-position

package/es/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-position",
-  "version": "8.11.2-snapshot.7+2681e145a",
+  "version": "8.12.0",
   "description": "A component for positioning content with respect to a designated target.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,24 +25,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/emotion": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/shared-types": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-dom-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-portal": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-prop-types": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-react-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-testable": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/uid": "8.11.2-snapshot.7+2681e145a",
+    "@instructure/debounce": "8.12.0",
+    "@instructure/emotion": "8.12.0",
+    "@instructure/shared-types": "8.12.0",
+    "@instructure/ui-dom-utils": "8.12.0",
+    "@instructure/ui-portal": "8.12.0",
+    "@instructure/ui-prop-types": "8.12.0",
+    "@instructure/ui-react-utils": "8.12.0",
+    "@instructure/ui-testable": "8.12.0",
+    "@instructure/ui-utils": "8.12.0",
+    "@instructure/uid": "8.12.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-color-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-test-locator": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-test-utils": "8.11.2-snapshot.7+2681e145a",
-    "@instructure/ui-themes": "8.11.2-snapshot.7+2681e145a"
+    "@instructure/ui-babel-preset": "8.12.0",
+    "@instructure/ui-color-utils": "8.12.0",
+    "@instructure/ui-test-locator": "8.12.0",
+    "@instructure/ui-test-utils": "8.12.0",
+    "@instructure/ui-themes": "8.12.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -50,6 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "2681e145ad469e1396536d3e9eed75a19995eb8a"
+  "sideEffects": false
 }

package/src/Position/README.md

@@ -13,7 +13,7 @@ Codemods are available to automatically update any props that have changed. Howe
 ### Internationalization
 
 `Position` placement can be internationalized for right to left languages. The
-following examples are configured utilizing the [ApplyTextDirection](#ApplyTextDirection)
+following examples are configured utilizing the [TextDirectionContext](#TextDirectionContext)
 component in conjunction with the [mirrorHorizontalPlacement](#mirrorPlacement)
 utility function.
 
@@ -24,9 +24,11 @@ example: true
 ---
 const fpo = lorem.sentence()
 class Example extends React.Component {
+
+static contextType = TextDirectionContext
+
 constructor (props) {
   super(props)
-
   this.state = { placement: 'end', adjusted: 'end' }
 }
 
@@ -51,11 +53,8 @@ handleButtonClick = () => {
     'center end',
     'center start'
   ]
-
   let { placement } = this.state
-
   placement = placements[placements.indexOf(placement) + 1] || placements[0]
-
   this.setState({ placement })
 };
 
@@ -76,7 +75,7 @@ render () {
   } else {
     offset.x = 16
   }
-
+  const rtl = this.context === 'rtl'
   return (
     <View
       as="div"
@@ -84,30 +83,25 @@ render () {
       padding="x-large"
       textAlign="center"
     >
-      <ApplyTextDirection>
-        {(dir, rtl) => (
-          <Position
-            placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
-            offsetX={offset.x}
-            offsetY={offset.y}
-            onPositionChanged={this.handlePositionChanged}
-            renderTarget={
-              <Button color="primary" onClick={this.handleButtonClick}>
-                Change Placement
-              </Button>
-            }
+        <Position
+          placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
+          offsetX={offset.x}
+          offsetY={offset.y}
+          onPositionChanged={this.handlePositionChanged}
+          renderTarget={
+            <Button color="primary" onClick={this.handleButtonClick}>
+              Change Placement
+            </Button>
+          }
+        >
+          <ContextView
+            placement={rtl ? mirrorHorizontalPlacement(adjusted, ' ') : adjusted}
+            maxWidth="22rem" padding="small"
           >
-            <ContextView
-              placement={rtl ? mirrorHorizontalPlacement(adjusted, ' ') : adjusted}
-              maxWidth="22rem" padding="small"
-            >
-              <Heading level="h3">{placement}</Heading>
-              <p>{fpo}</p>
-            </ContextView>
-          </Position>
-        )
-      }
-      </ApplyTextDirection>
+            <Heading level="h3">{placement}</Heading>
+            <p>{fpo}</p>
+          </ContextView>
+        </Position>
     </View>
   )
 }
@@ -126,6 +120,9 @@ example: true
 
 const fpo = lorem.sentence()
 class Example extends React.Component {
+
+  static contextType = TextDirectionContext
+
   constructor (props) {
     super(props)
 
@@ -179,6 +176,7 @@ class Example extends React.Component {
     } else {
       offsetX = 16
     }
+    const rtl = this.context === 'rtl'
 
     return (
     <span>
@@ -188,33 +186,29 @@ class Example extends React.Component {
         padding="x-large"
         textAlign="center"
       >
-        <ApplyTextDirection>
-          {(dir, rtl) => (
-            <Position
-              placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
-              offsetX={offsetX}
-              offsetY={offsetY}
-              mountNode={() => this._mountNode}
-              onPositionChanged={this.handlePositionChanged}
-              renderTarget={
-                <Button color="primary" onClick={this.handleButtonClick}>
-                  Change Placement
-                </Button>
-              }
+          <Position
+            placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
+            offsetX={offsetX}
+            offsetY={offsetY}
+            mountNode={() => this._mountNode}
+            onPositionChanged={this.handlePositionChanged}
+            renderTarget={
+              <Button color="primary" onClick={this.handleButtonClick}>
+                Change Placement
+              </Button>
+            }
+          >
+            <ContextView
+              placement={rtl ? mirrorHorizontalPlacement(adjusted, ' ') : adjusted}
+              maxWidth="20rem"
+              padding="small"
             >
-              <ContextView
-                placement={rtl ? mirrorHorizontalPlacement(adjusted, ' ') : adjusted}
-                maxWidth="20rem"
-                padding="small"
-              >
-                <Heading level="h3">{placement}</Heading>
-                <p>
-                  {fpo}
-                </p>
-              </ContextView>
-            </Position>
-          )}
-        </ApplyTextDirection>
+              <Heading level="h3">{placement}</Heading>
+              <p>
+                {fpo}
+              </p>
+            </ContextView>
+          </Position>
       </View>
       <div
         style={{
@@ -241,9 +235,11 @@ example: true
 const fpo = lorem.paragraphs(7)
 
 class Example extends React.Component {
+
+  static contextType = TextDirectionContext
+
   constructor (props) {
     super(props)
-
     this.state = {
       placement: 'top stretch'
     }
@@ -266,41 +262,37 @@ class Example extends React.Component {
 
   render () {
     const { placement } = this.state
-
+    const rtl = this.context === 'rtl'
     return (
       <div>
-        <ApplyTextDirection>
-          {(dir, rtl) => (
-            <Position
-              placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
-              shouldPositionOverTarget
-              insertAt="top"
-              mountNode={() => this._mountNode}
-              renderTarget={
-                <div
-                  ref={(c) => { this._mountNode = c }}
-                  style={{
-                    overflowY: 'auto',
-                    maxHeight: '10rem',
-                    marginBottom: '1rem',
-                    padding: '0.5rem'
-                  }}
-                >
-                  {fpo}
-                </div>
-              }
+        <Position
+          placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
+          shouldPositionOverTarget
+          insertAt="top"
+          mountNode={() => this._mountNode}
+          renderTarget={
+            <div
+              ref={(c) => { this._mountNode = c }}
+              style={{
+                overflowY: 'auto',
+                maxHeight: '10rem',
+                marginBottom: '1rem',
+                padding: '0.5rem'
+              }}
             >
-              <div
-                style={{
-                  backgroundColor: 'white',
-                  padding: '1rem'
-                }}
-              >
-                <Heading level="h3">{placement}</Heading>
-              </div>
-            </Position>
-          )}
-        </ApplyTextDirection>
+              {fpo}
+            </div>
+          }
+        >
+          <div
+            style={{
+              backgroundColor: 'white',
+              padding: '1rem'
+            }}
+          >
+            <Heading level="h3">{placement}</Heading>
+          </div>
+        </Position>
         <Button color="primary" onClick={this.handleButtonClick}>
           Change Placement
         </Button>

package/LICENSE.md

@@ -1,27 +0,0 @@
----
-title: The MIT License (MIT)
-category: Getting Started
-order: 9
----
-
-# The MIT License (MIT)
-
-Copyright (c) 2015 Instructure, Inc.
-
-**Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions.**
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.