@instructure/ui-pill 8.10.1-snapshot.9 → 8.10.3-snapshot.2

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 (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/es/Pill/index.js +23 -14
  3. package/lib/Pill/index.js +23 -14
  4. package/package.json +17 -17
  5. package/src/Pill/index.tsx +8 -1
  6. package/src/Pill/props.ts +1 -1
  7. package/types/Pill/PillLocator.d.ts +64 -64
  8. package/types/Pill/index.d.ts +4 -2
  9. package/types/Pill/index.d.ts.map +1 -1
  10. package/types/Pill/props.d.ts +1 -1
  11. package/types/Pill/props.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-pill
9
+
10
+ ## [8.10.1](https://github.com/instructure/instructure-ui/compare/v8.10.0...v8.10.1) (2021-10-01)
11
+
12
+ **Note:** Version bump only for package @instructure/ui-pill
13
+
6
14
  # [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-pill
package/es/Pill/index.js CHANGED
@@ -48,21 +48,30 @@ category: components
48
48
  let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pill extends Component {
49
49
  constructor(props) {
50
50
  super(props);
51
+ this.ref = null;
52
+
53
+ this.handleRef = el => {
54
+ var _this$props$elementRe, _this$props;
55
+
56
+ this.ref = el;
57
+ (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
58
+ };
59
+
51
60
  this.state = {
52
61
  truncated: false
53
62
  };
54
63
  }
55
64
 
56
65
  componentDidMount() {
57
- var _this$props$makeStyle, _this$props;
66
+ var _this$props$makeStyle, _this$props2;
58
67
 
59
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
68
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
60
69
  }
61
70
 
62
71
  componentDidUpdate() {
63
- var _this$props$makeStyle2, _this$props2;
72
+ var _this$props$makeStyle2, _this$props3;
64
73
 
65
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
74
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
66
75
  }
67
76
 
68
77
  handleTruncation(truncated) {
@@ -74,21 +83,21 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
74
83
  }
75
84
 
76
85
  renderPill(focused, getTriggerProps) {
77
- const _this$props3 = this.props,
78
- margin = _this$props3.margin,
79
- children = _this$props3.children,
80
- color = _this$props3.color,
81
- as = _this$props3.as,
82
- elementRef = _this$props3.elementRef,
83
- styles = _this$props3.styles,
84
- makeStyles = _this$props3.makeStyles,
85
- props = _objectWithoutProperties(_this$props3, _excluded);
86
+ const _this$props4 = this.props,
87
+ margin = _this$props4.margin,
88
+ children = _this$props4.children,
89
+ color = _this$props4.color,
90
+ as = _this$props4.as,
91
+ elementRef = _this$props4.elementRef,
92
+ styles = _this$props4.styles,
93
+ makeStyles = _this$props4.makeStyles,
94
+ props = _objectWithoutProperties(_this$props4, _excluded);
86
95
 
87
96
  const filteredProps = passthroughProps(props);
88
97
  const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
89
98
  return jsx(View, Object.assign({}, containerProps, {
90
99
  as: as,
91
- elementRef: elementRef,
100
+ elementRef: this.handleRef,
92
101
  margin: margin,
93
102
  padding: "0",
94
103
  maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
package/lib/Pill/index.js CHANGED
@@ -42,21 +42,30 @@ category: components
42
42
  let Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pill extends _react.Component {
43
43
  constructor(props) {
44
44
  super(props);
45
+ this.ref = null;
46
+
47
+ this.handleRef = el => {
48
+ var _this$props$elementRe, _this$props;
49
+
50
+ this.ref = el;
51
+ (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
52
+ };
53
+
45
54
  this.state = {
46
55
  truncated: false
47
56
  };
48
57
  }
49
58
 
50
59
  componentDidMount() {
51
- var _this$props$makeStyle, _this$props;
60
+ var _this$props$makeStyle, _this$props2;
52
61
 
53
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
62
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
54
63
  }
55
64
 
56
65
  componentDidUpdate() {
57
- var _this$props$makeStyle2, _this$props2;
66
+ var _this$props$makeStyle2, _this$props3;
58
67
 
59
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
68
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
60
69
  }
61
70
 
62
71
  handleTruncation(truncated) {
@@ -68,20 +77,20 @@ let Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
68
77
  }
69
78
 
70
79
  renderPill(focused, getTriggerProps) {
71
- const _this$props3 = this.props,
72
- margin = _this$props3.margin,
73
- children = _this$props3.children,
74
- color = _this$props3.color,
75
- as = _this$props3.as,
76
- elementRef = _this$props3.elementRef,
77
- styles = _this$props3.styles,
78
- makeStyles = _this$props3.makeStyles,
79
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
80
+ const _this$props4 = this.props,
81
+ margin = _this$props4.margin,
82
+ children = _this$props4.children,
83
+ color = _this$props4.color,
84
+ as = _this$props4.as,
85
+ elementRef = _this$props4.elementRef,
86
+ styles = _this$props4.styles,
87
+ makeStyles = _this$props4.makeStyles,
88
+ props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
80
89
  const filteredProps = (0, _passthroughProps.passthroughProps)(props);
81
90
  const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
82
91
  return (0, _emotion.jsx)(_View.View, Object.assign({}, containerProps, {
83
92
  as: as,
84
- elementRef: elementRef,
93
+ elementRef: this.handleRef,
85
94
  margin: margin,
86
95
  padding: "0",
87
96
  maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-pill",
3
- "version": "8.10.1-snapshot.9+93b506fe0",
3
+ "version": "8.10.3-snapshot.2+ccdf8f43b",
4
4
  "description": "A UI component to communicate concise status.",
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/console": "8.10.1-snapshot.9+93b506fe0",
29
- "@instructure/emotion": "8.10.1-snapshot.9+93b506fe0",
30
- "@instructure/shared-types": "8.10.1-snapshot.9+93b506fe0",
31
- "@instructure/ui-react-utils": "8.10.1-snapshot.9+93b506fe0",
32
- "@instructure/ui-testable": "8.10.1-snapshot.9+93b506fe0",
33
- "@instructure/ui-tooltip": "8.10.1-snapshot.9+93b506fe0",
34
- "@instructure/ui-truncate-text": "8.10.1-snapshot.9+93b506fe0",
35
- "@instructure/ui-utils": "8.10.1-snapshot.9+93b506fe0",
36
- "@instructure/ui-view": "8.10.1-snapshot.9+93b506fe0",
28
+ "@instructure/console": "8.10.3-snapshot.2+ccdf8f43b",
29
+ "@instructure/emotion": "8.10.3-snapshot.2+ccdf8f43b",
30
+ "@instructure/shared-types": "8.10.3-snapshot.2+ccdf8f43b",
31
+ "@instructure/ui-react-utils": "8.10.3-snapshot.2+ccdf8f43b",
32
+ "@instructure/ui-testable": "8.10.3-snapshot.2+ccdf8f43b",
33
+ "@instructure/ui-tooltip": "8.10.3-snapshot.2+ccdf8f43b",
34
+ "@instructure/ui-truncate-text": "8.10.3-snapshot.2+ccdf8f43b",
35
+ "@instructure/ui-utils": "8.10.3-snapshot.2+ccdf8f43b",
36
+ "@instructure/ui-view": "8.10.3-snapshot.2+ccdf8f43b",
37
37
  "prop-types": "^15"
38
38
  },
39
39
  "devDependencies": {
40
- "@instructure/ui-babel-preset": "8.10.1-snapshot.9+93b506fe0",
41
- "@instructure/ui-color-utils": "8.10.1-snapshot.9+93b506fe0",
42
- "@instructure/ui-test-locator": "8.10.1-snapshot.9+93b506fe0",
43
- "@instructure/ui-test-queries": "8.10.1-snapshot.9+93b506fe0",
44
- "@instructure/ui-test-utils": "8.10.1-snapshot.9+93b506fe0",
45
- "@instructure/ui-themes": "8.10.1-snapshot.9+93b506fe0"
40
+ "@instructure/ui-babel-preset": "8.10.3-snapshot.2+ccdf8f43b",
41
+ "@instructure/ui-color-utils": "8.10.3-snapshot.2+ccdf8f43b",
42
+ "@instructure/ui-test-locator": "8.10.3-snapshot.2+ccdf8f43b",
43
+ "@instructure/ui-test-queries": "8.10.3-snapshot.2+ccdf8f43b",
44
+ "@instructure/ui-test-utils": "8.10.3-snapshot.2+ccdf8f43b",
45
+ "@instructure/ui-themes": "8.10.3-snapshot.2+ccdf8f43b"
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": "93b506fe0860718ebe2cc2729fd023e3e7489231"
54
+ "gitHead": "ccdf8f43b56a8edef32600281692dfeb436d5a01"
55
55
  }
package/src/Pill/index.tsx CHANGED
@@ -58,6 +58,8 @@ class Pill extends Component<PillProps, PillState> {
58
58
  color: 'primary'
59
59
  }
60
60
 
61
+ ref: Element | null = null
62
+
61
63
  constructor(props: PillProps) {
62
64
  super(props)
63
65
 
@@ -82,6 +84,11 @@ class Pill extends Component<PillProps, PillState> {
82
84
  }
83
85
  }
84
86
 
87
+ handleRef = (el: Element | null) => {
88
+ this.ref = el
89
+ this.props.elementRef?.(el)
90
+ }
91
+
85
92
  renderPill(
86
93
  focused?: TooltipRenderChildrenArgs['focused'],
87
94
  getTriggerProps?: TooltipRenderChildrenArgs['getTriggerProps']
@@ -108,7 +115,7 @@ class Pill extends Component<PillProps, PillState> {
108
115
  <View
109
116
  {...containerProps}
110
117
  as={as}
111
- elementRef={elementRef}
118
+ elementRef={this.handleRef}
112
119
  margin={margin}
113
120
  padding="0"
114
121
  maxWidth={styles?.maxWidth as string}
package/src/Pill/props.ts CHANGED
@@ -43,7 +43,7 @@ type PillOwnProps = {
43
43
  /**
44
44
  * Provides a reference to the underlying HTML element
45
45
  */
46
- elementRef?: (element: HTMLElement | null) => void
46
+ elementRef?: (element: Element | null) => void
47
47
  /**
48
48
  * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
49
49
  * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
package/types/Pill/PillLocator.d.ts CHANGED
@@ -21,24 +21,28 @@ export declare const PillLocator: {
21
21
  findParent: typeof import("@instructure/ui-test-queries/src/utils/queries").findParent;
22
22
  findParents: typeof import("@instructure/ui-test-queries/src/utils/queries").findParents;
23
23
  } & {
24
+ toString: (maxLength?: number | undefined, options?: {
25
+ highlight: boolean;
26
+ } | undefined) => string;
27
+ contains: (elementOrSelector?: string | Element | undefined) => boolean | Element;
28
+ children: (selector: string) => Element[];
29
+ title: () => string | null | undefined;
30
+ id: () => string;
31
+ tagName: () => string;
32
+ getAttribute: (qualifiedName: string) => string | null;
33
+ getBoundingClientRect: () => DOMRect;
34
+ matches: (selector: string | undefined) => boolean;
24
35
  visible: () => boolean;
25
36
  value: () => string | null;
26
37
  disabled: () => string | null;
27
38
  role: () => string | null;
28
- id: () => string;
29
39
  label: () => string | null | undefined;
30
- title: () => string | null | undefined;
31
- toString: (maxLength?: number | undefined, options?: {
32
- highlight: boolean;
33
- } | undefined) => string;
34
40
  getId: () => string;
35
41
  getOwnerWindow: () => (Window & typeof globalThis) | null;
36
42
  getOwnerDocument: () => Document;
37
43
  getComputedStyle: () => CSSStyleDeclaration;
38
44
  getTagName: () => string;
39
- tagName: () => string;
40
45
  typeIn: (text: string) => Promise<void>;
41
- getAttribute: (qualifiedName: string) => string | null;
42
46
  getDOMNode: () => Element;
43
47
  node: () => Element;
44
48
  debug: (maxLength?: number | undefined, options?: {
@@ -46,9 +50,8 @@ export declare const PillLocator: {
46
50
  } | undefined) => void;
47
51
  accessible: (options?: Record<string, unknown> | undefined) => Promise<boolean>;
48
52
  getTextContent: () => string | null;
49
- getParentNode: () => (Node & ParentNode) | null;
50
- parent: () => (Node & ParentNode) | null;
51
- getBoundingClientRect: () => DOMRect;
53
+ getParentNode: () => ParentNode | null;
54
+ parent: () => ParentNode | null;
52
55
  rect: () => DOMRect;
53
56
  hasClass: (classname: string) => boolean;
54
57
  containsFocus: () => boolean;
@@ -60,19 +63,17 @@ export declare const PillLocator: {
60
63
  exists: () => boolean;
61
64
  text: () => string | null;
62
65
  empty: () => boolean;
63
- contains: (elementOrSelector?: string | Element | undefined) => boolean | Element;
64
66
  descendants: (selector: string) => Element[];
65
- ancestors: (selector: string) => (Node & ParentNode)[];
67
+ ancestors: (selector: string) => ParentNode[];
66
68
  attribute: (qualifiedName: string) => string | null;
67
69
  style: (property: string) => string;
68
70
  classNames: () => string[];
69
- matches: (selector: string | undefined) => boolean;
70
71
  checked: () => any;
71
72
  selected: () => any;
72
73
  readonly: () => any;
73
- children: (selector: string) => Element[];
74
- parents: (selector: string) => (Node & ParentNode)[];
74
+ parents: (selector: string) => ParentNode[];
75
75
  } & {
76
+ scroll: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
76
77
  copy: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
77
78
  cut: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
78
79
  paste: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
@@ -110,7 +111,6 @@ export declare const PillLocator: {
110
111
  touchEnd: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
111
112
  touchMove: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
112
113
  touchStart: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
113
- scroll: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
114
114
  wheel: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
115
115
  abort: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
116
116
  canPlay: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
@@ -162,24 +162,28 @@ export declare const PillLocator: {
162
162
  findParent: typeof import("@instructure/ui-test-queries/src/utils/queries").findParent;
163
163
  findParents: typeof import("@instructure/ui-test-queries/src/utils/queries").findParents;
164
164
  } & {
165
+ toString: (maxLength?: number | undefined, options?: {
166
+ highlight: boolean;
167
+ } | undefined) => string;
168
+ contains: (elementOrSelector?: string | Element | undefined) => boolean | Element;
169
+ children: (selector: string) => Element[];
170
+ title: () => string | null | undefined;
171
+ id: () => string;
172
+ tagName: () => string;
173
+ getAttribute: (qualifiedName: string) => string | null;
174
+ getBoundingClientRect: () => DOMRect;
175
+ matches: (selector: string | undefined) => boolean;
165
176
  visible: () => boolean;
166
177
  value: () => string | null;
167
178
  disabled: () => string | null;
168
179
  role: () => string | null;
169
- id: () => string;
170
180
  label: () => string | null | undefined;
171
- title: () => string | null | undefined;
172
- toString: (maxLength?: number | undefined, options?: {
173
- highlight: boolean;
174
- } | undefined) => string;
175
181
  getId: () => string;
176
182
  getOwnerWindow: () => (Window & typeof globalThis) | null;
177
183
  getOwnerDocument: () => Document;
178
184
  getComputedStyle: () => CSSStyleDeclaration;
179
185
  getTagName: () => string;
180
- tagName: () => string;
181
186
  typeIn: (text: string) => Promise<void>;
182
- getAttribute: (qualifiedName: string) => string | null;
183
187
  getDOMNode: () => Element;
184
188
  node: () => Element;
185
189
  debug: (maxLength?: number | undefined, options?: {
@@ -187,9 +191,8 @@ export declare const PillLocator: {
187
191
  } | undefined) => void;
188
192
  accessible: (options?: Record<string, unknown> | undefined) => Promise<boolean>;
189
193
  getTextContent: () => string | null;
190
- getParentNode: () => (Node & ParentNode) | null;
191
- parent: () => (Node & ParentNode) | null;
192
- getBoundingClientRect: () => DOMRect;
194
+ getParentNode: () => ParentNode | null;
195
+ parent: () => ParentNode | null;
193
196
  rect: () => DOMRect;
194
197
  hasClass: (classname: string) => boolean;
195
198
  containsFocus: () => boolean;
@@ -201,19 +204,17 @@ export declare const PillLocator: {
201
204
  exists: () => boolean;
202
205
  text: () => string | null;
203
206
  empty: () => boolean;
204
- contains: (elementOrSelector?: string | Element | undefined) => boolean | Element;
205
207
  descendants: (selector: string) => Element[];
206
- ancestors: (selector: string) => (Node & ParentNode)[];
208
+ ancestors: (selector: string) => ParentNode[];
207
209
  attribute: (qualifiedName: string) => string | null;
208
210
  style: (property: string) => string;
209
211
  classNames: () => string[];
210
- matches: (selector: string | undefined) => boolean;
211
212
  checked: () => any;
212
213
  selected: () => any;
213
214
  readonly: () => any;
214
- children: (selector: string) => Element[];
215
- parents: (selector: string) => (Node & ParentNode)[];
215
+ parents: (selector: string) => ParentNode[];
216
216
  } & {
217
+ scroll: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
217
218
  copy: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
218
219
  cut: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
219
220
  paste: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
@@ -251,7 +252,6 @@ export declare const PillLocator: {
251
252
  touchEnd: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
252
253
  touchMove: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
253
254
  touchStart: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
254
- scroll: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
255
255
  wheel: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
256
256
  abort: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
257
257
  canPlay: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
@@ -303,24 +303,28 @@ export declare const PillLocator: {
303
303
  findParent: typeof import("@instructure/ui-test-queries/src/utils/queries").findParent;
304
304
  findParents: typeof import("@instructure/ui-test-queries/src/utils/queries").findParents;
305
305
  } & {
306
+ toString: (maxLength?: number | undefined, options?: {
307
+ highlight: boolean;
308
+ } | undefined) => string;
309
+ contains: (elementOrSelector?: string | Element | undefined) => boolean | Element;
310
+ children: (selector: string) => Element[];
311
+ title: () => string | null | undefined;
312
+ id: () => string;
313
+ tagName: () => string;
314
+ getAttribute: (qualifiedName: string) => string | null;
315
+ getBoundingClientRect: () => DOMRect;
316
+ matches: (selector: string | undefined) => boolean;
306
317
  visible: () => boolean;
307
318
  value: () => string | null;
308
319
  disabled: () => string | null;
309
320
  role: () => string | null;
310
- id: () => string;
311
321
  label: () => string | null | undefined;
312
- title: () => string | null | undefined;
313
- toString: (maxLength?: number | undefined, options?: {
314
- highlight: boolean;
315
- } | undefined) => string;
316
322
  getId: () => string;
317
323
  getOwnerWindow: () => (Window & typeof globalThis) | null;
318
324
  getOwnerDocument: () => Document;
319
325
  getComputedStyle: () => CSSStyleDeclaration;
320
326
  getTagName: () => string;
321
- tagName: () => string;
322
327
  typeIn: (text: string) => Promise<void>;
323
- getAttribute: (qualifiedName: string) => string | null;
324
328
  getDOMNode: () => Element;
325
329
  node: () => Element;
326
330
  debug: (maxLength?: number | undefined, options?: {
@@ -328,9 +332,8 @@ export declare const PillLocator: {
328
332
  } | undefined) => void;
329
333
  accessible: (options?: Record<string, unknown> | undefined) => Promise<boolean>;
330
334
  getTextContent: () => string | null;
331
- getParentNode: () => (Node & ParentNode) | null;
332
- parent: () => (Node & ParentNode) | null;
333
- getBoundingClientRect: () => DOMRect;
335
+ getParentNode: () => ParentNode | null;
336
+ parent: () => ParentNode | null;
334
337
  rect: () => DOMRect;
335
338
  hasClass: (classname: string) => boolean;
336
339
  containsFocus: () => boolean;
@@ -342,19 +345,17 @@ export declare const PillLocator: {
342
345
  exists: () => boolean;
343
346
  text: () => string | null;
344
347
  empty: () => boolean;
345
- contains: (elementOrSelector?: string | Element | undefined) => boolean | Element;
346
348
  descendants: (selector: string) => Element[];
347
- ancestors: (selector: string) => (Node & ParentNode)[];
349
+ ancestors: (selector: string) => ParentNode[];
348
350
  attribute: (qualifiedName: string) => string | null;
349
351
  style: (property: string) => string;
350
352
  classNames: () => string[];
351
- matches: (selector: string | undefined) => boolean;
352
353
  checked: () => any;
353
354
  selected: () => any;
354
355
  readonly: () => any;
355
- children: (selector: string) => Element[];
356
- parents: (selector: string) => (Node & ParentNode)[];
356
+ parents: (selector: string) => ParentNode[];
357
357
  } & {
358
+ scroll: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
358
359
  copy: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
359
360
  cut: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
360
361
  paste: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
@@ -392,7 +393,6 @@ export declare const PillLocator: {
392
393
  touchEnd: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
393
394
  touchMove: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
394
395
  touchStart: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
395
- scroll: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
396
396
  wheel: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
397
397
  abort: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
398
398
  canPlay: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
@@ -444,24 +444,28 @@ export declare const PillLocator: {
444
444
  findParent: typeof import("@instructure/ui-test-queries/src/utils/queries").findParent;
445
445
  findParents: typeof import("@instructure/ui-test-queries/src/utils/queries").findParents;
446
446
  } & {
447
+ toString: (maxLength?: number | undefined, options?: {
448
+ highlight: boolean;
449
+ } | undefined) => string;
450
+ contains: (elementOrSelector?: string | Element | undefined) => boolean | Element;
451
+ children: (selector: string) => Element[];
452
+ title: () => string | null | undefined;
453
+ id: () => string;
454
+ tagName: () => string;
455
+ getAttribute: (qualifiedName: string) => string | null;
456
+ getBoundingClientRect: () => DOMRect;
457
+ matches: (selector: string | undefined) => boolean;
447
458
  visible: () => boolean;
448
459
  value: () => string | null;
449
460
  disabled: () => string | null;
450
461
  role: () => string | null;
451
- id: () => string;
452
462
  label: () => string | null | undefined;
453
- title: () => string | null | undefined;
454
- toString: (maxLength?: number | undefined, options?: {
455
- highlight: boolean;
456
- } | undefined) => string;
457
463
  getId: () => string;
458
464
  getOwnerWindow: () => (Window & typeof globalThis) | null;
459
465
  getOwnerDocument: () => Document;
460
466
  getComputedStyle: () => CSSStyleDeclaration;
461
467
  getTagName: () => string;
462
- tagName: () => string;
463
468
  typeIn: (text: string) => Promise<void>;
464
- getAttribute: (qualifiedName: string) => string | null;
465
469
  getDOMNode: () => Element;
466
470
  node: () => Element;
467
471
  debug: (maxLength?: number | undefined, options?: {
@@ -469,9 +473,8 @@ export declare const PillLocator: {
469
473
  } | undefined) => void;
470
474
  accessible: (options?: Record<string, unknown> | undefined) => Promise<boolean>;
471
475
  getTextContent: () => string | null;
472
- getParentNode: () => (Node & ParentNode) | null;
473
- parent: () => (Node & ParentNode) | null;
474
- getBoundingClientRect: () => DOMRect;
476
+ getParentNode: () => ParentNode | null;
477
+ parent: () => ParentNode | null;
475
478
  rect: () => DOMRect;
476
479
  hasClass: (classname: string) => boolean;
477
480
  containsFocus: () => boolean;
@@ -483,19 +486,17 @@ export declare const PillLocator: {
483
486
  exists: () => boolean;
484
487
  text: () => string | null;
485
488
  empty: () => boolean;
486
- contains: (elementOrSelector?: string | Element | undefined) => boolean | Element;
487
489
  descendants: (selector: string) => Element[];
488
- ancestors: (selector: string) => (Node & ParentNode)[];
490
+ ancestors: (selector: string) => ParentNode[];
489
491
  attribute: (qualifiedName: string) => string | null;
490
492
  style: (property: string) => string;
491
493
  classNames: () => string[];
492
- matches: (selector: string | undefined) => boolean;
493
494
  checked: () => any;
494
495
  selected: () => any;
495
496
  readonly: () => any;
496
- children: (selector: string) => Element[];
497
- parents: (selector: string) => (Node & ParentNode)[];
497
+ parents: (selector: string) => ParentNode[];
498
498
  } & {
499
+ scroll: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
499
500
  copy: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
500
501
  cut: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
501
502
  paste: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
@@ -533,7 +534,6 @@ export declare const PillLocator: {
533
534
  touchEnd: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
534
535
  touchMove: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
535
536
  touchStart: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
536
- scroll: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
537
537
  wheel: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
538
538
  abort: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
539
539
  canPlay: (init?: import("@instructure/ui-test-queries/src/utils/events").FireEventInit | undefined, options?: Record<string, unknown> | undefined) => Promise<Event>;
package/types/Pill/index.d.ts CHANGED
@@ -14,24 +14,26 @@ declare class Pill extends Component<PillProps, PillState> {
14
14
  static allowedProps: readonly (keyof {
15
15
  as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
16
16
  color?: "primary" | "success" | "danger" | "info" | "warning" | "alert" | undefined;
17
- elementRef?: ((element: HTMLElement | null) => void) | undefined;
17
+ elementRef?: ((element: Element | null) => void) | undefined;
18
18
  margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
19
19
  children: import("react").ReactNode;
20
20
  })[];
21
21
  static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
22
22
  as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
23
23
  color?: "primary" | "success" | "danger" | "info" | "warning" | "alert" | undefined;
24
- elementRef?: ((element: HTMLElement | null) => void) | undefined;
24
+ elementRef?: ((element: Element | null) => void) | undefined;
25
25
  margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
26
26
  children: import("react").ReactNode;
27
27
  }>;
28
28
  static defaultProps: {
29
29
  color: string;
30
30
  };
31
+ ref: Element | null;
31
32
  constructor(props: PillProps);
32
33
  componentDidMount(): void;
33
34
  componentDidUpdate(): void;
34
35
  handleTruncation(truncated: boolean): void;
36
+ handleRef: (el: Element | null) => void;
35
37
  renderPill(focused?: TooltipRenderChildrenArgs['focused'], getTriggerProps?: TooltipRenderChildrenArgs['getTriggerProps']): jsx.JSX.Element;
36
38
  render(): jsx.JSX.Element;
37
39
  }
package/types/Pill/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pill/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAA;AAExE,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGnD;;;;;GAKG;AACH,cAEM,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAChD,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,YAAY;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;MAElB;gBAEW,KAAK,EAAE,SAAS;IAQ5B,iBAAiB;IAIjB,kBAAkB;IAIlB,gBAAgB,CAAC,SAAS,EAAE,OAAO;IAQnC,UAAU,CACR,OAAO,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAC9C,eAAe,CAAC,EAAE,yBAAyB,CAAC,iBAAiB,CAAC;IAmDhE,MAAM;CAaP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Pill/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAA;AAExE,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGnD;;;;;GAKG;AACH,cAEM,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAChD,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,YAAY;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;MAElB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;gBAEd,KAAK,EAAE,SAAS;IAQ5B,iBAAiB;IAIjB,kBAAkB;IAIlB,gBAAgB,CAAC,SAAS,EAAE,OAAO;IAQnC,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,UAAU,CACR,OAAO,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAC9C,eAAe,CAAC,EAAE,yBAAyB,CAAC,iBAAiB,CAAC;IAmDhE,MAAM;CAaP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}
package/types/Pill/props.d.ts CHANGED
@@ -7,7 +7,7 @@ declare type PillOwnProps = {
7
7
  /**
8
8
  * Provides a reference to the underlying HTML element
9
9
  */
10
- elementRef?: (element: HTMLElement | null) => void;
10
+ elementRef?: (element: Element | null) => void;
11
11
  /**
12
12
  * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
13
13
  * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
package/types/Pill/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Pill/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACV,MAAM,2BAA2B,CAAA;AAElC,aAAK,YAAY,GAAG;IAClB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAClD;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AACD,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEpE,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;AAE7D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAavC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAMnB,CAAA;AAED,aAAK,SAAS,GAAG;IACf,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Pill/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACV,MAAM,2BAA2B,CAAA;AAElC,aAAK,YAAY,GAAG;IAClB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AACD,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEpE,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;AAE7D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAavC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAMnB,CAAA;AAED,aAAK,SAAS,GAAG;IACf,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}