@instructure/ui-buttons 8.10.1 → 8.10.2-snapshot.22
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/LICENSE.md +27 -0
- package/es/BaseButton/index.js +42 -38
- package/es/Button/index.js +3 -1
- package/es/CloseButton/index.js +28 -16
- package/es/CondensedButton/index.js +22 -14
- package/es/IconButton/index.js +27 -19
- package/es/ToggleButton/index.js +24 -15
- package/lib/BaseButton/index.js +42 -38
- package/lib/Button/index.js +3 -1
- package/lib/CloseButton/index.js +28 -16
- package/lib/CondensedButton/index.js +22 -14
- package/lib/IconButton/index.js +27 -19
- package/lib/ToggleButton/index.js +24 -15
- package/package.json +22 -21
- package/src/BaseButton/index.tsx +6 -5
- package/src/BaseButton/props.ts +1 -1
- package/src/Button/index.tsx +5 -5
- package/src/Button/props.ts +1 -1
- package/src/CloseButton/index.tsx +8 -1
- package/src/CloseButton/props.ts +1 -1
- package/src/CondensedButton/index.tsx +8 -1
- package/src/CondensedButton/props.ts +1 -1
- package/src/IconButton/index.tsx +8 -1
- package/src/IconButton/props.ts +1 -1
- package/src/ToggleButton/index.tsx +8 -1
- package/src/ToggleButton/props.ts +1 -1
- package/types/BaseButton/index.d.ts +5 -4
- package/types/BaseButton/index.d.ts.map +1 -1
- package/types/BaseButton/props.d.ts +1 -1
- package/types/BaseButton/props.d.ts.map +1 -1
- package/types/Button/index.d.ts +4 -3
- package/types/Button/index.d.ts.map +1 -1
- package/types/Button/props.d.ts +1 -1
- package/types/Button/props.d.ts.map +1 -1
- package/types/CloseButton/index.d.ts +4 -2
- package/types/CloseButton/index.d.ts.map +1 -1
- package/types/CloseButton/props.d.ts +1 -1
- package/types/CloseButton/props.d.ts.map +1 -1
- package/types/CondensedButton/index.d.ts +4 -2
- package/types/CondensedButton/index.d.ts.map +1 -1
- package/types/CondensedButton/props.d.ts +1 -1
- package/types/CondensedButton/props.d.ts.map +1 -1
- package/types/IconButton/index.d.ts +4 -2
- package/types/IconButton/index.d.ts.map +1 -1
- package/types/IconButton/props.d.ts +1 -1
- package/types/IconButton/props.d.ts.map +1 -1
- package/types/ToggleButton/index.d.ts +4 -2
- package/types/ToggleButton/index.d.ts.map +1 -1
- package/types/ToggleButton/props.d.ts +1 -1
- package/types/ToggleButton/props.d.ts.map +1 -1
|
@@ -39,6 +39,14 @@ let CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _de
|
|
|
39
39
|
constructor(...args) {
|
|
40
40
|
super(...args);
|
|
41
41
|
this._baseButton = null;
|
|
42
|
+
this.ref = null;
|
|
43
|
+
|
|
44
|
+
this.handleRef = el => {
|
|
45
|
+
var _this$props$elementRe, _this$props;
|
|
46
|
+
|
|
47
|
+
this.ref = el;
|
|
48
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
49
|
+
};
|
|
42
50
|
}
|
|
43
51
|
|
|
44
52
|
get focused() {
|
|
@@ -50,19 +58,19 @@ let CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _de
|
|
|
50
58
|
}
|
|
51
59
|
|
|
52
60
|
render() {
|
|
53
|
-
const _this$
|
|
54
|
-
children = _this$
|
|
55
|
-
type = _this$
|
|
56
|
-
size = _this$
|
|
57
|
-
elementRef = _this$
|
|
58
|
-
as = _this$
|
|
59
|
-
interaction = _this$
|
|
60
|
-
color = _this$
|
|
61
|
-
margin = _this$
|
|
62
|
-
cursor = _this$
|
|
63
|
-
href = _this$
|
|
64
|
-
renderIcon = _this$
|
|
65
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
61
|
+
const _this$props2 = this.props,
|
|
62
|
+
children = _this$props2.children,
|
|
63
|
+
type = _this$props2.type,
|
|
64
|
+
size = _this$props2.size,
|
|
65
|
+
elementRef = _this$props2.elementRef,
|
|
66
|
+
as = _this$props2.as,
|
|
67
|
+
interaction = _this$props2.interaction,
|
|
68
|
+
color = _this$props2.color,
|
|
69
|
+
margin = _this$props2.margin,
|
|
70
|
+
cursor = _this$props2.cursor,
|
|
71
|
+
href = _this$props2.href,
|
|
72
|
+
renderIcon = _this$props2.renderIcon,
|
|
73
|
+
props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
|
|
66
74
|
const themeOverride = this.props.themeOverride;
|
|
67
75
|
return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
68
76
|
isCondensed: true,
|
|
@@ -70,7 +78,7 @@ let CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _de
|
|
|
70
78
|
withBorder: false,
|
|
71
79
|
type: type,
|
|
72
80
|
size: size,
|
|
73
|
-
elementRef:
|
|
81
|
+
elementRef: this.handleRef,
|
|
74
82
|
as: as,
|
|
75
83
|
interaction: interaction,
|
|
76
84
|
color: color,
|
package/lib/IconButton/index.js
CHANGED
|
@@ -41,6 +41,14 @@ let IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 =
|
|
|
41
41
|
constructor(...args) {
|
|
42
42
|
super(...args);
|
|
43
43
|
this._baseButton = null;
|
|
44
|
+
this.ref = null;
|
|
45
|
+
|
|
46
|
+
this.handleRef = el => {
|
|
47
|
+
var _this$props$elementRe, _this$props;
|
|
48
|
+
|
|
49
|
+
this.ref = el;
|
|
50
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
51
|
+
};
|
|
44
52
|
}
|
|
45
53
|
|
|
46
54
|
get focused() {
|
|
@@ -52,29 +60,29 @@ let IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 =
|
|
|
52
60
|
}
|
|
53
61
|
|
|
54
62
|
render() {
|
|
55
|
-
const _this$
|
|
56
|
-
children = _this$
|
|
57
|
-
renderIcon = _this$
|
|
58
|
-
screenReaderLabel = _this$
|
|
59
|
-
type = _this$
|
|
60
|
-
size = _this$
|
|
61
|
-
elementRef = _this$
|
|
62
|
-
as = _this$
|
|
63
|
-
interaction = _this$
|
|
64
|
-
color = _this$
|
|
65
|
-
focusColor = _this$
|
|
66
|
-
shape = _this$
|
|
67
|
-
withBackground = _this$
|
|
68
|
-
withBorder = _this$
|
|
69
|
-
margin = _this$
|
|
70
|
-
cursor = _this$
|
|
71
|
-
href = _this$
|
|
72
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
63
|
+
const _this$props2 = this.props,
|
|
64
|
+
children = _this$props2.children,
|
|
65
|
+
renderIcon = _this$props2.renderIcon,
|
|
66
|
+
screenReaderLabel = _this$props2.screenReaderLabel,
|
|
67
|
+
type = _this$props2.type,
|
|
68
|
+
size = _this$props2.size,
|
|
69
|
+
elementRef = _this$props2.elementRef,
|
|
70
|
+
as = _this$props2.as,
|
|
71
|
+
interaction = _this$props2.interaction,
|
|
72
|
+
color = _this$props2.color,
|
|
73
|
+
focusColor = _this$props2.focusColor,
|
|
74
|
+
shape = _this$props2.shape,
|
|
75
|
+
withBackground = _this$props2.withBackground,
|
|
76
|
+
withBorder = _this$props2.withBorder,
|
|
77
|
+
margin = _this$props2.margin,
|
|
78
|
+
cursor = _this$props2.cursor,
|
|
79
|
+
href = _this$props2.href,
|
|
80
|
+
props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
|
|
73
81
|
const themeOverride = this.props.themeOverride;
|
|
74
82
|
return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
75
83
|
type: type,
|
|
76
84
|
size: size,
|
|
77
|
-
elementRef:
|
|
85
|
+
elementRef: this.handleRef,
|
|
78
86
|
as: as,
|
|
79
87
|
interaction: interaction,
|
|
80
88
|
color: color,
|
|
@@ -37,6 +37,15 @@ category: components
|
|
|
37
37
|
let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class ToggleButton extends _react.Component {
|
|
38
38
|
constructor(props) {
|
|
39
39
|
super(props);
|
|
40
|
+
this.ref = null;
|
|
41
|
+
|
|
42
|
+
this.handleRef = el => {
|
|
43
|
+
var _this$props$elementRe, _this$props;
|
|
44
|
+
|
|
45
|
+
this.ref = el;
|
|
46
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
47
|
+
};
|
|
48
|
+
|
|
40
49
|
this.state = {
|
|
41
50
|
isShowingTooltip: props.isShowingTooltip || false
|
|
42
51
|
};
|
|
@@ -47,20 +56,20 @@ let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
|
|
|
47
56
|
}
|
|
48
57
|
|
|
49
58
|
render() {
|
|
50
|
-
const _this$
|
|
51
|
-
as = _this$
|
|
52
|
-
color = _this$
|
|
53
|
-
elementRef = _this$
|
|
54
|
-
size = _this$
|
|
55
|
-
interaction = _this$
|
|
56
|
-
mountNode = _this$
|
|
57
|
-
renderIcon = _this$
|
|
58
|
-
renderTooltipContent = _this$
|
|
59
|
-
screenReaderLabel = _this$
|
|
60
|
-
status = _this$
|
|
61
|
-
placement = _this$
|
|
62
|
-
onClick = _this$
|
|
63
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
59
|
+
const _this$props2 = this.props,
|
|
60
|
+
as = _this$props2.as,
|
|
61
|
+
color = _this$props2.color,
|
|
62
|
+
elementRef = _this$props2.elementRef,
|
|
63
|
+
size = _this$props2.size,
|
|
64
|
+
interaction = _this$props2.interaction,
|
|
65
|
+
mountNode = _this$props2.mountNode,
|
|
66
|
+
renderIcon = _this$props2.renderIcon,
|
|
67
|
+
renderTooltipContent = _this$props2.renderTooltipContent,
|
|
68
|
+
screenReaderLabel = _this$props2.screenReaderLabel,
|
|
69
|
+
status = _this$props2.status,
|
|
70
|
+
placement = _this$props2.placement,
|
|
71
|
+
onClick = _this$props2.onClick,
|
|
72
|
+
props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
|
|
64
73
|
return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
65
74
|
renderTip: renderTooltipContent,
|
|
66
75
|
on: ['hover', 'focus'],
|
|
@@ -84,7 +93,7 @@ let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
|
|
|
84
93
|
withBorder: false,
|
|
85
94
|
color: color,
|
|
86
95
|
size: size,
|
|
87
|
-
elementRef:
|
|
96
|
+
elementRef: this.handleRef,
|
|
88
97
|
as: as,
|
|
89
98
|
onClick: onClick,
|
|
90
99
|
interaction: interaction,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-buttons",
|
|
3
|
-
"version": "8.10.
|
|
3
|
+
"version": "8.10.2-snapshot.22+b84160eff",
|
|
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.10.
|
|
28
|
-
"@instructure/ui-test-locator": "8.10.
|
|
29
|
-
"@instructure/ui-test-queries": "8.10.
|
|
30
|
-
"@instructure/ui-test-utils": "8.10.
|
|
31
|
-
"@instructure/ui-themes": "8.10.
|
|
27
|
+
"@instructure/ui-babel-preset": "8.10.2-snapshot.22+b84160eff",
|
|
28
|
+
"@instructure/ui-test-locator": "8.10.2-snapshot.22+b84160eff",
|
|
29
|
+
"@instructure/ui-test-queries": "8.10.2-snapshot.22+b84160eff",
|
|
30
|
+
"@instructure/ui-test-utils": "8.10.2-snapshot.22+b84160eff",
|
|
31
|
+
"@instructure/ui-themes": "8.10.2-snapshot.22+b84160eff"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.13.10",
|
|
35
|
-
"@instructure/console": "8.10.
|
|
36
|
-
"@instructure/emotion": "8.10.
|
|
37
|
-
"@instructure/shared-types": "8.10.
|
|
38
|
-
"@instructure/ui-a11y-content": "8.10.
|
|
39
|
-
"@instructure/ui-a11y-utils": "8.10.
|
|
40
|
-
"@instructure/ui-color-utils": "8.10.
|
|
41
|
-
"@instructure/ui-dom-utils": "8.10.
|
|
42
|
-
"@instructure/ui-icons": "8.10.
|
|
43
|
-
"@instructure/ui-position": "8.10.
|
|
44
|
-
"@instructure/ui-react-utils": "8.10.
|
|
45
|
-
"@instructure/ui-testable": "8.10.
|
|
46
|
-
"@instructure/ui-tooltip": "8.10.
|
|
47
|
-
"@instructure/ui-utils": "8.10.
|
|
48
|
-
"@instructure/ui-view": "8.10.
|
|
35
|
+
"@instructure/console": "8.10.2-snapshot.22+b84160eff",
|
|
36
|
+
"@instructure/emotion": "8.10.2-snapshot.22+b84160eff",
|
|
37
|
+
"@instructure/shared-types": "8.10.2-snapshot.22+b84160eff",
|
|
38
|
+
"@instructure/ui-a11y-content": "8.10.2-snapshot.22+b84160eff",
|
|
39
|
+
"@instructure/ui-a11y-utils": "8.10.2-snapshot.22+b84160eff",
|
|
40
|
+
"@instructure/ui-color-utils": "8.10.2-snapshot.22+b84160eff",
|
|
41
|
+
"@instructure/ui-dom-utils": "8.10.2-snapshot.22+b84160eff",
|
|
42
|
+
"@instructure/ui-icons": "8.10.2-snapshot.22+b84160eff",
|
|
43
|
+
"@instructure/ui-position": "8.10.2-snapshot.22+b84160eff",
|
|
44
|
+
"@instructure/ui-react-utils": "8.10.2-snapshot.22+b84160eff",
|
|
45
|
+
"@instructure/ui-testable": "8.10.2-snapshot.22+b84160eff",
|
|
46
|
+
"@instructure/ui-tooltip": "8.10.2-snapshot.22+b84160eff",
|
|
47
|
+
"@instructure/ui-utils": "8.10.2-snapshot.22+b84160eff",
|
|
48
|
+
"@instructure/ui-view": "8.10.2-snapshot.22+b84160eff",
|
|
49
49
|
"keycode": "^2",
|
|
50
50
|
"prop-types": "^15"
|
|
51
51
|
},
|
|
@@ -55,5 +55,6 @@
|
|
|
55
55
|
"publishConfig": {
|
|
56
56
|
"access": "public"
|
|
57
57
|
},
|
|
58
|
-
"sideEffects": false
|
|
58
|
+
"sideEffects": false,
|
|
59
|
+
"gitHead": "b84160effefb01aeb94b754f0b7a64f8dad1b7f2"
|
|
59
60
|
}
|
package/src/BaseButton/index.tsx
CHANGED
|
@@ -79,7 +79,9 @@ class BaseButton extends Component<BaseButtonProps> {
|
|
|
79
79
|
onKeyDown: (event) => {}
|
|
80
80
|
} as const
|
|
81
81
|
|
|
82
|
-
_rootElement = null
|
|
82
|
+
_rootElement: Element | null = null
|
|
83
|
+
|
|
84
|
+
ref: Element | null = null
|
|
83
85
|
|
|
84
86
|
componentDidMount() {
|
|
85
87
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
@@ -153,11 +155,10 @@ class BaseButton extends Component<BaseButtonProps> {
|
|
|
153
155
|
this._rootElement && this._rootElement.focus()
|
|
154
156
|
}
|
|
155
157
|
|
|
156
|
-
|
|
157
|
-
handleElementRef = (el) => {
|
|
158
|
+
handleElementRef = (el: Element | null) => {
|
|
158
159
|
this._rootElement = el
|
|
159
|
-
|
|
160
|
-
this.props.elementRef(el)
|
|
160
|
+
this.ref = el
|
|
161
|
+
this.props.elementRef?.(el)
|
|
161
162
|
}
|
|
162
163
|
|
|
163
164
|
// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
|
package/src/BaseButton/props.ts
CHANGED
|
@@ -43,7 +43,7 @@ type BaseButtonOwnProps = {
|
|
|
43
43
|
children?: React.ReactNode
|
|
44
44
|
type?: 'button' | 'submit' | 'reset'
|
|
45
45
|
size?: 'small' | 'medium' | 'large'
|
|
46
|
-
elementRef?: (
|
|
46
|
+
elementRef?: (element: Element | null) => void
|
|
47
47
|
as?: AsElementType
|
|
48
48
|
interaction?: InteractionType
|
|
49
49
|
color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
|
package/src/Button/index.tsx
CHANGED
|
@@ -66,6 +66,8 @@ class Button extends Component<ButtonProps> {
|
|
|
66
66
|
|
|
67
67
|
_buttonComponent = null
|
|
68
68
|
|
|
69
|
+
ref: Element | null = null
|
|
70
|
+
|
|
69
71
|
get focused() {
|
|
70
72
|
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
|
|
71
73
|
return this._buttonComponent && this._buttonComponent.focused
|
|
@@ -76,12 +78,10 @@ class Button extends Component<ButtonProps> {
|
|
|
76
78
|
this._buttonComponent && this._buttonComponent.focus()
|
|
77
79
|
}
|
|
78
80
|
|
|
79
|
-
|
|
80
|
-
handleElementRef = (el) => {
|
|
81
|
+
handleElementRef = (el: Element | null) => {
|
|
81
82
|
const { elementRef } = this.props
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
elementRef(el)
|
|
83
|
+
this.ref = el
|
|
84
|
+
elementRef?.(el)
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'component' implicitly has an 'any' type... Remove this comment to see the full error message
|
package/src/Button/props.ts
CHANGED
|
@@ -38,7 +38,7 @@ type ButtonOwnProps = {
|
|
|
38
38
|
children?: React.ReactNode
|
|
39
39
|
type?: 'button' | 'submit' | 'reset'
|
|
40
40
|
size?: 'small' | 'medium' | 'large'
|
|
41
|
-
elementRef?: (
|
|
41
|
+
elementRef?: (element: Element | null) => void
|
|
42
42
|
as?: AsElementType
|
|
43
43
|
interaction?: 'enabled' | 'disabled' | 'readonly'
|
|
44
44
|
color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
|
|
@@ -64,6 +64,13 @@ class CloseButton extends Component<CloseButtonProps> {
|
|
|
64
64
|
cursor: 'pointer'
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
ref: Element | null = null
|
|
68
|
+
|
|
69
|
+
handleRef = (el: Element | null) => {
|
|
70
|
+
this.ref = el
|
|
71
|
+
this.props.elementRef?.(el)
|
|
72
|
+
}
|
|
73
|
+
|
|
67
74
|
componentDidMount() {
|
|
68
75
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
69
76
|
this.props.makeStyles()
|
|
@@ -106,7 +113,7 @@ class CloseButton extends Component<CloseButtonProps> {
|
|
|
106
113
|
<span {...passthroughProps(props)} css={styles?.closeButton}>
|
|
107
114
|
<BaseButton
|
|
108
115
|
renderIcon={IconXSolid}
|
|
109
|
-
elementRef={
|
|
116
|
+
elementRef={this.handleRef}
|
|
110
117
|
interaction={this.interaction}
|
|
111
118
|
type={type}
|
|
112
119
|
color={this.color}
|
package/src/CloseButton/props.ts
CHANGED
|
@@ -40,7 +40,7 @@ type CloseButtonOwnProps = {
|
|
|
40
40
|
screenReaderLabel: string | React.ReactNode
|
|
41
41
|
color?: 'primary' | 'primary-inverse'
|
|
42
42
|
interaction?: 'enabled' | 'disabled' | 'readonly'
|
|
43
|
-
elementRef?: (
|
|
43
|
+
elementRef?: (element: Element | null) => void
|
|
44
44
|
size?: 'small' | 'medium' | 'large'
|
|
45
45
|
onClick?: (...args: any[]) => any
|
|
46
46
|
margin?: Spacing
|
|
@@ -63,6 +63,13 @@ class CondensedButton extends Component<CondensedButtonProps> {
|
|
|
63
63
|
|
|
64
64
|
_baseButton = null
|
|
65
65
|
|
|
66
|
+
ref: Element | null = null
|
|
67
|
+
|
|
68
|
+
handleRef = (el: Element | null) => {
|
|
69
|
+
this.ref = el
|
|
70
|
+
this.props.elementRef?.(el)
|
|
71
|
+
}
|
|
72
|
+
|
|
66
73
|
get focused() {
|
|
67
74
|
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
|
|
68
75
|
return this._baseButton && this._baseButton.focused
|
|
@@ -99,7 +106,7 @@ class CondensedButton extends Component<CondensedButtonProps> {
|
|
|
99
106
|
withBorder={false}
|
|
100
107
|
type={type}
|
|
101
108
|
size={size}
|
|
102
|
-
elementRef={
|
|
109
|
+
elementRef={this.handleRef}
|
|
103
110
|
as={as}
|
|
104
111
|
interaction={interaction}
|
|
105
112
|
color={color}
|
|
@@ -38,7 +38,7 @@ type CondensedButtonOwnProps = {
|
|
|
38
38
|
children?: React.ReactNode
|
|
39
39
|
type?: 'button' | 'submit' | 'reset'
|
|
40
40
|
size?: 'small' | 'medium' | 'large'
|
|
41
|
-
elementRef?: (
|
|
41
|
+
elementRef?: (element: Element | null) => void
|
|
42
42
|
as?: AsElementType
|
|
43
43
|
interaction?: 'enabled' | 'disabled' | 'readonly'
|
|
44
44
|
color?: 'primary' | 'primary-inverse'
|
package/src/IconButton/index.tsx
CHANGED
|
@@ -68,6 +68,13 @@ class IconButton extends Component<IconButtonProps> {
|
|
|
68
68
|
|
|
69
69
|
_baseButton = null
|
|
70
70
|
|
|
71
|
+
ref: Element | null = null
|
|
72
|
+
|
|
73
|
+
handleRef = (el: Element | null) => {
|
|
74
|
+
this.ref = el
|
|
75
|
+
this.props.elementRef?.(el)
|
|
76
|
+
}
|
|
77
|
+
|
|
71
78
|
get focused() {
|
|
72
79
|
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
|
|
73
80
|
return this._baseButton && this._baseButton.focused
|
|
@@ -106,7 +113,7 @@ class IconButton extends Component<IconButtonProps> {
|
|
|
106
113
|
{...passthroughProps(props)}
|
|
107
114
|
type={type}
|
|
108
115
|
size={size}
|
|
109
|
-
elementRef={
|
|
116
|
+
elementRef={this.handleRef}
|
|
110
117
|
as={as}
|
|
111
118
|
interaction={interaction}
|
|
112
119
|
color={color}
|
package/src/IconButton/props.ts
CHANGED
|
@@ -40,7 +40,7 @@ type IconButtonOwnProps = {
|
|
|
40
40
|
screenReaderLabel: string
|
|
41
41
|
type?: 'button' | 'submit' | 'reset'
|
|
42
42
|
size?: 'small' | 'medium' | 'large'
|
|
43
|
-
elementRef?: (
|
|
43
|
+
elementRef?: (element: Element | null) => void
|
|
44
44
|
as?: AsElementType
|
|
45
45
|
interaction?: 'enabled' | 'disabled' | 'readonly'
|
|
46
46
|
color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
|
|
@@ -69,6 +69,13 @@ class ToggleButton extends Component<ToggleButtonProps> {
|
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
+
ref: Element | null = null
|
|
73
|
+
|
|
74
|
+
handleRef = (el: Element | null) => {
|
|
75
|
+
this.ref = el
|
|
76
|
+
this.props.elementRef?.(el)
|
|
77
|
+
}
|
|
78
|
+
|
|
72
79
|
get isShowingTooltip() {
|
|
73
80
|
return typeof this.props.isShowingTooltip === 'undefined'
|
|
74
81
|
? // @ts-expect-error ts-migrate(2339) FIXME: Property 'isShowingTooltip' does not exist on type... Remove this comment to see the full error message
|
|
@@ -118,7 +125,7 @@ class ToggleButton extends Component<ToggleButtonProps> {
|
|
|
118
125
|
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
|
|
119
126
|
color={color}
|
|
120
127
|
size={size}
|
|
121
|
-
elementRef={
|
|
128
|
+
elementRef={this.handleRef}
|
|
122
129
|
as={as}
|
|
123
130
|
onClick={onClick}
|
|
124
131
|
interaction={interaction}
|
|
@@ -42,7 +42,7 @@ type ToggleButtonOwnProps = {
|
|
|
42
42
|
as?: AsElementType
|
|
43
43
|
interaction?: 'enabled' | 'disabled' | 'readonly'
|
|
44
44
|
size?: 'small' | 'medium' | 'large'
|
|
45
|
-
elementRef?: (
|
|
45
|
+
elementRef?: (element: Element | null) => void
|
|
46
46
|
onClick?: (...args: any[]) => any
|
|
47
47
|
color?: string
|
|
48
48
|
isShowingTooltip?: boolean
|
|
@@ -13,7 +13,7 @@ declare class BaseButton extends Component<BaseButtonProps> {
|
|
|
13
13
|
children?: import("react").ReactNode;
|
|
14
14
|
type?: "button" | "submit" | "reset" | undefined;
|
|
15
15
|
size?: "small" | "medium" | "large" | undefined;
|
|
16
|
-
elementRef?: ((
|
|
16
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
17
17
|
as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
|
|
18
18
|
interaction?: import("@instructure/ui-react-utils").InteractionType | undefined;
|
|
19
19
|
color?: "primary" | "primary-inverse" | "secondary" | "success" | "danger" | undefined;
|
|
@@ -36,7 +36,7 @@ declare class BaseButton extends Component<BaseButtonProps> {
|
|
|
36
36
|
children?: import("react").ReactNode;
|
|
37
37
|
type?: "button" | "submit" | "reset" | undefined;
|
|
38
38
|
size?: "small" | "medium" | "large" | undefined;
|
|
39
|
-
elementRef?: ((
|
|
39
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
40
40
|
as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
|
|
41
41
|
interaction?: import("@instructure/ui-react-utils").InteractionType | undefined;
|
|
42
42
|
color?: "primary" | "primary-inverse" | "secondary" | "success" | "danger" | undefined;
|
|
@@ -72,7 +72,8 @@ declare class BaseButton extends Component<BaseButtonProps> {
|
|
|
72
72
|
readonly cursor: "pointer";
|
|
73
73
|
readonly onKeyDown: (event: any) => void;
|
|
74
74
|
};
|
|
75
|
-
_rootElement: null;
|
|
75
|
+
_rootElement: Element | null;
|
|
76
|
+
ref: Element | null;
|
|
76
77
|
componentDidMount(): void;
|
|
77
78
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
78
79
|
get makeStylesVariables(): BaseButtonStyleProps;
|
|
@@ -85,7 +86,7 @@ declare class BaseButton extends Component<BaseButtonProps> {
|
|
|
85
86
|
get focusColor(): "info" | "inverse";
|
|
86
87
|
get focused(): boolean;
|
|
87
88
|
focus(): void;
|
|
88
|
-
handleElementRef: (el:
|
|
89
|
+
handleElementRef: (el: Element | null) => void;
|
|
89
90
|
handleClick: (event: any) => void;
|
|
90
91
|
handleKeyDown: (event: any) => void;
|
|
91
92
|
renderChildren(): jsx.JSX.Element;
|
|
@@ -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,YAAY,OAAO;
|
|
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,YAAY,EAAE,OAAO,GAAG,IAAI,CAAO;IAEnC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,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,UAIrC;IAGD,WAAW,uBAaV;IAGD,aAAa,uBA0BZ;IAED,cAAc;IAgCd,MAAM;CAwDP;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,eAAe,UAAU,CAAA"}
|
|
@@ -6,7 +6,7 @@ declare type BaseButtonOwnProps = {
|
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
type?: 'button' | 'submit' | 'reset';
|
|
8
8
|
size?: 'small' | 'medium' | 'large';
|
|
9
|
-
elementRef?: (
|
|
9
|
+
elementRef?: (element: Element | null) => void;
|
|
10
10
|
as?: AsElementType;
|
|
11
11
|
interaction?: InteractionType;
|
|
12
12
|
color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/BaseButton/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,aAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/BaseButton/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,aAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1E,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC9B,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,aAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,eAAe,GAAG,kBAAkB,GACvC,cAAc,CAAC,eAAe,EAAE,eAAe,CAAC,CAAA;AAElD,aAAK,eAAe,GAAG,cAAc,CACjC,YAAY,GACZ,SAAS,GACT,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,UAAU,GACV,aAAa,GACb,iBAAiB,CACpB,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAgGvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAsBnB,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,eAAe,EAAE,CAAA;AACtE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|
package/types/Button/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ declare class Button extends Component<ButtonProps> {
|
|
|
11
11
|
children?: React.ReactNode;
|
|
12
12
|
type?: "button" | "submit" | "reset" | undefined;
|
|
13
13
|
size?: "small" | "medium" | "large" | undefined;
|
|
14
|
-
elementRef?: ((
|
|
14
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
15
15
|
as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
|
|
16
16
|
interaction?: "enabled" | "disabled" | "readonly" | undefined;
|
|
17
17
|
color?: "primary" | "primary-inverse" | "secondary" | "success" | "danger" | undefined;
|
|
@@ -28,7 +28,7 @@ declare class Button extends Component<ButtonProps> {
|
|
|
28
28
|
children?: React.ReactNode;
|
|
29
29
|
type?: "button" | "submit" | "reset" | undefined;
|
|
30
30
|
size?: "small" | "medium" | "large" | undefined;
|
|
31
|
-
elementRef?: ((
|
|
31
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
32
32
|
as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
|
|
33
33
|
interaction?: "enabled" | "disabled" | "readonly" | undefined;
|
|
34
34
|
color?: "primary" | "primary-inverse" | "secondary" | "success" | "danger" | undefined;
|
|
@@ -55,9 +55,10 @@ declare class Button extends Component<ButtonProps> {
|
|
|
55
55
|
cursor: string;
|
|
56
56
|
};
|
|
57
57
|
_buttonComponent: null;
|
|
58
|
+
ref: Element | null;
|
|
58
59
|
get focused(): null;
|
|
59
60
|
focus(): void;
|
|
60
|
-
handleElementRef: (el:
|
|
61
|
+
handleElementRef: (el: Element | null) => void;
|
|
61
62
|
handleButtonRef: (component: any) => void;
|
|
62
63
|
render(): JSX.Element;
|
|
63
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AAEH,cAEM,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,YAAW;IAEtC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;;;;MAclB;IAED,gBAAgB,OAAO;IAEvB,IAAI,OAAO,SAGV;IAED,KAAK;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AAEH,cAEM,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,YAAW;IAEtC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;;;;MAclB;IAED,gBAAgB,OAAO;IAEvB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,IAAI,OAAO,SAGV;IAED,KAAK;IAKL,gBAAgB,OAAQ,OAAO,GAAG,IAAI,UAIrC;IAGD,eAAe,2BAEd;IAED,MAAM;CA4CP;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
package/types/Button/props.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ declare type ButtonOwnProps = {
|
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
type?: 'button' | 'submit' | 'reset';
|
|
7
7
|
size?: 'small' | 'medium' | 'large';
|
|
8
|
-
elementRef?: (
|
|
8
|
+
elementRef?: (element: Element | null) => void;
|
|
9
9
|
as?: AsElementType;
|
|
10
10
|
interaction?: 'enabled' | 'disabled' | 'readonly';
|
|
11
11
|
color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Button/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,eAAe,EAChB,MAAM,2BAA2B,CAAA;AAElC,aAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Button/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,eAAe,EAChB,MAAM,2BAA2B,CAAA;AAElC,aAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;IACjD,KAAK,CAAC,EAAE,SAAS,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1E,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;CACzD,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC,eAAe,EAAE,IAAI,CAAC,CAAA;AAEzE,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAuEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAgBnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -13,7 +13,7 @@ declare class CloseButton extends Component<CloseButtonProps> {
|
|
|
13
13
|
screenReaderLabel: import("react").ReactNode;
|
|
14
14
|
color?: "primary" | "primary-inverse" | undefined;
|
|
15
15
|
interaction?: "enabled" | "disabled" | "readonly" | undefined;
|
|
16
|
-
elementRef?: ((
|
|
16
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
17
17
|
size?: "small" | "medium" | "large" | undefined;
|
|
18
18
|
onClick?: ((...args: any[]) => any) | undefined;
|
|
19
19
|
margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
|
|
@@ -29,7 +29,7 @@ declare class CloseButton extends Component<CloseButtonProps> {
|
|
|
29
29
|
screenReaderLabel: import("react").ReactNode;
|
|
30
30
|
color?: "primary" | "primary-inverse" | undefined;
|
|
31
31
|
interaction?: "enabled" | "disabled" | "readonly" | undefined;
|
|
32
|
-
elementRef?: ((
|
|
32
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
33
33
|
size?: "small" | "medium" | "large" | undefined;
|
|
34
34
|
onClick?: ((...args: any[]) => any) | undefined;
|
|
35
35
|
margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
|
|
@@ -51,6 +51,8 @@ declare class CloseButton extends Component<CloseButtonProps> {
|
|
|
51
51
|
as: string;
|
|
52
52
|
cursor: string;
|
|
53
53
|
};
|
|
54
|
+
ref: Element | null;
|
|
55
|
+
handleRef: (el: Element | null) => void;
|
|
54
56
|
componentDidMount(): void;
|
|
55
57
|
componentDidUpdate(): void;
|
|
56
58
|
get interaction(): import("@instructure/ui-react-utils").InteractionType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CloseButton/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAOrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;GAIG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAE3C,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;MAWlB;IAED,iBAAiB;IAKjB,kBAAkB;IAKlB,IAAI,WAAW,0DAEd;IAED,IAAI,KAAK,gDAIR;IAED,MAAM;CAyCP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CloseButton/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAOrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;GAIG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAE3C,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;MAWlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,iBAAiB;IAKjB,kBAAkB;IAKlB,IAAI,WAAW,0DAEd;IAED,IAAI,KAAK,gDAIR;IAED,MAAM;CAyCP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -5,7 +5,7 @@ declare type CloseButtonOwnProps = {
|
|
|
5
5
|
screenReaderLabel: string | React.ReactNode;
|
|
6
6
|
color?: 'primary' | 'primary-inverse';
|
|
7
7
|
interaction?: 'enabled' | 'disabled' | 'readonly';
|
|
8
|
-
elementRef?: (
|
|
8
|
+
elementRef?: (element: Element | null) => void;
|
|
9
9
|
size?: 'small' | 'medium' | 'large';
|
|
10
10
|
onClick?: (...args: any[]) => any;
|
|
11
11
|
margin?: Spacing;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/CloseButton/props.ts"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,aAAK,mBAAmB,GAAG;IACzB,iBAAiB,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAC3C,KAAK,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAA;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;IACjD,UAAU,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/CloseButton/props.ts"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,aAAK,mBAAmB,GAAG;IACzB,iBAAiB,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAC3C,KAAK,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAA;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;IACjD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;IAChD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAA;AAEpD,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA+DvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|