@instructure/ui-select - npm Package Compare versions

Comparing version 10.11.1-snapshot-9 to 10.12.0

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log
 
-## [10.11.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-9) (2025-02-20)
+# [10.12.0](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.12.0) (2025-02-24)
 
@@ -15,5 +15,11 @@
 
+### Features
 
+* **ui-popover, ui-select:** allow overriding Select's dropdown border ([90d59d3](https://github.com/instructure/instructure-ui/commit/90d59d3c3689c3a1500c37db363fa43c1b8403d7))
+* **ui-select,ui-simple-select:** add support for rendering selected option's before and after content in Select and SimpleSelect input ([87dc52d](https://github.com/instructure/instructure-ui/commit/87dc52dcd2a23acfe50856c05b8ff28c1046f85a))
 
 
+
+
+
 # [10.11.0](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.11.0) (2025-02-03)
@@ -20,0 +26,0 @@

es/Select/__new-tests__/Select.test.js

@@ -37,2 +37,3 @@ var _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
 import * as utils from '@instructure/ui-utils';
+import { IconAddLine, IconCheckSolid, IconDownloadSolid, IconEyeSolid } from '@instructure/ui-icons';
 const defaultOptions = ['foo', 'bar', 'baz'];
@@ -47,2 +48,147 @@ const getOptions = (highlighted, selected, disabled) => defaultOptions.map(opt => /*#__PURE__*/React.createElement(Select.Option, {
 }, opt));
+const optionsWithBeforeContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderBeforeLabel: 'XY'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderBeforeLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+}];
+const groupOptionsWithBeforeContent = {
+  Options1: [{
+    id: 'opt1',
+    label: 'Text1',
+    renderBeforeLabel: 'XY'
+  }, {
+    id: 'opt2',
+    label: 'Icon1',
+    renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+  }, {
+    id: 'opt3',
+    label: 'Colored Icon1',
+    renderBeforeLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+  }],
+  Options2: [{
+    id: 'opt4',
+    label: 'Text2',
+    renderBeforeLabel: 'AB'
+  }, {
+    id: 'opt5',
+    label: 'Icon2',
+    renderBeforeLabel: /*#__PURE__*/React.createElement(IconAddLine, null)
+  }, {
+    id: 'opt6',
+    label: 'Colored Icon2',
+    renderBeforeLabel: /*#__PURE__*/React.createElement(IconDownloadSolid, null)
+  }]
+};
+const optionsWithAfterContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderAfterLabel: 'XY'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderAfterLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+}];
+const groupOptionsWithAfterContent = {
+  Options1: [{
+    id: 'opt1',
+    label: 'Text1',
+    renderAfterLabel: 'XY'
+  }, {
+    id: 'opt2',
+    label: 'Icon1',
+    renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+  }, {
+    id: 'opt3',
+    label: 'Colored Icon1',
+    renderAfterLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+  }],
+  Options2: [{
+    id: 'opt4',
+    label: 'Text2',
+    renderAfterLabel: 'AB'
+  }, {
+    id: 'opt5',
+    label: 'Icon2',
+    renderAfterLabel: /*#__PURE__*/React.createElement(IconAddLine, null)
+  }, {
+    id: 'opt6',
+    label: 'Colored Icon2',
+    renderAfterLabel: /*#__PURE__*/React.createElement(IconDownloadSolid, null)
+  }]
+};
+const optionsWithBeforeAndAfterContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderBeforeLabel: 'XY',
+  renderAfterLabel: 'ZZ'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null),
+  renderBeforeLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderBeforeLabel: /*#__PURE__*/React.createElement(IconEyeSolid, null),
+  renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+}];
+const getOptionsWithBeforeContent = selected => optionsWithBeforeContent.map(opt => /*#__PURE__*/React.createElement(Select.Option, Object.assign({}, opt, {
+  key: opt.id,
+  isSelected: opt.id === selected
+})));
+const getGroupOptionsWithBeforeContent = selected => {
+  return Object.keys(groupOptionsWithBeforeContent).map((key, index) => {
+    return /*#__PURE__*/React.createElement(Select.Group, {
+      key: index,
+      renderLabel: key
+    }, groupOptionsWithBeforeContent[key].map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+      id: opt.id,
+      key: opt.id,
+      value: opt.label,
+      renderBeforeLabel: opt.renderBeforeLabel,
+      isSelected: opt.id === selected
+    })));
+  });
+};
+const getOptionsWithAfterContent = selected => optionsWithAfterContent.map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+  id: opt.id,
+  key: opt.id,
+  value: opt.label,
+  renderAfterLabel: opt.renderAfterLabel,
+  isSelected: opt.id === selected
+}));
+const getGroupOptionsWithAfterContent = selected => {
+  return Object.keys(groupOptionsWithAfterContent).map((key, index) => {
+    return /*#__PURE__*/React.createElement(Select.Group, {
+      key: index,
+      renderLabel: key
+    }, groupOptionsWithAfterContent[key].map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+      id: opt.id,
+      key: opt.id,
+      value: opt.label,
+      renderAfterLabel: opt.renderAfterLabel,
+      isSelected: opt.id === selected
+    })));
+  });
+};
+const getOptionsWithBeforeAndAfterContent = selected => optionsWithBeforeAndAfterContent.map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+  id: opt.id,
+  key: opt.id,
+  value: opt.label,
+  renderBeforeLabel: opt.renderBeforeLabel,
+  renderAfterLabel: opt.renderAfterLabel,
+  isSelected: opt.id === selected
+}));
 vi.mock('@instructure/ui-utils', async importOriginal => {
@@ -316,2 +462,155 @@ const originalModule = await importOriginal();
     });
+    it("should not render option's before content in input field when isOptionContentAppliedToInput is set to false ", async () => {
+      const _render8 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: false,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render8.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).not.toHaveTextContent('XY');
+    });
+    it('should render arrow in input field when isOptionContentAppliedToInput is set to false', async () => {
+      const _render9 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: false,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render9.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true", async () => {
+      const _render10 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render10.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content', async () => {
+      const _render11 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render11.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true", async () => {
+      const _render12 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithAfterContent[0].label
+        }, getOptionsWithAfterContent('opt1'))),
+        container = _render12.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true but renderBeforeInput is also set", async () => {
+      const _render13 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label,
+          renderBeforeInput: "ZZ"
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render13.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true but renderAfterInput is also set", async () => {
+      const _render14 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithAfterContent[0].label,
+          renderAfterInput: "ZZ"
+        }, getOptionsWithAfterContent('opt1'))),
+        container = _render14.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('XY');
+    });
+    it("should not render option's before content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
+      const _render15 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render15.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).not.toHaveTextContent('XY');
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
+      const _render16 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeAndAfterContent[0].label
+        }, getOptionsWithBeforeAndAfterContent('opt1'))),
+        container = _render16.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
+      const _render17 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeAndAfterContent[0].label
+        }, getOptionsWithBeforeAndAfterContent('opt1'))),
+        container = _render17.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('ZZ');
+    });
+    it('should render arrow in input field when isOptionContentAppliedToInput is set to true but inputValue is not set', async () => {
+      const _render18 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render18.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should not render option's after content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
+      const _render19 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render19.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).not.toHaveTextContent('XY');
+    });
+    it("should render option's before content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
+      const _render20 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithBeforeContent.Options1[0].label
+        }, getGroupOptionsWithBeforeContent('opt1'))),
+        container = _render20.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content and group options', async () => {
+      const _render21 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithBeforeContent.Options1[0].label
+        }, getGroupOptionsWithBeforeContent('opt1'))),
+        container = _render21.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's after content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
+      const _render22 = render(/*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithAfterContent.Options2[0].label
+        }, getGroupOptionsWithAfterContent('opt4'))),
+        container = _render22.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('AB');
+    });
   });
@@ -362,8 +661,8 @@ describe('list', () => {
         const onRequestShowOptions = vi.fn();
-        const _render8 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render23 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          container = _render8.container,
-          rerender = _render8.rerender;
+          container = _render23.container,
+          rerender = _render23.rerender;
         const icon = container.querySelector('svg[name="IconArrowOpenDown"]');
@@ -393,7 +692,7 @@ const label = screen.getByText('Choose an option');
         const onRequestShowOptions = vi.fn();
-        const _render9 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render24 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          rerender = _render9.rerender;
+          rerender = _render24.rerender;
         const input = screen.getByLabelText('Choose an option');
@@ -432,7 +731,7 @@ await userEvent.click(input);
         const onRequestShowOptions = vi.fn();
-        const _render10 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render25 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          rerender = _render10.rerender;
+          rerender = _render25.rerender;
         const input = screen.getByLabelText('Choose an option');
@@ -457,3 +756,3 @@ await userEvent.type(input, '{space}');
         const onRequestHideOptions = vi.fn();
-        const _render11 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render26 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
@@ -463,3 +762,3 @@ isShowingOptions: true,
           }, getOptions())),
-          container = _render11.container;
+          container = _render26.container;
         const icon = container.querySelector('svg[name="IconArrowOpenUp"]');
@@ -494,3 +793,3 @@ const label = screen.getByText('Choose an option');
         const onRequestHideOptions = vi.fn();
-        const _render12 = render(/*#__PURE__*/React.createElement(Select, {
+        const _render27 = render(/*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
@@ -500,3 +799,3 @@ isShowingOptions: true,
           }, getOptions())),
-          rerender = _render12.rerender;
+          rerender = _render27.rerender;
         const input = screen.getByLabelText('Choose an option');
@@ -586,4 +885,4 @@ await userEvent.click(input);
     }) => {
-      const _render13 = render(content),
-        container = _render13.container;
+      const _render28 = render(content),
+        container = _render28.container;
       const axeCheck = await runAxeCheck(container);
@@ -590,0 +889,0 @@ expect(axeCheck).toBe(true);

es/Select/index.js

@@ -433,23 +433,81 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
   }
+  renderContentBeforeOrAfterInput(position) {
+    for (const child of this.childrenArray) {
+      if (matchComponentTypes(child, [Group])) {
+        // Group found
+        const options = this.getGroupChildrenArray(child);
+        for (const option of options) {
+          if (option.props.isSelected) {
+            return position === 'before' ? option.props.renderBeforeLabel : option.props.renderAfterLabel ? option.props.renderAfterLabel : this.renderIcon();
+          }
+        }
+      } else {
+        // Ungrouped option found
+        if (child.props.isSelected) {
+          return position === 'before' ? child.props.renderBeforeLabel : child.props.renderAfterLabel ? child.props.renderAfterLabel : this.renderIcon();
+        }
+      }
+    }
+    // if no option with isSelected is found
+    if (position === 'after') {
+      return this.renderIcon();
+    }
+    return void 0;
+  }
+  handleInputContentRender(renderLabelInput, inputValue, isOptionContentAppliedToInput, position, defaultReturn) {
+    const isInputValueEmpty = !inputValue || inputValue === '';
+    if (renderLabelInput && isOptionContentAppliedToInput) {
+      if (!isInputValueEmpty) {
+        return this.renderContentBeforeOrAfterInput(position);
+      }
+      return renderLabelInput;
+    }
+    if (isOptionContentAppliedToInput) {
+      if (isInputValueEmpty) {
+        return defaultReturn;
+      }
+      return this.renderContentBeforeOrAfterInput(position);
+    }
+    if (renderLabelInput) {
+      return renderLabelInput;
+    }
+    return defaultReturn;
+  }
+  handleRenderBeforeInput() {
+    const _this$props8 = this.props,
+      renderBeforeInput = _this$props8.renderBeforeInput,
+      inputValue = _this$props8.inputValue,
+      isOptionContentAppliedToInput = _this$props8.isOptionContentAppliedToInput;
+    return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
+    );
+  }
+  handleRenderAfterInput() {
+    const _this$props9 = this.props,
+      renderAfterInput = _this$props9.renderAfterInput,
+      inputValue = _this$props9.inputValue,
+      isOptionContentAppliedToInput = _this$props9.isOptionContentAppliedToInput;
+    return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon() // default for after
+    );
+  }
   renderInput(data) {
     const getInputProps = data.getInputProps,
       getTriggerProps = data.getTriggerProps;
-    const _this$props8 = this.props,
-      renderLabel = _this$props8.renderLabel,
-      inputValue = _this$props8.inputValue,
-      placeholder = _this$props8.placeholder,
-      isRequired = _this$props8.isRequired,
-      shouldNotWrap = _this$props8.shouldNotWrap,
-      size = _this$props8.size,
-      isInline = _this$props8.isInline,
-      width = _this$props8.width,
-      htmlSize = _this$props8.htmlSize,
-      messages = _this$props8.messages,
-      renderBeforeInput = _this$props8.renderBeforeInput,
-      renderAfterInput = _this$props8.renderAfterInput,
-      onFocus = _this$props8.onFocus,
-      onBlur = _this$props8.onBlur,
-      onInputChange = _this$props8.onInputChange,
-      onRequestHideOptions = _this$props8.onRequestHideOptions,
-      rest = _objectWithoutProperties(_this$props8, _excluded2);
+    const _this$props10 = this.props,
+      renderLabel = _this$props10.renderLabel,
+      inputValue = _this$props10.inputValue,
+      placeholder = _this$props10.placeholder,
+      isRequired = _this$props10.isRequired,
+      shouldNotWrap = _this$props10.shouldNotWrap,
+      size = _this$props10.size,
+      isInline = _this$props10.isInline,
+      width = _this$props10.width,
+      htmlSize = _this$props10.htmlSize,
+      messages = _this$props10.messages,
+      renderBeforeInput = _this$props10.renderBeforeInput,
+      renderAfterInput = _this$props10.renderAfterInput,
+      onFocus = _this$props10.onFocus,
+      onBlur = _this$props10.onBlur,
+      onInputChange = _this$props10.onInputChange,
+      onRequestHideOptions = _this$props10.onRequestHideOptions,
+      rest = _objectWithoutProperties(_this$props10, _excluded2);
     const interaction = this.interaction;
@@ -496,4 +554,4 @@ const passthroughProps = omitProps(rest, Select.allowedProps);
       display: isInline ? 'inline-block' : 'block',
-      renderBeforeInput,
-      renderAfterInput: renderAfterInput || this.renderIcon(),
+      renderBeforeInput: this.handleRenderBeforeInput(),
+      renderAfterInput: this.handleRenderAfterInput(),
       // If `inputValue` is provided, we need to pass a default onChange handler,
@@ -511,9 +569,9 @@ // because TextInput `value` is a controlled prop,
   render() {
-    const _this$props9 = this.props,
-      constrain = _this$props9.constrain,
-      placement = _this$props9.placement,
-      mountNode = _this$props9.mountNode,
-      assistiveText = _this$props9.assistiveText,
-      isShowingOptions = _this$props9.isShowingOptions,
-      styles = _this$props9.styles;
+    const _this$props11 = this.props,
+      constrain = _this$props11.constrain,
+      placement = _this$props11.placement,
+      mountNode = _this$props11.mountNode,
+      assistiveText = _this$props11.assistiveText,
+      isShowingOptions = _this$props11.isShowingOptions,
+      styles = _this$props11.styles;
     // clear temporary option store
@@ -551,3 +609,4 @@ this._optionIds = [];
       shouldReturnFocus: false,
-      withArrow: false
+      withArrow: false,
+      borderWidth: styles === null || styles === void 0 ? void 0 : styles.popoverBorderWidth
     }, this.renderList({
@@ -571,5 +630,6 @@ getListProps,
   shouldNotWrap: false,
-  scrollToHighlightedOption: true
+  scrollToHighlightedOption: true,
+  isOptionContentAppliedToInput: false
 }, _Select.Option = Option, _Select.Group = Group, _Select)) || _class) || _class) || _class);
 export default Select;
 export { Select };

es/Select/props.js

@@ -54,2 +54,3 @@ /*
   visibleOptionsCount: PropTypes.number,
+  isOptionContentAppliedToInput: PropTypes.bool,
   optionsMaxHeight: PropTypes.string,
@@ -77,3 +78,3 @@ optionsMaxWidth: PropTypes.string,
 };
-const allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];
+const allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'isOptionContentAppliedToInput', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];
 export { propTypes, allowedProps };

es/Select/styles.js

@@ -60,5 +60,6 @@ /*
       display: 'none'
-    }
+    },
+    popoverBorderWidth: componentTheme.popoverBorderWidth
   };
 };
 export default generateStyle;

es/Select/theme.js

@@ -42,3 +42,4 @@ /*
     color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010
+    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
+    popoverBorderWidth: 'small'
   };
@@ -45,0 +46,0 @@ return {

lib/Select/__new-tests__/Select.test.js

@@ -15,2 +15,6 @@ "use strict";
 var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
+var _IconAddLine = require("@instructure/ui-icons/lib/IconAddLine.js");
+var _IconCheckSolid = require("@instructure/ui-icons/lib/IconCheckSolid.js");
+var _IconDownloadSolid = require("@instructure/ui-icons/lib/IconDownloadSolid.js");
+var _IconEyeSolid = require("@instructure/ui-icons/lib/IconEyeSolid.js");
 var _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
@@ -50,2 +54,147 @@ /*
 }, opt));
+const optionsWithBeforeContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderBeforeLabel: 'XY'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconCheckSolid.IconCheckSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconEyeSolid.IconEyeSolid, null)
+}];
+const groupOptionsWithBeforeContent = {
+  Options1: [{
+    id: 'opt1',
+    label: 'Text1',
+    renderBeforeLabel: 'XY'
+  }, {
+    id: 'opt2',
+    label: 'Icon1',
+    renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconCheckSolid.IconCheckSolid, null)
+  }, {
+    id: 'opt3',
+    label: 'Colored Icon1',
+    renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconEyeSolid.IconEyeSolid, null)
+  }],
+  Options2: [{
+    id: 'opt4',
+    label: 'Text2',
+    renderBeforeLabel: 'AB'
+  }, {
+    id: 'opt5',
+    label: 'Icon2',
+    renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconAddLine.IconAddLine, null)
+  }, {
+    id: 'opt6',
+    label: 'Colored Icon2',
+    renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconDownloadSolid.IconDownloadSolid, null)
+  }]
+};
+const optionsWithAfterContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderAfterLabel: 'XY'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconCheckSolid.IconCheckSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconEyeSolid.IconEyeSolid, null)
+}];
+const groupOptionsWithAfterContent = {
+  Options1: [{
+    id: 'opt1',
+    label: 'Text1',
+    renderAfterLabel: 'XY'
+  }, {
+    id: 'opt2',
+    label: 'Icon1',
+    renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconCheckSolid.IconCheckSolid, null)
+  }, {
+    id: 'opt3',
+    label: 'Colored Icon1',
+    renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconEyeSolid.IconEyeSolid, null)
+  }],
+  Options2: [{
+    id: 'opt4',
+    label: 'Text2',
+    renderAfterLabel: 'AB'
+  }, {
+    id: 'opt5',
+    label: 'Icon2',
+    renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconAddLine.IconAddLine, null)
+  }, {
+    id: 'opt6',
+    label: 'Colored Icon2',
+    renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconDownloadSolid.IconDownloadSolid, null)
+  }]
+};
+const optionsWithBeforeAndAfterContent = [{
+  id: 'opt1',
+  label: 'Text',
+  renderBeforeLabel: 'XY',
+  renderAfterLabel: 'ZZ'
+}, {
+  id: 'opt2',
+  label: 'Icon',
+  renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconCheckSolid.IconCheckSolid, null),
+  renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconEyeSolid.IconEyeSolid, null)
+}, {
+  id: 'opt3',
+  label: 'Colored Icon',
+  renderBeforeLabel: /*#__PURE__*/_react.default.createElement(_IconEyeSolid.IconEyeSolid, null),
+  renderAfterLabel: /*#__PURE__*/_react.default.createElement(_IconCheckSolid.IconCheckSolid, null)
+}];
+const getOptionsWithBeforeContent = selected => optionsWithBeforeContent.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, Object.assign({}, opt, {
+  key: opt.id,
+  isSelected: opt.id === selected
+})));
+const getGroupOptionsWithBeforeContent = selected => {
+  return Object.keys(groupOptionsWithBeforeContent).map((key, index) => {
+    return /*#__PURE__*/_react.default.createElement(_index.default.Group, {
+      key: index,
+      renderLabel: key
+    }, groupOptionsWithBeforeContent[key].map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: opt.id,
+      key: opt.id,
+      value: opt.label,
+      renderBeforeLabel: opt.renderBeforeLabel,
+      isSelected: opt.id === selected
+    })));
+  });
+};
+const getOptionsWithAfterContent = selected => optionsWithAfterContent.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+  id: opt.id,
+  key: opt.id,
+  value: opt.label,
+  renderAfterLabel: opt.renderAfterLabel,
+  isSelected: opt.id === selected
+}));
+const getGroupOptionsWithAfterContent = selected => {
+  return Object.keys(groupOptionsWithAfterContent).map((key, index) => {
+    return /*#__PURE__*/_react.default.createElement(_index.default.Group, {
+      key: index,
+      renderLabel: key
+    }, groupOptionsWithAfterContent[key].map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: opt.id,
+      key: opt.id,
+      value: opt.label,
+      renderAfterLabel: opt.renderAfterLabel,
+      isSelected: opt.id === selected
+    })));
+  });
+};
+const getOptionsWithBeforeAndAfterContent = selected => optionsWithBeforeAndAfterContent.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+  id: opt.id,
+  key: opt.id,
+  value: opt.label,
+  renderBeforeLabel: opt.renderBeforeLabel,
+  renderAfterLabel: opt.renderAfterLabel,
+  isSelected: opt.id === selected
+}));
 _vitest.vi.mock('@instructure/ui-utils', async importOriginal => {
@@ -319,2 +468,155 @@ const originalModule = await importOriginal();
     });
+    it("should not render option's before content in input field when isOptionContentAppliedToInput is set to false ", async () => {
+      const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: false,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render8.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).not.toHaveTextContent('XY');
+    });
+    it('should render arrow in input field when isOptionContentAppliedToInput is set to false', async () => {
+      const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: false,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render9.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true", async () => {
+      const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render10.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content', async () => {
+      const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render11.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true", async () => {
+      const _render12 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithAfterContent[0].label
+        }, getOptionsWithAfterContent('opt1'))),
+        container = _render12.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true but renderBeforeInput is also set", async () => {
+      const _render13 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeContent[0].label,
+          renderBeforeInput: "ZZ"
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render13.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true but renderAfterInput is also set", async () => {
+      const _render14 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithAfterContent[0].label,
+          renderAfterInput: "ZZ"
+        }, getOptionsWithAfterContent('opt1'))),
+        container = _render14.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('XY');
+    });
+    it("should not render option's before content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
+      const _render15 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render15.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).not.toHaveTextContent('XY');
+    });
+    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
+      const _render16 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeAndAfterContent[0].label
+        }, getOptionsWithBeforeAndAfterContent('opt1'))),
+        container = _render16.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
+      const _render17 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: optionsWithBeforeAndAfterContent[0].label
+        }, getOptionsWithBeforeAndAfterContent('opt1'))),
+        container = _render17.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('ZZ');
+    });
+    it('should render arrow in input field when isOptionContentAppliedToInput is set to true but inputValue is not set', async () => {
+      const _render18 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render18.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should not render option's after content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
+      const _render19 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true
+        }, getOptionsWithBeforeContent('opt1'))),
+        container = _render19.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).not.toHaveTextContent('XY');
+    });
+    it("should render option's before content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
+      const _render20 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithBeforeContent.Options1[0].label
+        }, getGroupOptionsWithBeforeContent('opt1'))),
+        container = _render20.container;
+      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
+      expect(beforeContent).toHaveTextContent('XY');
+    });
+    it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content and group options', async () => {
+      const _render21 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithBeforeContent.Options1[0].label
+        }, getGroupOptionsWithBeforeContent('opt1'))),
+        container = _render21.container;
+      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
+      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
+      expect(svgElement).toBeInTheDocument();
+    });
+    it("should render option's after content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
+      const _render22 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isOptionContentAppliedToInput: true,
+          inputValue: groupOptionsWithAfterContent.Options2[0].label
+        }, getGroupOptionsWithAfterContent('opt4'))),
+        container = _render22.container;
+      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
+      expect(afterContent).toHaveTextContent('AB');
+    });
   });
@@ -365,8 +667,8 @@ describe('list', () => {
         const onRequestShowOptions = _vitest.vi.fn();
-        const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        const _render23 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          container = _render8.container,
-          rerender = _render8.rerender;
+          container = _render23.container,
+          rerender = _render23.rerender;
         const icon = container.querySelector('svg[name="IconArrowOpenDown"]');
@@ -396,7 +698,7 @@ const label = _react2.screen.getByText('Choose an option');
         const onRequestShowOptions = _vitest.vi.fn();
-        const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        const _render24 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          rerender = _render9.rerender;
+          rerender = _render24.rerender;
         const input = _react2.screen.getByLabelText('Choose an option');
@@ -435,7 +737,7 @@ await _userEvent.default.click(input);
         const onRequestShowOptions = _vitest.vi.fn();
-        const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        const _render25 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
           }, getOptions())),
-          rerender = _render10.rerender;
+          rerender = _render25.rerender;
         const input = _react2.screen.getByLabelText('Choose an option');
@@ -460,3 +762,3 @@ await _userEvent.default.type(input, '{space}');
         const onRequestHideOptions = _vitest.vi.fn();
-        const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        const _render26 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
@@ -466,3 +768,3 @@ isShowingOptions: true,
           }, getOptions())),
-          container = _render11.container;
+          container = _render26.container;
         const icon = container.querySelector('svg[name="IconArrowOpenUp"]');
@@ -497,3 +799,3 @@ const label = _react2.screen.getByText('Choose an option');
         const onRequestHideOptions = _vitest.vi.fn();
-        const _render12 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        const _render27 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
@@ -503,3 +805,3 @@ isShowingOptions: true,
           }, getOptions())),
-          rerender = _render12.rerender;
+          rerender = _render27.rerender;
         const input = _react2.screen.getByLabelText('Choose an option');
@@ -589,4 +891,4 @@ await _userEvent.default.click(input);
     }) => {
-      const _render13 = (0, _react2.render)(content),
-        container = _render13.container;
+      const _render28 = (0, _react2.render)(content),
+        container = _render28.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
@@ -593,0 +895,0 @@ expect(axeCheck).toBe(true);

lib/Select/index.js

@@ -445,23 +445,81 @@ "use strict";
   }
+  renderContentBeforeOrAfterInput(position) {
+    for (const child of this.childrenArray) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+        // Group found
+        const options = this.getGroupChildrenArray(child);
+        for (const option of options) {
+          if (option.props.isSelected) {
+            return position === 'before' ? option.props.renderBeforeLabel : option.props.renderAfterLabel ? option.props.renderAfterLabel : this.renderIcon();
+          }
+        }
+      } else {
+        // Ungrouped option found
+        if (child.props.isSelected) {
+          return position === 'before' ? child.props.renderBeforeLabel : child.props.renderAfterLabel ? child.props.renderAfterLabel : this.renderIcon();
+        }
+      }
+    }
+    // if no option with isSelected is found
+    if (position === 'after') {
+      return this.renderIcon();
+    }
+    return void 0;
+  }
+  handleInputContentRender(renderLabelInput, inputValue, isOptionContentAppliedToInput, position, defaultReturn) {
+    const isInputValueEmpty = !inputValue || inputValue === '';
+    if (renderLabelInput && isOptionContentAppliedToInput) {
+      if (!isInputValueEmpty) {
+        return this.renderContentBeforeOrAfterInput(position);
+      }
+      return renderLabelInput;
+    }
+    if (isOptionContentAppliedToInput) {
+      if (isInputValueEmpty) {
+        return defaultReturn;
+      }
+      return this.renderContentBeforeOrAfterInput(position);
+    }
+    if (renderLabelInput) {
+      return renderLabelInput;
+    }
+    return defaultReturn;
+  }
+  handleRenderBeforeInput() {
+    const _this$props8 = this.props,
+      renderBeforeInput = _this$props8.renderBeforeInput,
+      inputValue = _this$props8.inputValue,
+      isOptionContentAppliedToInput = _this$props8.isOptionContentAppliedToInput;
+    return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
+    );
+  }
+  handleRenderAfterInput() {
+    const _this$props9 = this.props,
+      renderAfterInput = _this$props9.renderAfterInput,
+      inputValue = _this$props9.inputValue,
+      isOptionContentAppliedToInput = _this$props9.isOptionContentAppliedToInput;
+    return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon() // default for after
+    );
+  }
   renderInput(data) {
     const getInputProps = data.getInputProps,
       getTriggerProps = data.getTriggerProps;
-    const _this$props8 = this.props,
-      renderLabel = _this$props8.renderLabel,
-      inputValue = _this$props8.inputValue,
-      placeholder = _this$props8.placeholder,
-      isRequired = _this$props8.isRequired,
-      shouldNotWrap = _this$props8.shouldNotWrap,
-      size = _this$props8.size,
-      isInline = _this$props8.isInline,
-      width = _this$props8.width,
-      htmlSize = _this$props8.htmlSize,
-      messages = _this$props8.messages,
-      renderBeforeInput = _this$props8.renderBeforeInput,
-      renderAfterInput = _this$props8.renderAfterInput,
-      onFocus = _this$props8.onFocus,
-      onBlur = _this$props8.onBlur,
-      onInputChange = _this$props8.onInputChange,
-      onRequestHideOptions = _this$props8.onRequestHideOptions,
-      rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded2);
+    const _this$props10 = this.props,
+      renderLabel = _this$props10.renderLabel,
+      inputValue = _this$props10.inputValue,
+      placeholder = _this$props10.placeholder,
+      isRequired = _this$props10.isRequired,
+      shouldNotWrap = _this$props10.shouldNotWrap,
+      size = _this$props10.size,
+      isInline = _this$props10.isInline,
+      width = _this$props10.width,
+      htmlSize = _this$props10.htmlSize,
+      messages = _this$props10.messages,
+      renderBeforeInput = _this$props10.renderBeforeInput,
+      renderAfterInput = _this$props10.renderAfterInput,
+      onFocus = _this$props10.onFocus,
+      onBlur = _this$props10.onBlur,
+      onInputChange = _this$props10.onInputChange,
+      onRequestHideOptions = _this$props10.onRequestHideOptions,
+      rest = (0, _objectWithoutProperties2.default)(_this$props10, _excluded2);
     const interaction = this.interaction;
@@ -508,4 +566,4 @@ const passthroughProps = (0, _omitProps.omitProps)(rest, Select.allowedProps);
       display: isInline ? 'inline-block' : 'block',
-      renderBeforeInput,
-      renderAfterInput: renderAfterInput || this.renderIcon(),
+      renderBeforeInput: this.handleRenderBeforeInput(),
+      renderAfterInput: this.handleRenderAfterInput(),
       // If `inputValue` is provided, we need to pass a default onChange handler,
@@ -523,9 +581,9 @@ // because TextInput `value` is a controlled prop,
   render() {
-    const _this$props9 = this.props,
-      constrain = _this$props9.constrain,
-      placement = _this$props9.placement,
-      mountNode = _this$props9.mountNode,
-      assistiveText = _this$props9.assistiveText,
-      isShowingOptions = _this$props9.isShowingOptions,
-      styles = _this$props9.styles;
+    const _this$props11 = this.props,
+      constrain = _this$props11.constrain,
+      placement = _this$props11.placement,
+      mountNode = _this$props11.mountNode,
+      assistiveText = _this$props11.assistiveText,
+      isShowingOptions = _this$props11.isShowingOptions,
+      styles = _this$props11.styles;
     // clear temporary option store
@@ -563,3 +621,4 @@ this._optionIds = [];
       shouldReturnFocus: false,
-      withArrow: false
+      withArrow: false,
+      borderWidth: styles === null || styles === void 0 ? void 0 : styles.popoverBorderWidth
     }, this.renderList({
@@ -583,4 +642,5 @@ getListProps,
   shouldNotWrap: false,
-  scrollToHighlightedOption: true
+  scrollToHighlightedOption: true,
+  isOptionContentAppliedToInput: false
 }, _Select.Option = _Option.Option, _Select.Group = _Group.Group, _Select)) || _class) || _class) || _class);
 var _default = exports.default = Select;

lib/Select/props.js

@@ -60,2 +60,3 @@ "use strict";
   visibleOptionsCount: _propTypes.default.number,
+  isOptionContentAppliedToInput: _propTypes.default.bool,
   optionsMaxHeight: _propTypes.default.string,
@@ -83,2 +84,2 @@ optionsMaxWidth: _propTypes.default.string,
 };
-const allowedProps = exports.allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'isOptionContentAppliedToInput', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];

lib/Select/styles.js

@@ -66,5 +66,6 @@ "use strict";
       display: 'none'
-    }
+    },
+    popoverBorderWidth: componentTheme.popoverBorderWidth
   };
 };
 var _default = exports.default = generateStyle;

lib/Select/theme.js

@@ -48,3 +48,4 @@ "use strict";
     color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010
+    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
+    popoverBorderWidth: 'small'
   };
@@ -51,0 +52,0 @@ return {

package.json

 {
   "name": "@instructure/ui-select",
-  "version": "10.11.1-snapshot-9",
+  "version": "10.12.0",
   "description": "A component for select and autocomplete behavior.",
@@ -26,9 +26,9 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.11.1-snapshot-9",
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-9",
-    "@instructure/ui-color-utils": "10.11.1-snapshot-9",
-    "@instructure/ui-scripts": "10.11.1-snapshot-9",
-    "@instructure/ui-test-locator": "10.11.1-snapshot-9",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-9",
-    "@instructure/ui-themes": "10.11.1-snapshot-9",
+    "@instructure/ui-axe-check": "10.12.0",
+    "@instructure/ui-babel-preset": "10.12.0",
+    "@instructure/ui-color-utils": "10.12.0",
+    "@instructure/ui-scripts": "10.12.0",
+    "@instructure/ui-test-locator": "10.12.0",
+    "@instructure/ui-test-utils": "10.12.0",
+    "@instructure/ui-themes": "10.12.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -41,18 +41,18 @@ "@testing-library/react": "^16.0.1",
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.11.1-snapshot-9",
-    "@instructure/shared-types": "10.11.1-snapshot-9",
-    "@instructure/ui-dom-utils": "10.11.1-snapshot-9",
-    "@instructure/ui-form-field": "10.11.1-snapshot-9",
-    "@instructure/ui-icons": "10.11.1-snapshot-9",
-    "@instructure/ui-options": "10.11.1-snapshot-9",
-    "@instructure/ui-popover": "10.11.1-snapshot-9",
-    "@instructure/ui-position": "10.11.1-snapshot-9",
-    "@instructure/ui-prop-types": "10.11.1-snapshot-9",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-9",
-    "@instructure/ui-selectable": "10.11.1-snapshot-9",
-    "@instructure/ui-testable": "10.11.1-snapshot-9",
-    "@instructure/ui-text-input": "10.11.1-snapshot-9",
-    "@instructure/ui-utils": "10.11.1-snapshot-9",
-    "@instructure/ui-view": "10.11.1-snapshot-9",
-    "@instructure/uid": "10.11.1-snapshot-9",
+    "@instructure/emotion": "10.12.0",
+    "@instructure/shared-types": "10.12.0",
+    "@instructure/ui-dom-utils": "10.12.0",
+    "@instructure/ui-form-field": "10.12.0",
+    "@instructure/ui-icons": "10.12.0",
+    "@instructure/ui-options": "10.12.0",
+    "@instructure/ui-popover": "10.12.0",
+    "@instructure/ui-position": "10.12.0",
+    "@instructure/ui-prop-types": "10.12.0",
+    "@instructure/ui-react-utils": "10.12.0",
+    "@instructure/ui-selectable": "10.12.0",
+    "@instructure/ui-testable": "10.12.0",
+    "@instructure/ui-text-input": "10.12.0",
+    "@instructure/ui-utils": "10.12.0",
+    "@instructure/ui-view": "10.12.0",
+    "@instructure/uid": "10.12.0",
     "prop-types": "^15.8.1"
@@ -59,0 +59,0 @@ },

src/Select/props.ts

@@ -82,2 +82,19 @@ /*
   /**
+   * Whether or not the content of the selected `Select.Option`'s `renderBeforeLabel` and `renderAfterLabel` appear in the input field.
+   *
+   * If the selected `Select.Option` has both `renderBeforeLabel` and `renderAfterLabel` content, both will be displayed in the input field.
+   *
+   * One of the `Select.Option`'s `isSelected` prop should be `true` in order to display the content in the input field.
+   *
+   * `Select.Option`'s `renderBeforeLabel` and `renderAfterLabel` content will not be displayed, if `Select`'s `inputValue` is an empty value, null or undefined.
+   *
+   * If `true` and the selected `Select.Option` has a `renderAfterLabel` value, it will replace the default arrow icon.
+   *
+   * If `true` and `Select`'s `renderBeforeInput` or `renderAfterInput` prop is set, it will display the selected `Select.Option`'s `renderBeforeLabel` and `renderAfterLabel` instead of `Select`'s `renderBeforeInput` or `renderAfterInput` value.
+   *
+   * If the selected `Select.Option`'s `renderAfterLabel` value is empty, default arrow icon will be rendered.
+   */
+  isOptionContentAppliedToInput?: boolean
+
+  /**
    * The max height the options list can be before having to scroll. If
@@ -277,3 +294,5 @@ * set, it will __override__ the `visibleOptionsCount` prop.
 
-type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>
+type SelectStyle = ComponentStyle<
+  'select' | 'icon' | 'assistiveText' | 'popoverBorderWidth'
+>
 
@@ -293,2 +312,3 @@ const propTypes: PropValidators<PropKeys> = {
   visibleOptionsCount: PropTypes.number,
+  isOptionContentAppliedToInput: PropTypes.bool,
   optionsMaxHeight: PropTypes.string,
@@ -331,2 +351,3 @@ optionsMaxWidth: PropTypes.string,
   'visibleOptionsCount',
+  'isOptionContentAppliedToInput',
   'optionsMaxHeight',
@@ -333,0 +354,0 @@ 'optionsMaxWidth',

src/Select/styles.ts

@@ -62,3 +62,4 @@ /*
       display: 'none'
-    }
+    },
+    popoverBorderWidth: componentTheme.popoverBorderWidth
   }
@@ -65,0 +66,0 @@ }

src/Select/theme.ts

@@ -45,3 +45,4 @@ /*
     color: colors?.contrasts?.grey125125,
-    background: colors?.contrasts?.white1010
+    background: colors?.contrasts?.white1010,
+    popoverBorderWidth: 'small'
   }
@@ -48,0 +49,0 @@

types/Select/index.d.ts

@@ -11,2 +11,3 @@ /** @jsx jsx */
 import type { SelectProps } from './props';
+import { Renderable } from '@instructure/shared-types';
 type GroupChild = React.ComponentElement<SelectGroupProps, Group>;
@@ -23,3 +24,3 @@ type OptionChild = React.ComponentElement<SelectOptionProps, Option>;
     static readonly componentId = "Select";
-    static allowedProps: readonly ("id" | "children" | "assistiveText" | "interaction" | "isInline" | "visibleOptionsCount" | "optionsMaxHeight" | "optionsMaxWidth" | "inputValue" | "onInputChange" | "listRef" | "scrollToHighlightedOption" | keyof {
+    static allowedProps: readonly ("id" | "children" | "assistiveText" | "interaction" | "isInline" | "visibleOptionsCount" | "isOptionContentAppliedToInput" | "optionsMaxHeight" | "optionsMaxWidth" | "inputValue" | "onInputChange" | "listRef" | "scrollToHighlightedOption" | keyof {
         isShowingOptions?: boolean;
@@ -36,3 +37,3 @@ onRequestShowOptions?: (event: React.SyntheticEvent) => void;
     } | keyof {
-        renderLabel: import("@instructure/shared-types").Renderable;
+        renderLabel: Renderable;
         size?: "small" | "medium" | "large";
@@ -47,4 +48,4 @@ placeholder?: string;
         inputRef?: (inputElement: HTMLInputElement | null) => void;
-        renderBeforeInput?: import("@instructure/shared-types").Renderable;
-        renderAfterInput?: import("@instructure/shared-types").Renderable;
+        renderBeforeInput?: Renderable;
+        renderAfterInput?: Renderable;
         shouldNotWrap?: boolean;
@@ -56,3 +57,3 @@ } | keyof {
     })[];
-    static propTypes: import("@instructure/shared-types").PropValidators<"id" | "children" | "assistiveText" | "interaction" | "isInline" | "visibleOptionsCount" | "optionsMaxHeight" | "optionsMaxWidth" | "inputValue" | "onInputChange" | "listRef" | "scrollToHighlightedOption" | keyof {
+    static propTypes: import("@instructure/shared-types").PropValidators<"id" | "children" | "assistiveText" | "interaction" | "isInline" | "visibleOptionsCount" | "isOptionContentAppliedToInput" | "optionsMaxHeight" | "optionsMaxWidth" | "inputValue" | "onInputChange" | "listRef" | "scrollToHighlightedOption" | keyof {
         isShowingOptions?: boolean;
@@ -69,3 +70,3 @@ onRequestShowOptions?: (event: React.SyntheticEvent) => void;
     } | keyof {
-        renderLabel: import("@instructure/shared-types").Renderable;
+        renderLabel: Renderable;
         size?: "small" | "medium" | "large";
@@ -80,4 +81,4 @@ placeholder?: string;
         inputRef?: (inputElement: HTMLInputElement | null) => void;
-        renderBeforeInput?: import("@instructure/shared-types").Renderable;
-        renderAfterInput?: import("@instructure/shared-types").Renderable;
+        renderBeforeInput?: Renderable;
+        renderAfterInput?: Renderable;
         shouldNotWrap?: boolean;
@@ -101,2 +102,3 @@ } | keyof {
         scrollToHighlightedOption: boolean;
+        isOptionContentAppliedToInput: boolean;
     };
@@ -140,2 +142,30 @@ static Option: typeof Option;
     renderIcon(): jsx.JSX.Element;
+    renderContentBeforeOrAfterInput(position: string): string | number | boolean | void | Iterable<React.ReactNode> | React.ComponentClass<{}, any> | Element | React.ClassType<{
+        id: string;
+        isHighlighted?: boolean;
+        isSelected?: boolean;
+        isDisabled?: boolean;
+        children?: React.ReactNode;
+    }, React.ClassicComponent<{
+        id: string;
+        isHighlighted?: boolean;
+        isSelected?: boolean;
+        isDisabled?: boolean;
+        children?: React.ReactNode;
+    }, any>, React.ClassicComponentClass<{
+        id: string;
+        isHighlighted?: boolean;
+        isSelected?: boolean;
+        isDisabled?: boolean;
+        children?: React.ReactNode;
+    }>> | ((data: {
+        id: string;
+        isHighlighted?: boolean;
+        isSelected?: boolean;
+        isDisabled?: boolean;
+        children?: React.ReactNode;
+    }) => React.ReactNode | Element) | jsx.JSX.Element | null;
+    handleInputContentRender(renderLabelInput: Renderable, inputValue: string | undefined, isOptionContentAppliedToInput: boolean, position: 'before' | 'after', defaultReturn: Renderable): Renderable;
+    handleRenderBeforeInput(): Renderable;
+    handleRenderAfterInput(): Renderable;
     renderInput(data: Pick<SelectableRender, 'getInputProps' | 'getTriggerProps'>): jsx.JSX.Element;
@@ -142,0 +172,0 @@ render(): jsx.JSX.Element;

types/Select/props.d.ts

@@ -35,2 +35,18 @@ import React, { InputHTMLAttributes } from 'react';
     /**
+     * Whether or not the content of the selected `Select.Option`'s `renderBeforeLabel` and `renderAfterLabel` appear in the input field.
+     *
+     * If the selected `Select.Option` has both `renderBeforeLabel` and `renderAfterLabel` content, both will be displayed in the input field.
+     *
+     * One of the `Select.Option`'s `isSelected` prop should be `true` in order to display the content in the input field.
+     *
+     * `Select.Option`'s `renderBeforeLabel` and `renderAfterLabel` content will not be displayed, if `Select`'s `inputValue` is an empty value, null or undefined.
+     *
+     * If `true` and the selected `Select.Option` has a `renderAfterLabel` value, it will replace the default arrow icon.
+     *
+     * If `true` and `Select`'s `renderBeforeInput` or `renderAfterInput` prop is set, it will display the selected `Select.Option`'s `renderBeforeLabel` and `renderAfterLabel` instead of `Select`'s `renderBeforeInput` or `renderAfterInput` value.
+     *
+     * If the selected `Select.Option`'s `renderAfterLabel` value is empty, default arrow icon will be rendered.
+     */
+    isOptionContentAppliedToInput?: boolean;
+    /**
      * The max height the options list can be before having to scroll. If
@@ -179,3 +195,3 @@ * set, it will __override__ the `visibleOptionsCount` prop.
 type SelectProps = SelectOwnProps & WithStyleProps<SelectTheme, SelectStyle> & OtherHTMLAttributes<SelectOwnProps, InputHTMLAttributes<SelectOwnProps & Element>> & WithDeterministicIdProps;
-type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>;
+type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText' | 'popoverBorderWidth'>;
 declare const propTypes: PropValidators<PropKeys>;
@@ -182,0 +198,0 @@ declare const allowedProps: AllowedPropKeys;

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1072704

increased by5.56%

Lines of code

9696

increased by16.01%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Added@instructure/console@10.12.0(transitive)

• + Added@instructure/debounce@10.12.0(transitive)

• + Added@instructure/emotion@10.12.0(transitive)

• + Added@instructure/shared-types@10.12.0(transitive)

• + Added@instructure/theme-registry@10.12.0(transitive)

• + Added@instructure/ui-a11y-content@10.12.0(transitive)

• + Added@instructure/ui-a11y-utils@10.12.0(transitive)

• + Added@instructure/ui-color-utils@10.12.0(transitive)

• + Added@instructure/ui-decorator@10.12.0(transitive)

• + Added@instructure/ui-dialog@10.12.0(transitive)

• + Added@instructure/ui-dom-utils@10.12.0(transitive)

• + Added@instructure/ui-form-field@10.12.0(transitive)

• + Added@instructure/ui-grid@10.12.0(transitive)

• + Added@instructure/ui-i18n@10.12.0(transitive)

• + Added@instructure/ui-icons@10.12.0(transitive)

• + Added@instructure/ui-options@10.12.0(transitive)

• + Added@instructure/ui-popover@10.12.0(transitive)

• + Added@instructure/ui-portal@10.12.0(transitive)

• + Added@instructure/ui-position@10.12.0(transitive)

• + Added@instructure/ui-prop-types@10.12.0(transitive)

• + Added@instructure/ui-react-utils@10.12.0(transitive)

• + Added@instructure/ui-selectable@10.12.0(transitive)

• + Added@instructure/ui-svg-images@10.12.0(transitive)

• + Added@instructure/ui-tag@10.12.0(transitive)

• + Added@instructure/ui-testable@10.12.0(transitive)

• + Added@instructure/ui-text-input@10.12.0(transitive)

• + Added@instructure/ui-themes@10.12.0(transitive)

• + Added@instructure/ui-utils@10.12.0(transitive)

• + Added@instructure/ui-view@10.12.0(transitive)

• + Added@instructure/uid@10.12.0(transitive)

• - Removed@instructure/console@10.11.1-snapshot-9(transitive)

• - Removed@instructure/debounce@10.11.1-snapshot-9(transitive)

• - Removed@instructure/emotion@10.11.1-snapshot-9(transitive)

• - Removed@instructure/shared-types@10.11.1-snapshot-9(transitive)

• - Removed@instructure/theme-registry@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-a11y-content@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-a11y-utils@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-color-utils@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-decorator@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-dialog@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-dom-utils@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-form-field@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-grid@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-i18n@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-icons@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-options@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-popover@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-portal@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-position@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-prop-types@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-react-utils@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-selectable@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-svg-images@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-tag@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-testable@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-text-input@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-themes@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-utils@10.11.1-snapshot-9(transitive)

• - Removed@instructure/ui-view@10.11.1-snapshot-9(transitive)

• - Removed@instructure/uid@10.11.1-snapshot-9(transitive)

• Updated@instructure/emotion@10.12.0

• Updated@instructure/shared-types@10.12.0

• Updated@instructure/ui-dom-utils@10.12.0

• Updated@instructure/ui-form-field@10.12.0

• Updated@instructure/ui-icons@10.12.0

• Updated@instructure/ui-options@10.12.0

• Updated@instructure/ui-popover@10.12.0

• Updated@instructure/ui-position@10.12.0

• Updated@instructure/ui-prop-types@10.12.0

• Updated@instructure/ui-react-utils@10.12.0

• Updated@instructure/ui-selectable@10.12.0

• Updated@instructure/ui-testable@10.12.0

• Updated@instructure/ui-text-input@10.12.0

• Updated@instructure/ui-utils@10.12.0

• Updated@instructure/ui-view@10.12.0

• Updated@instructure/uid@10.12.0