@instructure/ui-position 8.11.2-snapshot.52 → 8.11.2-snapshot.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +17 -17
  2. package/src/Position/README.md +80 -88
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-position",
3
- "version": "8.11.2-snapshot.52+d51a85e4e",
3
+ "version": "8.11.2-snapshot.64+fa07135b5",
4
4
  "description": "A component for positioning content with respect to a designated target.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,24 +25,24 @@
25
25
  "license": "MIT",
26
26
  "dependencies": {
27
27
  "@babel/runtime": "^7.13.10",
28
- "@instructure/debounce": "8.11.2-snapshot.52+d51a85e4e",
29
- "@instructure/emotion": "8.11.2-snapshot.52+d51a85e4e",
30
- "@instructure/shared-types": "8.11.2-snapshot.52+d51a85e4e",
31
- "@instructure/ui-dom-utils": "8.11.2-snapshot.52+d51a85e4e",
32
- "@instructure/ui-portal": "8.11.2-snapshot.52+d51a85e4e",
33
- "@instructure/ui-prop-types": "8.11.2-snapshot.52+d51a85e4e",
34
- "@instructure/ui-react-utils": "8.11.2-snapshot.52+d51a85e4e",
35
- "@instructure/ui-testable": "8.11.2-snapshot.52+d51a85e4e",
36
- "@instructure/ui-utils": "8.11.2-snapshot.52+d51a85e4e",
37
- "@instructure/uid": "8.11.2-snapshot.52+d51a85e4e",
28
+ "@instructure/debounce": "8.11.2-snapshot.64+fa07135b5",
29
+ "@instructure/emotion": "8.11.2-snapshot.64+fa07135b5",
30
+ "@instructure/shared-types": "8.11.2-snapshot.64+fa07135b5",
31
+ "@instructure/ui-dom-utils": "8.11.2-snapshot.64+fa07135b5",
32
+ "@instructure/ui-portal": "8.11.2-snapshot.64+fa07135b5",
33
+ "@instructure/ui-prop-types": "8.11.2-snapshot.64+fa07135b5",
34
+ "@instructure/ui-react-utils": "8.11.2-snapshot.64+fa07135b5",
35
+ "@instructure/ui-testable": "8.11.2-snapshot.64+fa07135b5",
36
+ "@instructure/ui-utils": "8.11.2-snapshot.64+fa07135b5",
37
+ "@instructure/uid": "8.11.2-snapshot.64+fa07135b5",
38
38
  "prop-types": "^15"
39
39
  },
40
40
  "devDependencies": {
41
- "@instructure/ui-babel-preset": "8.11.2-snapshot.52+d51a85e4e",
42
- "@instructure/ui-color-utils": "8.11.2-snapshot.52+d51a85e4e",
43
- "@instructure/ui-test-locator": "8.11.2-snapshot.52+d51a85e4e",
44
- "@instructure/ui-test-utils": "8.11.2-snapshot.52+d51a85e4e",
45
- "@instructure/ui-themes": "8.11.2-snapshot.52+d51a85e4e"
41
+ "@instructure/ui-babel-preset": "8.11.2-snapshot.64+fa07135b5",
42
+ "@instructure/ui-color-utils": "8.11.2-snapshot.64+fa07135b5",
43
+ "@instructure/ui-test-locator": "8.11.2-snapshot.64+fa07135b5",
44
+ "@instructure/ui-test-utils": "8.11.2-snapshot.64+fa07135b5",
45
+ "@instructure/ui-themes": "8.11.2-snapshot.64+fa07135b5"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "react": ">=16.8 <=17"
@@ -51,5 +51,5 @@
51
51
  "access": "public"
52
52
  },
53
53
  "sideEffects": false,
54
- "gitHead": "d51a85e4ec89d499dd5466623fc2efc85e3bddcf"
54
+ "gitHead": "fa07135b5601d3268295e5747f5950721a574d4f"
55
55
  }
package/src/Position/README.md CHANGED
@@ -13,7 +13,7 @@ Codemods are available to automatically update any props that have changed. Howe
13
13
  ### Internationalization
14
14
 
15
15
  `Position` placement can be internationalized for right to left languages. The
16
- following examples are configured utilizing the [ApplyTextDirection](#ApplyTextDirection)
16
+ following examples are configured utilizing the [TextDirectionContext](#TextDirectionContext)
17
17
  component in conjunction with the [mirrorHorizontalPlacement](#mirrorPlacement)
18
18
  utility function.
19
19
 
@@ -24,9 +24,11 @@ example: true
24
24
  ---
25
25
  const fpo = lorem.sentence()
26
26
  class Example extends React.Component {
27
+
28
+ static contextType = TextDirectionContext
29
+
27
30
  constructor (props) {
28
31
  super(props)
29
-
30
32
  this.state = { placement: 'end', adjusted: 'end' }
31
33
  }
32
34
 
@@ -51,11 +53,8 @@ handleButtonClick = () => {
51
53
  'center end',
52
54
  'center start'
53
55
  ]
54
-
55
56
  let { placement } = this.state
56
-
57
57
  placement = placements[placements.indexOf(placement) + 1] || placements[0]
58
-
59
58
  this.setState({ placement })
60
59
  };
61
60
 
@@ -76,7 +75,7 @@ render () {
76
75
  } else {
77
76
  offset.x = 16
78
77
  }
79
-
78
+ const rtl = this.context === 'rtl'
80
79
  return (
81
80
  <View
82
81
  as="div"
@@ -84,30 +83,25 @@ render () {
84
83
  padding="x-large"
85
84
  textAlign="center"
86
85
  >
87
- <ApplyTextDirection>
88
- {(dir, rtl) => (
89
- <Position
90
- placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
91
- offsetX={offset.x}
92
- offsetY={offset.y}
93
- onPositionChanged={this.handlePositionChanged}
94
- renderTarget={
95
- <Button color="primary" onClick={this.handleButtonClick}>
96
- Change Placement
97
- </Button>
98
- }
86
+ <Position
87
+ placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
88
+ offsetX={offset.x}
89
+ offsetY={offset.y}
90
+ onPositionChanged={this.handlePositionChanged}
91
+ renderTarget={
92
+ <Button color="primary" onClick={this.handleButtonClick}>
93
+ Change Placement
94
+ </Button>
95
+ }
96
+ >
97
+ <ContextView
98
+ placement={rtl ? mirrorHorizontalPlacement(adjusted, ' ') : adjusted}
99
+ maxWidth="22rem" padding="small"
99
100
  >
100
- <ContextView
101
- placement={rtl ? mirrorHorizontalPlacement(adjusted, ' ') : adjusted}
102
- maxWidth="22rem" padding="small"
103
- >
104
- <Heading level="h3">{placement}</Heading>
105
- <p>{fpo}</p>
106
- </ContextView>
107
- </Position>
108
- )
109
- }
110
- </ApplyTextDirection>
101
+ <Heading level="h3">{placement}</Heading>
102
+ <p>{fpo}</p>
103
+ </ContextView>
104
+ </Position>
111
105
  </View>
112
106
  )
113
107
  }
@@ -126,6 +120,9 @@ example: true
126
120
 
127
121
  const fpo = lorem.sentence()
128
122
  class Example extends React.Component {
123
+
124
+ static contextType = TextDirectionContext
125
+
129
126
  constructor (props) {
130
127
  super(props)
131
128
 
@@ -179,6 +176,7 @@ class Example extends React.Component {
179
176
  } else {
180
177
  offsetX = 16
181
178
  }
179
+ const rtl = this.context === 'rtl'
182
180
 
183
181
  return (
184
182
  <span>
@@ -188,33 +186,29 @@ class Example extends React.Component {
188
186
  padding="x-large"
189
187
  textAlign="center"
190
188
  >
191
- <ApplyTextDirection>
192
- {(dir, rtl) => (
193
- <Position
194
- placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
195
- offsetX={offsetX}
196
- offsetY={offsetY}
197
- mountNode={() => this._mountNode}
198
- onPositionChanged={this.handlePositionChanged}
199
- renderTarget={
200
- <Button color="primary" onClick={this.handleButtonClick}>
201
- Change Placement
202
- </Button>
203
- }
189
+ <Position
190
+ placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
191
+ offsetX={offsetX}
192
+ offsetY={offsetY}
193
+ mountNode={() => this._mountNode}
194
+ onPositionChanged={this.handlePositionChanged}
195
+ renderTarget={
196
+ <Button color="primary" onClick={this.handleButtonClick}>
197
+ Change Placement
198
+ </Button>
199
+ }
200
+ >
201
+ <ContextView
202
+ placement={rtl ? mirrorHorizontalPlacement(adjusted, ' ') : adjusted}
203
+ maxWidth="20rem"
204
+ padding="small"
204
205
  >
205
- <ContextView
206
- placement={rtl ? mirrorHorizontalPlacement(adjusted, ' ') : adjusted}
207
- maxWidth="20rem"
208
- padding="small"
209
- >
210
- <Heading level="h3">{placement}</Heading>
211
- <p>
212
- {fpo}
213
- </p>
214
- </ContextView>
215
- </Position>
216
- )}
217
- </ApplyTextDirection>
206
+ <Heading level="h3">{placement}</Heading>
207
+ <p>
208
+ {fpo}
209
+ </p>
210
+ </ContextView>
211
+ </Position>
218
212
  </View>
219
213
  <div
220
214
  style={{
@@ -241,9 +235,11 @@ example: true
241
235
  const fpo = lorem.paragraphs(7)
242
236
 
243
237
  class Example extends React.Component {
238
+
239
+ static contextType = TextDirectionContext
240
+
244
241
  constructor (props) {
245
242
  super(props)
246
-
247
243
  this.state = {
248
244
  placement: 'top stretch'
249
245
  }
@@ -266,41 +262,37 @@ class Example extends React.Component {
266
262
 
267
263
  render () {
268
264
  const { placement } = this.state
269
-
265
+ const rtl = this.context === 'rtl'
270
266
  return (
271
267
  <div>
272
- <ApplyTextDirection>
273
- {(dir, rtl) => (
274
- <Position
275
- placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
276
- shouldPositionOverTarget
277
- insertAt="top"
278
- mountNode={() => this._mountNode}
279
- renderTarget={
280
- <div
281
- ref={(c) => { this._mountNode = c }}
282
- style={{
283
- overflowY: 'auto',
284
- maxHeight: '10rem',
285
- marginBottom: '1rem',
286
- padding: '0.5rem'
287
- }}
288
- >
289
- {fpo}
290
- </div>
291
- }
268
+ <Position
269
+ placement={rtl ? mirrorHorizontalPlacement(placement, ' ') : placement}
270
+ shouldPositionOverTarget
271
+ insertAt="top"
272
+ mountNode={() => this._mountNode}
273
+ renderTarget={
274
+ <div
275
+ ref={(c) => { this._mountNode = c }}
276
+ style={{
277
+ overflowY: 'auto',
278
+ maxHeight: '10rem',
279
+ marginBottom: '1rem',
280
+ padding: '0.5rem'
281
+ }}
292
282
  >
293
- <div
294
- style={{
295
- backgroundColor: 'white',
296
- padding: '1rem'
297
- }}
298
- >
299
- <Heading level="h3">{placement}</Heading>
300
- </div>
301
- </Position>
302
- )}
303
- </ApplyTextDirection>
283
+ {fpo}
284
+ </div>
285
+ }
286
+ >
287
+ <div
288
+ style={{
289
+ backgroundColor: 'white',
290
+ padding: '1rem'
291
+ }}
292
+ >
293
+ <Heading level="h3">{placement}</Heading>
294
+ </div>
295
+ </Position>
304
296
  <Button color="primary" onClick={this.handleButtonClick}>
305
297
  Change Placement
306
298
  </Button>