@instructure/ui-select 8.12.1-snapshot.7 → 8.13.1-snapshot.9

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 (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/es/Select/SelectLocator.js +8 -2
  3. package/es/Select/index.js +37 -37
  4. package/es/Select/props.js +1 -1
  5. package/lib/Select/Group/index.js +1 -1
  6. package/lib/Select/Group/props.js +1 -1
  7. package/lib/Select/Option/index.js +1 -1
  8. package/lib/Select/Option/props.js +1 -1
  9. package/lib/Select/SelectLocator.js +8 -2
  10. package/lib/Select/index.js +38 -38
  11. package/lib/Select/props.js +2 -2
  12. package/package.json +23 -23
  13. package/src/Select/props.ts +1 -1
  14. package/types/Select/index.d.ts +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,13 @@
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.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
7
+
8
+ ### Features
9
+
10
+ - **canvas-theme,ui-theme-tokens,ui-themes:** update canvas theme colors ([a72237d](https://github.com/instructure/instructure-ui/commit/a72237dc213b86aa8f18da2618559ea4c118e1dd))
11
+ - **ui-form-field:** make FormField messages accept `ReactNode` text, not just `string` ([4d36973](https://github.com/instructure/instructure-ui/commit/4d369733414715a70bae0628378e8d82214eab3e))
12
+
6
13
  # [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
7
14
 
8
15
  **Note:** Version bump only for package @instructure/ui-select
package/es/Select/SelectLocator.js CHANGED
@@ -30,8 +30,14 @@ import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocato
30
30
 
31
31
  import { Select } from './index';
32
32
  export const SelectLocator = locator(Select.selector, {
33
- findInput: (...args) => locator('input').find(...args),
34
- findOptionsList: async (element, ...args) => {
33
+ findInput: function () {
34
+ return locator('input').find(...arguments);
35
+ },
36
+ findOptionsList: async function (element) {
37
+ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
38
+ args[_key - 1] = arguments[_key];
39
+ }
40
+
35
41
  const content = await PopoverLocator.findContent(element, ...args);
36
42
  return content ? OptionsLocator.find(content.getDOMNode()) : null;
37
43
  }
package/es/Select/index.js CHANGED
@@ -56,8 +56,8 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
56
56
  **/
57
57
 
58
58
  let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends Component {
59
- constructor(...args) {
60
- super(...args);
59
+ constructor() {
60
+ super(...arguments);
61
61
  this.ref = null;
62
62
  this.state = {
63
63
  hasInputRef: false
@@ -228,10 +228,9 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
228
228
  onRequestHideOptions: event => {
229
229
  onRequestHideOptions(event);
230
230
  },
231
- onRequestHighlightOption: (event, {
232
- id,
233
- direction
234
- }) => {
231
+ onRequestHighlightOption: (event, _ref) => {
232
+ let id = _ref.id,
233
+ direction = _ref.direction;
235
234
  if (!isShowingOptions) return; // if id exists, use that
236
235
 
237
236
  let highlightId = this._optionIds.indexOf(id) > -1 ? id : null;
@@ -259,9 +258,9 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
259
258
  onRequestHighlightLastOption: event => {
260
259
  this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
261
260
  },
262
- onRequestSelectOption: (event, {
263
- id
264
- }) => {
261
+ onRequestSelectOption: (event, _ref2) => {
262
+ let id = _ref2.id;
263
+
265
264
  if (id && this._optionIds.indexOf(id) !== -1) {
266
265
  // only select if id exists as a valid option
267
266
  onRequestSelectOption(event, {
@@ -514,34 +513,35 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
514
513
  highlightedOptionId: highlightedOptionId,
515
514
  isShowingOptions: isShowingOptions,
516
515
  selectedOptionId: selectedOptionId ? selectedOptionId : null
517
- }, this.getEventHandlers()), ({
518
- getRootProps,
519
- getInputProps,
520
- getTriggerProps,
521
- getListProps,
522
- getOptionProps,
523
- getDisabledOptionProps,
524
- getDescriptionProps
525
- }) => jsx("span", getRootProps({
526
- css: styles === null || styles === void 0 ? void 0 : styles.select
527
- }), this.renderInput({
528
- getInputProps,
529
- getTriggerProps
530
- }), jsx("span", Object.assign({}, getDescriptionProps(), {
531
- css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
532
- }), assistiveText), jsx(Popover, {
533
- constrain: constrain,
534
- placement: placement,
535
- mountNode: mountNode,
536
- positionTarget: this._inputContainer,
537
- isShowingContent: isShowingOptions,
538
- shouldReturnFocus: false,
539
- withArrow: false
540
- }, this.renderList({
541
- getListProps,
542
- getOptionProps,
543
- getDisabledOptionProps
544
- }))));
516
+ }, this.getEventHandlers()), _ref3 => {
517
+ let getRootProps = _ref3.getRootProps,
518
+ getInputProps = _ref3.getInputProps,
519
+ getTriggerProps = _ref3.getTriggerProps,
520
+ getListProps = _ref3.getListProps,
521
+ getOptionProps = _ref3.getOptionProps,
522
+ getDisabledOptionProps = _ref3.getDisabledOptionProps,
523
+ getDescriptionProps = _ref3.getDescriptionProps;
524
+ return jsx("span", getRootProps({
525
+ css: styles === null || styles === void 0 ? void 0 : styles.select
526
+ }), this.renderInput({
527
+ getInputProps,
528
+ getTriggerProps
529
+ }), jsx("span", Object.assign({}, getDescriptionProps(), {
530
+ css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
531
+ }), assistiveText), jsx(Popover, {
532
+ constrain: constrain,
533
+ placement: placement,
534
+ mountNode: mountNode,
535
+ positionTarget: this._inputContainer,
536
+ isShowingContent: isShowingOptions,
537
+ shouldReturnFocus: false,
538
+ withArrow: false
539
+ }, this.renderList({
540
+ getListProps,
541
+ getOptionProps,
542
+ getDisabledOptionProps
543
+ })));
544
+ });
545
545
  }
546
546
 
547
547
  }, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
package/es/Select/props.js CHANGED
@@ -110,7 +110,7 @@ const propTypes = {
110
110
  * Displays messages and validation for the input. It should be an object
111
111
  * with the following shape:
112
112
  * `{
113
- * text: PropTypes.string,
113
+ * text: PropTypes.node,
114
114
  * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
115
115
  * }`
116
116
  */
package/lib/Select/Group/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Group = exports.default = void 0;
6
+ exports.default = exports.Group = void 0;
7
7
 
8
8
  var _react = require("react");
9
9
 
package/lib/Select/Group/props.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.allowedProps = exports.propTypes = void 0;
8
+ exports.propTypes = exports.allowedProps = void 0;
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
package/lib/Select/Option/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Option = exports.default = void 0;
6
+ exports.default = exports.Option = void 0;
7
7
 
8
8
  var _react = require("react");
9
9
 
package/lib/Select/Option/props.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.allowedProps = exports.propTypes = void 0;
8
+ exports.propTypes = exports.allowedProps = void 0;
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
package/lib/Select/SelectLocator.js CHANGED
@@ -41,8 +41,14 @@ var _index = require("./index");
41
41
 
42
42
  /* eslint-enable no-restricted-imports */
43
43
  const SelectLocator = (0, _locator.locator)(_index.Select.selector, {
44
- findInput: (...args) => (0, _locator.locator)('input').find(...args),
45
- findOptionsList: async (element, ...args) => {
44
+ findInput: function () {
45
+ return (0, _locator.locator)('input').find(...arguments);
46
+ },
47
+ findOptionsList: async function (element) {
48
+ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
49
+ args[_key - 1] = arguments[_key];
50
+ }
51
+
46
52
  const content = await _PopoverLocator.PopoverLocator.findContent(element, ...args);
47
53
  return content ? _OptionsLocator.OptionsLocator.find(content.getDOMNode()) : null;
48
54
  }
package/lib/Select/index.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.Select = exports.default = void 0;
8
+ exports.default = exports.Select = void 0;
9
9
 
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
 
@@ -66,8 +66,8 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
66
66
  ---
67
67
  **/
68
68
  let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends _react.Component {
69
- constructor(...args) {
70
- super(...args);
69
+ constructor() {
70
+ super(...arguments);
71
71
  this.ref = null;
72
72
  this.state = {
73
73
  hasInputRef: false
@@ -242,10 +242,9 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
242
242
  onRequestHideOptions: event => {
243
243
  onRequestHideOptions(event);
244
244
  },
245
- onRequestHighlightOption: (event, {
246
- id,
247
- direction
248
- }) => {
245
+ onRequestHighlightOption: (event, _ref) => {
246
+ let id = _ref.id,
247
+ direction = _ref.direction;
249
248
  if (!isShowingOptions) return; // if id exists, use that
250
249
 
251
250
  let highlightId = this._optionIds.indexOf(id) > -1 ? id : null;
@@ -273,9 +272,9 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
273
272
  onRequestHighlightLastOption: event => {
274
273
  this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
275
274
  },
276
- onRequestSelectOption: (event, {
277
- id
278
- }) => {
275
+ onRequestSelectOption: (event, _ref2) => {
276
+ let id = _ref2.id;
277
+
279
278
  if (id && this._optionIds.indexOf(id) !== -1) {
280
279
  // only select if id exists as a valid option
281
280
  onRequestSelectOption(event, {
@@ -524,34 +523,35 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
524
523
  highlightedOptionId: highlightedOptionId,
525
524
  isShowingOptions: isShowingOptions,
526
525
  selectedOptionId: selectedOptionId ? selectedOptionId : null
527
- }, this.getEventHandlers()), ({
528
- getRootProps,
529
- getInputProps,
530
- getTriggerProps,
531
- getListProps,
532
- getOptionProps,
533
- getDisabledOptionProps,
534
- getDescriptionProps
535
- }) => (0, _emotion.jsx)("span", getRootProps({
536
- css: styles === null || styles === void 0 ? void 0 : styles.select
537
- }), this.renderInput({
538
- getInputProps,
539
- getTriggerProps
540
- }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
541
- css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
542
- }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
543
- constrain: constrain,
544
- placement: placement,
545
- mountNode: mountNode,
546
- positionTarget: this._inputContainer,
547
- isShowingContent: isShowingOptions,
548
- shouldReturnFocus: false,
549
- withArrow: false
550
- }, this.renderList({
551
- getListProps,
552
- getOptionProps,
553
- getDisabledOptionProps
554
- }))));
526
+ }, this.getEventHandlers()), _ref3 => {
527
+ let getRootProps = _ref3.getRootProps,
528
+ getInputProps = _ref3.getInputProps,
529
+ getTriggerProps = _ref3.getTriggerProps,
530
+ getListProps = _ref3.getListProps,
531
+ getOptionProps = _ref3.getOptionProps,
532
+ getDisabledOptionProps = _ref3.getDisabledOptionProps,
533
+ getDescriptionProps = _ref3.getDescriptionProps;
534
+ return (0, _emotion.jsx)("span", getRootProps({
535
+ css: styles === null || styles === void 0 ? void 0 : styles.select
536
+ }), this.renderInput({
537
+ getInputProps,
538
+ getTriggerProps
539
+ }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
540
+ css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
541
+ }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
542
+ constrain: constrain,
543
+ placement: placement,
544
+ mountNode: mountNode,
545
+ positionTarget: this._inputContainer,
546
+ isShowingContent: isShowingOptions,
547
+ shouldReturnFocus: false,
548
+ withArrow: false
549
+ }, this.renderList({
550
+ getListProps,
551
+ getOptionProps,
552
+ getDisabledOptionProps
553
+ })));
554
+ });
555
555
  }
556
556
 
557
557
  }, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
package/lib/Select/props.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.allowedProps = exports.propTypes = void 0;
8
+ exports.propTypes = exports.allowedProps = void 0;
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
@@ -125,7 +125,7 @@ const propTypes = {
125
125
  * Displays messages and validation for the input. It should be an object
126
126
  * with the following shape:
127
127
  * `{
128
- * text: PropTypes.string,
128
+ * text: PropTypes.node,
129
129
  * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
130
130
  * }`
131
131
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-select",
3
- "version": "8.12.1-snapshot.7+1e7ac8219",
3
+ "version": "8.13.1-snapshot.9+f32ba918e",
4
4
  "description": "A component for select and autocomplete behavior.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -24,30 +24,30 @@
24
24
  },
25
25
  "license": "MIT",
26
26
  "devDependencies": {
27
- "@instructure/ui-babel-preset": "8.12.1-snapshot.7+1e7ac8219",
28
- "@instructure/ui-color-utils": "8.12.1-snapshot.7+1e7ac8219",
29
- "@instructure/ui-test-locator": "8.12.1-snapshot.7+1e7ac8219",
30
- "@instructure/ui-test-utils": "8.12.1-snapshot.7+1e7ac8219",
31
- "@instructure/ui-themes": "8.12.1-snapshot.7+1e7ac8219"
27
+ "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
28
+ "@instructure/ui-color-utils": "8.13.1-snapshot.9+f32ba918e",
29
+ "@instructure/ui-test-locator": "8.13.1-snapshot.9+f32ba918e",
30
+ "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
31
+ "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
32
32
  },
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.13.10",
35
- "@instructure/emotion": "8.12.1-snapshot.7+1e7ac8219",
36
- "@instructure/shared-types": "8.12.1-snapshot.7+1e7ac8219",
37
- "@instructure/ui-dom-utils": "8.12.1-snapshot.7+1e7ac8219",
38
- "@instructure/ui-form-field": "8.12.1-snapshot.7+1e7ac8219",
39
- "@instructure/ui-icons": "8.12.1-snapshot.7+1e7ac8219",
40
- "@instructure/ui-options": "8.12.1-snapshot.7+1e7ac8219",
41
- "@instructure/ui-popover": "8.12.1-snapshot.7+1e7ac8219",
42
- "@instructure/ui-position": "8.12.1-snapshot.7+1e7ac8219",
43
- "@instructure/ui-prop-types": "8.12.1-snapshot.7+1e7ac8219",
44
- "@instructure/ui-react-utils": "8.12.1-snapshot.7+1e7ac8219",
45
- "@instructure/ui-selectable": "8.12.1-snapshot.7+1e7ac8219",
46
- "@instructure/ui-testable": "8.12.1-snapshot.7+1e7ac8219",
47
- "@instructure/ui-text-input": "8.12.1-snapshot.7+1e7ac8219",
48
- "@instructure/ui-utils": "8.12.1-snapshot.7+1e7ac8219",
49
- "@instructure/ui-view": "8.12.1-snapshot.7+1e7ac8219",
50
- "@instructure/uid": "8.12.1-snapshot.7+1e7ac8219",
35
+ "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
36
+ "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
37
+ "@instructure/ui-dom-utils": "8.13.1-snapshot.9+f32ba918e",
38
+ "@instructure/ui-form-field": "8.13.1-snapshot.9+f32ba918e",
39
+ "@instructure/ui-icons": "8.13.1-snapshot.9+f32ba918e",
40
+ "@instructure/ui-options": "8.13.1-snapshot.9+f32ba918e",
41
+ "@instructure/ui-popover": "8.13.1-snapshot.9+f32ba918e",
42
+ "@instructure/ui-position": "8.13.1-snapshot.9+f32ba918e",
43
+ "@instructure/ui-prop-types": "8.13.1-snapshot.9+f32ba918e",
44
+ "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
45
+ "@instructure/ui-selectable": "8.13.1-snapshot.9+f32ba918e",
46
+ "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
47
+ "@instructure/ui-text-input": "8.13.1-snapshot.9+f32ba918e",
48
+ "@instructure/ui-utils": "8.13.1-snapshot.9+f32ba918e",
49
+ "@instructure/ui-view": "8.13.1-snapshot.9+f32ba918e",
50
+ "@instructure/uid": "8.13.1-snapshot.9+f32ba918e",
51
51
  "prop-types": "^15"
52
52
  },
53
53
  "peerDependencies": {
@@ -57,5 +57,5 @@
57
57
  "access": "public"
58
58
  },
59
59
  "sideEffects": false,
60
- "gitHead": "1e7ac821932a91fe9ef761c96f747c7ea1f3925a"
60
+ "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
61
61
  }
package/src/Select/props.ts CHANGED
@@ -158,7 +158,7 @@ const propTypes: PropValidators<PropKeys> = {
158
158
  * Displays messages and validation for the input. It should be an object
159
159
  * with the following shape:
160
160
  * `{
161
- * text: PropTypes.string,
161
+ * text: PropTypes.node,
162
162
  * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
163
163
  * }`
164
164
  */
package/types/Select/index.d.ts CHANGED
@@ -27,7 +27,7 @@ declare class Select extends Component<SelectProps> {
27
27
  htmlSize?: string | number | undefined;
28
28
  optionsMaxWidth?: string | undefined;
29
29
  visibleOptionsCount?: number | undefined;
30
- messages?: import("@instructure/ui-form-field").FormMessage[] | undefined;
30
+ messages?: import("@instructure/ui-form-field/types/FormPropTypes").FormMessage[] | undefined;
31
31
  placement?: import("@instructure/ui-position").PlacementPropValues | undefined;
32
32
  constrain?: import("@instructure/ui-position").PositionConstraint | undefined;
33
33
  mountNode?: import("@instructure/ui-position").PositionMountNode | undefined;
@@ -60,7 +60,7 @@ declare class Select extends Component<SelectProps> {
60
60
  htmlSize?: string | number | undefined;
61
61
  optionsMaxWidth?: string | undefined;
62
62
  visibleOptionsCount?: number | undefined;
63
- messages?: import("@instructure/ui-form-field").FormMessage[] | undefined;
63
+ messages?: import("@instructure/ui-form-field/types/FormPropTypes").FormMessage[] | undefined;
64
64
  placement?: import("@instructure/ui-position").PlacementPropValues | undefined;
65
65
  constrain?: import("@instructure/ui-position").PositionConstraint | undefined;
66
66
  mountNode?: import("@instructure/ui-position").PositionMountNode | undefined;