@instructure/ui-select 8.12.1-snapshot.7 → 8.13.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
+
+### Features
+
+- **canvas-theme,ui-theme-tokens,ui-themes:** update canvas theme colors ([a72237d](https://github.com/instructure/instructure-ui/commit/a72237dc213b86aa8f18da2618559ea4c118e1dd))
+- **ui-form-field:** make FormField messages accept `ReactNode` text, not just `string` ([4d36973](https://github.com/instructure/instructure-ui/commit/4d369733414715a70bae0628378e8d82214eab3e))
+
 # [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
 
 **Note:** Version bump only for package @instructure/ui-select

package/es/Select/SelectLocator.js

@@ -30,8 +30,14 @@ import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocato
 
 import { Select } from './index';
 export const SelectLocator = locator(Select.selector, {
-  findInput: (...args) => locator('input').find(...args),
-  findOptionsList: async (element, ...args) => {
+  findInput: function () {
+    return locator('input').find(...arguments);
+  },
+  findOptionsList: async function (element) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
     const content = await PopoverLocator.findContent(element, ...args);
     return content ? OptionsLocator.find(content.getDOMNode()) : null;
   }

package/es/Select/index.js

@@ -56,8 +56,8 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 **/
 
 let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
     this.state = {
       hasInputRef: false
@@ -228,10 +228,9 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       onRequestHideOptions: event => {
         onRequestHideOptions(event);
       },
-      onRequestHighlightOption: (event, {
-        id,
-        direction
-      }) => {
+      onRequestHighlightOption: (event, _ref) => {
+        let id = _ref.id,
+            direction = _ref.direction;
         if (!isShowingOptions) return; // if id exists, use that
 
         let highlightId = this._optionIds.indexOf(id) > -1 ? id : null;
@@ -259,9 +258,9 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       onRequestHighlightLastOption: event => {
         this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
       },
-      onRequestSelectOption: (event, {
-        id
-      }) => {
+      onRequestSelectOption: (event, _ref2) => {
+        let id = _ref2.id;
+
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
           onRequestSelectOption(event, {
@@ -514,34 +513,35 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       highlightedOptionId: highlightedOptionId,
       isShowingOptions: isShowingOptions,
       selectedOptionId: selectedOptionId ? selectedOptionId : null
-    }, this.getEventHandlers()), ({
-      getRootProps,
-      getInputProps,
-      getTriggerProps,
-      getListProps,
-      getOptionProps,
-      getDisabledOptionProps,
-      getDescriptionProps
-    }) => jsx("span", getRootProps({
-      css: styles === null || styles === void 0 ? void 0 : styles.select
-    }), this.renderInput({
-      getInputProps,
-      getTriggerProps
-    }), jsx("span", Object.assign({}, getDescriptionProps(), {
-      css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
-    }), assistiveText), jsx(Popover, {
-      constrain: constrain,
-      placement: placement,
-      mountNode: mountNode,
-      positionTarget: this._inputContainer,
-      isShowingContent: isShowingOptions,
-      shouldReturnFocus: false,
-      withArrow: false
-    }, this.renderList({
-      getListProps,
-      getOptionProps,
-      getDisabledOptionProps
-    }))));
+    }, this.getEventHandlers()), _ref3 => {
+      let getRootProps = _ref3.getRootProps,
+          getInputProps = _ref3.getInputProps,
+          getTriggerProps = _ref3.getTriggerProps,
+          getListProps = _ref3.getListProps,
+          getOptionProps = _ref3.getOptionProps,
+          getDisabledOptionProps = _ref3.getDisabledOptionProps,
+          getDescriptionProps = _ref3.getDescriptionProps;
+      return jsx("span", getRootProps({
+        css: styles === null || styles === void 0 ? void 0 : styles.select
+      }), this.renderInput({
+        getInputProps,
+        getTriggerProps
+      }), jsx("span", Object.assign({}, getDescriptionProps(), {
+        css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
+      }), assistiveText), jsx(Popover, {
+        constrain: constrain,
+        placement: placement,
+        mountNode: mountNode,
+        positionTarget: this._inputContainer,
+        isShowingContent: isShowingOptions,
+        shouldReturnFocus: false,
+        withArrow: false
+      }, this.renderList({
+        getListProps,
+        getOptionProps,
+        getDisabledOptionProps
+      })));
+    });
   }
 
 }, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {

package/es/Select/props.js

@@ -110,7 +110,7 @@ const propTypes = {
    * Displays messages and validation for the input. It should be an object
    * with the following shape:
    * `{
-   *   text: PropTypes.string,
+   *   text: PropTypes.node,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    * }`
    */

package/lib/Select/Group/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Group = exports.default = void 0;
+exports.default = exports.Group = void 0;
 
 var _react = require("react");
 

package/lib/Select/Group/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/Select/Option/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Option = exports.default = void 0;
+exports.default = exports.Option = void 0;
 
 var _react = require("react");
 

package/lib/Select/Option/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/Select/SelectLocator.js

@@ -41,8 +41,14 @@ var _index = require("./index");
 
 /* eslint-enable no-restricted-imports */
 const SelectLocator = (0, _locator.locator)(_index.Select.selector, {
-  findInput: (...args) => (0, _locator.locator)('input').find(...args),
-  findOptionsList: async (element, ...args) => {
+  findInput: function () {
+    return (0, _locator.locator)('input').find(...arguments);
+  },
+  findOptionsList: async function (element) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
     const content = await _PopoverLocator.PopoverLocator.findContent(element, ...args);
     return content ? _OptionsLocator.OptionsLocator.find(content.getDOMNode()) : null;
   }

package/lib/Select/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Select = exports.default = void 0;
+exports.default = exports.Select = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -66,8 +66,8 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
 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 {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
     this.state = {
       hasInputRef: false
@@ -242,10 +242,9 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       onRequestHideOptions: event => {
         onRequestHideOptions(event);
       },
-      onRequestHighlightOption: (event, {
-        id,
-        direction
-      }) => {
+      onRequestHighlightOption: (event, _ref) => {
+        let id = _ref.id,
+            direction = _ref.direction;
         if (!isShowingOptions) return; // if id exists, use that
 
         let highlightId = this._optionIds.indexOf(id) > -1 ? id : null;
@@ -273,9 +272,9 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       onRequestHighlightLastOption: event => {
         this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
       },
-      onRequestSelectOption: (event, {
-        id
-      }) => {
+      onRequestSelectOption: (event, _ref2) => {
+        let id = _ref2.id;
+
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
           onRequestSelectOption(event, {
@@ -524,34 +523,35 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       highlightedOptionId: highlightedOptionId,
       isShowingOptions: isShowingOptions,
       selectedOptionId: selectedOptionId ? selectedOptionId : null
-    }, this.getEventHandlers()), ({
-      getRootProps,
-      getInputProps,
-      getTriggerProps,
-      getListProps,
-      getOptionProps,
-      getDisabledOptionProps,
-      getDescriptionProps
-    }) => (0, _emotion.jsx)("span", getRootProps({
-      css: styles === null || styles === void 0 ? void 0 : styles.select
-    }), this.renderInput({
-      getInputProps,
-      getTriggerProps
-    }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
-      css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
-    }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
-      constrain: constrain,
-      placement: placement,
-      mountNode: mountNode,
-      positionTarget: this._inputContainer,
-      isShowingContent: isShowingOptions,
-      shouldReturnFocus: false,
-      withArrow: false
-    }, this.renderList({
-      getListProps,
-      getOptionProps,
-      getDisabledOptionProps
-    }))));
+    }, this.getEventHandlers()), _ref3 => {
+      let getRootProps = _ref3.getRootProps,
+          getInputProps = _ref3.getInputProps,
+          getTriggerProps = _ref3.getTriggerProps,
+          getListProps = _ref3.getListProps,
+          getOptionProps = _ref3.getOptionProps,
+          getDisabledOptionProps = _ref3.getDisabledOptionProps,
+          getDescriptionProps = _ref3.getDescriptionProps;
+      return (0, _emotion.jsx)("span", getRootProps({
+        css: styles === null || styles === void 0 ? void 0 : styles.select
+      }), this.renderInput({
+        getInputProps,
+        getTriggerProps
+      }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
+        css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
+      }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
+        constrain: constrain,
+        placement: placement,
+        mountNode: mountNode,
+        positionTarget: this._inputContainer,
+        isShowingContent: isShowingOptions,
+        shouldReturnFocus: false,
+        withArrow: false
+      }, this.renderList({
+        getListProps,
+        getOptionProps,
+        getDisabledOptionProps
+      })));
+    });
   }
 
 }, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {

package/lib/Select/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -125,7 +125,7 @@ const propTypes = {
    * Displays messages and validation for the input. It should be an object
    * with the following shape:
    * `{
-   *   text: PropTypes.string,
+   *   text: PropTypes.node,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    * }`
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.12.1-snapshot.7+1e7ac8219",
+  "version": "8.13.0",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,30 +24,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-color-utils": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-test-locator": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-test-utils": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-themes": "8.12.1-snapshot.7+1e7ac8219"
+    "@instructure/ui-babel-preset": "8.13.0",
+    "@instructure/ui-color-utils": "8.13.0",
+    "@instructure/ui-test-locator": "8.13.0",
+    "@instructure/ui-test-utils": "8.13.0",
+    "@instructure/ui-themes": "8.13.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/shared-types": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-dom-utils": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-form-field": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-icons": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-options": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-popover": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-position": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-prop-types": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-react-utils": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-selectable": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-testable": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-text-input": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-utils": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-view": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/uid": "8.12.1-snapshot.7+1e7ac8219",
+    "@instructure/emotion": "8.13.0",
+    "@instructure/shared-types": "8.13.0",
+    "@instructure/ui-dom-utils": "8.13.0",
+    "@instructure/ui-form-field": "8.13.0",
+    "@instructure/ui-icons": "8.13.0",
+    "@instructure/ui-options": "8.13.0",
+    "@instructure/ui-popover": "8.13.0",
+    "@instructure/ui-position": "8.13.0",
+    "@instructure/ui-prop-types": "8.13.0",
+    "@instructure/ui-react-utils": "8.13.0",
+    "@instructure/ui-selectable": "8.13.0",
+    "@instructure/ui-testable": "8.13.0",
+    "@instructure/ui-text-input": "8.13.0",
+    "@instructure/ui-utils": "8.13.0",
+    "@instructure/ui-view": "8.13.0",
+    "@instructure/uid": "8.13.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -56,6 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "1e7ac821932a91fe9ef761c96f747c7ea1f3925a"
+  "sideEffects": false
 }

package/src/Select/props.ts

@@ -158,7 +158,7 @@ const propTypes: PropValidators<PropKeys> = {
    * Displays messages and validation for the input. It should be an object
    * with the following shape:
    * `{
-   *   text: PropTypes.string,
+   *   text: PropTypes.node,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    * }`
    */

package/types/Select/index.d.ts

@@ -27,7 +27,7 @@ declare class Select extends Component<SelectProps> {
         htmlSize?: string | number | undefined;
         optionsMaxWidth?: string | undefined;
         visibleOptionsCount?: number | undefined;
-        messages?: import("@instructure/ui-form-field").FormMessage[] | undefined;
+        messages?: import("@instructure/ui-form-field/types/FormPropTypes").FormMessage[] | undefined;
         placement?: import("@instructure/ui-position").PlacementPropValues | undefined;
         constrain?: import("@instructure/ui-position").PositionConstraint | undefined;
         mountNode?: import("@instructure/ui-position").PositionMountNode | undefined;
@@ -60,7 +60,7 @@ declare class Select extends Component<SelectProps> {
         htmlSize?: string | number | undefined;
         optionsMaxWidth?: string | undefined;
         visibleOptionsCount?: number | undefined;
-        messages?: import("@instructure/ui-form-field").FormMessage[] | undefined;
+        messages?: import("@instructure/ui-form-field/types/FormPropTypes").FormMessage[] | undefined;
         placement?: import("@instructure/ui-position").PlacementPropValues | undefined;
         constrain?: import("@instructure/ui-position").PositionConstraint | undefined;
         mountNode?: import("@instructure/ui-position").PositionMountNode | undefined;

package/LICENSE.md

@@ -1,27 +0,0 @@
----
-title: The MIT License (MIT)
-category: Getting Started
-order: 9
----
-
-# The MIT License (MIT)
-
-Copyright (c) 2015 Instructure, Inc.
-
-**Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions.**
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.