@instructure/ui-buttons 8.11.2-snapshot.19 → 8.11.2-snapshot.23
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.
package/es/BaseButton/index.js
CHANGED
|
@@ -48,12 +48,10 @@ category: components/utilities
|
|
|
48
48
|
let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class BaseButton extends Component {
|
|
49
49
|
constructor(...args) {
|
|
50
50
|
super(...args);
|
|
51
|
-
this._rootElement = null;
|
|
52
51
|
this.ref = null;
|
|
53
52
|
|
|
54
53
|
this.handleElementRef = el => {
|
|
55
54
|
const elementRef = this.props.elementRef;
|
|
56
|
-
this._rootElement = el;
|
|
57
55
|
this.ref = el;
|
|
58
56
|
|
|
59
57
|
if (typeof elementRef === 'function') {
|
|
@@ -97,7 +95,7 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
|
|
|
97
95
|
}
|
|
98
96
|
|
|
99
97
|
if (href) {
|
|
100
|
-
this.
|
|
98
|
+
this.ref && this.ref.click();
|
|
101
99
|
}
|
|
102
100
|
}
|
|
103
101
|
};
|
|
@@ -111,6 +109,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
|
|
|
111
109
|
this.props.makeStyles(this.makeStylesVariables);
|
|
112
110
|
}
|
|
113
111
|
|
|
112
|
+
get _rootElement() {
|
|
113
|
+
return this.ref;
|
|
114
|
+
}
|
|
115
|
+
|
|
114
116
|
get makeStylesVariables() {
|
|
115
117
|
return {
|
|
116
118
|
isDisabled: this.isDisabled,
|
|
@@ -169,11 +171,11 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
|
|
|
169
171
|
}
|
|
170
172
|
|
|
171
173
|
get focused() {
|
|
172
|
-
return isActiveElement(this.
|
|
174
|
+
return isActiveElement(this.ref);
|
|
173
175
|
}
|
|
174
176
|
|
|
175
177
|
focus() {
|
|
176
|
-
this.
|
|
178
|
+
this.ref && this.ref.focus();
|
|
177
179
|
}
|
|
178
180
|
|
|
179
181
|
renderChildren() {
|
package/lib/BaseButton/index.js
CHANGED
|
@@ -49,12 +49,10 @@ category: components/utilities
|
|
|
49
49
|
let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class BaseButton extends _react.Component {
|
|
50
50
|
constructor(...args) {
|
|
51
51
|
super(...args);
|
|
52
|
-
this._rootElement = null;
|
|
53
52
|
this.ref = null;
|
|
54
53
|
|
|
55
54
|
this.handleElementRef = el => {
|
|
56
55
|
const elementRef = this.props.elementRef;
|
|
57
|
-
this._rootElement = el;
|
|
58
56
|
this.ref = el;
|
|
59
57
|
|
|
60
58
|
if (typeof elementRef === 'function') {
|
|
@@ -98,7 +96,7 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
|
|
|
98
96
|
}
|
|
99
97
|
|
|
100
98
|
if (href) {
|
|
101
|
-
this.
|
|
99
|
+
this.ref && this.ref.click();
|
|
102
100
|
}
|
|
103
101
|
}
|
|
104
102
|
};
|
|
@@ -112,6 +110,10 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
|
|
|
112
110
|
this.props.makeStyles(this.makeStylesVariables);
|
|
113
111
|
}
|
|
114
112
|
|
|
113
|
+
get _rootElement() {
|
|
114
|
+
return this.ref;
|
|
115
|
+
}
|
|
116
|
+
|
|
115
117
|
get makeStylesVariables() {
|
|
116
118
|
return {
|
|
117
119
|
isDisabled: this.isDisabled,
|
|
@@ -170,11 +172,11 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
|
|
|
170
172
|
}
|
|
171
173
|
|
|
172
174
|
get focused() {
|
|
173
|
-
return (0, _isActiveElement.isActiveElement)(this.
|
|
175
|
+
return (0, _isActiveElement.isActiveElement)(this.ref);
|
|
174
176
|
}
|
|
175
177
|
|
|
176
178
|
focus() {
|
|
177
|
-
this.
|
|
179
|
+
this.ref && this.ref.focus();
|
|
178
180
|
}
|
|
179
181
|
|
|
180
182
|
renderChildren() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-buttons",
|
|
3
|
-
"version": "8.11.2-snapshot.
|
|
3
|
+
"version": "8.11.2-snapshot.23+0d8081052",
|
|
4
4
|
"description": "Accessible button components",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -24,28 +24,28 @@
|
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@instructure/ui-babel-preset": "8.11.2-snapshot.
|
|
28
|
-
"@instructure/ui-test-locator": "8.11.2-snapshot.
|
|
29
|
-
"@instructure/ui-test-queries": "8.11.2-snapshot.
|
|
30
|
-
"@instructure/ui-test-utils": "8.11.2-snapshot.
|
|
31
|
-
"@instructure/ui-themes": "8.11.2-snapshot.
|
|
27
|
+
"@instructure/ui-babel-preset": "8.11.2-snapshot.23+0d8081052",
|
|
28
|
+
"@instructure/ui-test-locator": "8.11.2-snapshot.23+0d8081052",
|
|
29
|
+
"@instructure/ui-test-queries": "8.11.2-snapshot.23+0d8081052",
|
|
30
|
+
"@instructure/ui-test-utils": "8.11.2-snapshot.23+0d8081052",
|
|
31
|
+
"@instructure/ui-themes": "8.11.2-snapshot.23+0d8081052"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.13.10",
|
|
35
|
-
"@instructure/console": "8.11.2-snapshot.
|
|
36
|
-
"@instructure/emotion": "8.11.2-snapshot.
|
|
37
|
-
"@instructure/shared-types": "8.11.2-snapshot.
|
|
38
|
-
"@instructure/ui-a11y-content": "8.11.2-snapshot.
|
|
39
|
-
"@instructure/ui-a11y-utils": "8.11.2-snapshot.
|
|
40
|
-
"@instructure/ui-color-utils": "8.11.2-snapshot.
|
|
41
|
-
"@instructure/ui-dom-utils": "8.11.2-snapshot.
|
|
42
|
-
"@instructure/ui-icons": "8.11.2-snapshot.
|
|
43
|
-
"@instructure/ui-position": "8.11.2-snapshot.
|
|
44
|
-
"@instructure/ui-react-utils": "8.11.2-snapshot.
|
|
45
|
-
"@instructure/ui-testable": "8.11.2-snapshot.
|
|
46
|
-
"@instructure/ui-tooltip": "8.11.2-snapshot.
|
|
47
|
-
"@instructure/ui-utils": "8.11.2-snapshot.
|
|
48
|
-
"@instructure/ui-view": "8.11.2-snapshot.
|
|
35
|
+
"@instructure/console": "8.11.2-snapshot.23+0d8081052",
|
|
36
|
+
"@instructure/emotion": "8.11.2-snapshot.23+0d8081052",
|
|
37
|
+
"@instructure/shared-types": "8.11.2-snapshot.23+0d8081052",
|
|
38
|
+
"@instructure/ui-a11y-content": "8.11.2-snapshot.23+0d8081052",
|
|
39
|
+
"@instructure/ui-a11y-utils": "8.11.2-snapshot.23+0d8081052",
|
|
40
|
+
"@instructure/ui-color-utils": "8.11.2-snapshot.23+0d8081052",
|
|
41
|
+
"@instructure/ui-dom-utils": "8.11.2-snapshot.23+0d8081052",
|
|
42
|
+
"@instructure/ui-icons": "8.11.2-snapshot.23+0d8081052",
|
|
43
|
+
"@instructure/ui-position": "8.11.2-snapshot.23+0d8081052",
|
|
44
|
+
"@instructure/ui-react-utils": "8.11.2-snapshot.23+0d8081052",
|
|
45
|
+
"@instructure/ui-testable": "8.11.2-snapshot.23+0d8081052",
|
|
46
|
+
"@instructure/ui-tooltip": "8.11.2-snapshot.23+0d8081052",
|
|
47
|
+
"@instructure/ui-utils": "8.11.2-snapshot.23+0d8081052",
|
|
48
|
+
"@instructure/ui-view": "8.11.2-snapshot.23+0d8081052",
|
|
49
49
|
"keycode": "^2",
|
|
50
50
|
"prop-types": "^15"
|
|
51
51
|
},
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"access": "public"
|
|
57
57
|
},
|
|
58
58
|
"sideEffects": false,
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "0d8081052d9986085a7d0c62ee9ac41a1dcf8608"
|
|
60
60
|
}
|
package/src/BaseButton/index.tsx
CHANGED
|
@@ -79,8 +79,6 @@ class BaseButton extends Component<BaseButtonProps> {
|
|
|
79
79
|
onKeyDown: (event) => {}
|
|
80
80
|
} as const
|
|
81
81
|
|
|
82
|
-
_rootElement: Element | null = null
|
|
83
|
-
|
|
84
82
|
ref: Element | null = null
|
|
85
83
|
|
|
86
84
|
componentDidMount() {
|
|
@@ -93,6 +91,13 @@ class BaseButton extends Component<BaseButtonProps> {
|
|
|
93
91
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
94
92
|
this.props.makeStyles(this.makeStylesVariables)
|
|
95
93
|
}
|
|
94
|
+
get _rootElement() {
|
|
95
|
+
console.warn(
|
|
96
|
+
'_rootElement property is deprecated and will be removed in v9, please use ref instead'
|
|
97
|
+
)
|
|
98
|
+
|
|
99
|
+
return this.ref
|
|
100
|
+
}
|
|
96
101
|
|
|
97
102
|
get makeStylesVariables(): BaseButtonStyleProps {
|
|
98
103
|
return {
|
|
@@ -147,18 +152,17 @@ class BaseButton extends Component<BaseButtonProps> {
|
|
|
147
152
|
}
|
|
148
153
|
|
|
149
154
|
get focused() {
|
|
150
|
-
return isActiveElement(this.
|
|
155
|
+
return isActiveElement(this.ref)
|
|
151
156
|
}
|
|
152
157
|
|
|
153
158
|
focus() {
|
|
154
159
|
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
|
|
155
|
-
this.
|
|
160
|
+
this.ref && this.ref.focus()
|
|
156
161
|
}
|
|
157
162
|
|
|
158
163
|
handleElementRef = (el: Element | null) => {
|
|
159
164
|
const { elementRef } = this.props
|
|
160
165
|
|
|
161
|
-
this._rootElement = el
|
|
162
166
|
this.ref = el
|
|
163
167
|
|
|
164
168
|
if (typeof elementRef === 'function') {
|
|
@@ -206,7 +210,7 @@ class BaseButton extends Component<BaseButtonProps> {
|
|
|
206
210
|
|
|
207
211
|
if (href) {
|
|
208
212
|
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
|
|
209
|
-
this.
|
|
213
|
+
this.ref && this.ref.click()
|
|
210
214
|
}
|
|
211
215
|
}
|
|
212
216
|
}
|
|
@@ -72,10 +72,10 @@ declare class BaseButton extends Component<BaseButtonProps> {
|
|
|
72
72
|
readonly cursor: "pointer";
|
|
73
73
|
readonly onKeyDown: (event: any) => void;
|
|
74
74
|
};
|
|
75
|
-
_rootElement: Element | null;
|
|
76
75
|
ref: Element | null;
|
|
77
76
|
componentDidMount(): void;
|
|
78
77
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
78
|
+
get _rootElement(): Element | null;
|
|
79
79
|
get makeStylesVariables(): BaseButtonStyleProps;
|
|
80
80
|
get hasOnlyIconVisible(): boolean;
|
|
81
81
|
get elementType(): import("@instructure/shared-types/types/CommonProps").AsElementType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BaseButton/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAcjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEpE;;;;GAIG;AAEH,cAEM,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IACjD,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;MAmBT;IAEV,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BaseButton/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAcjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEpE;;;;GAIG;AAEH,cAEM,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IACjD,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;MAmBT;IAEV,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAIjD,IAAI,YAAY,mBAMf;IAED,IAAI,mBAAmB,IAAI,oBAAoB,CAK9C;IAED,IAAI,kBAAkB,YAGrB;IAED,IAAI,WAAW,wEAEd;IAED,IAAI,WAAW,0DAEd;IAED,IAAI,UAAU,YAEb;IAED,IAAI,UAAU,YAEb;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,UAAU,uBAkBb;IAED,IAAI,OAAO,YAEV;IAED,KAAK;IAKL,gBAAgB,OAAQ,OAAO,GAAG,IAAI,UAQrC;IAGD,WAAW,uBAaV;IAGD,aAAa,uBA0BZ;IAED,cAAc;IAgCd,MAAM;CAwDP;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,eAAe,UAAU,CAAA"}
|