@instructure/ui-select 11.7.4-snapshot-132 → 11.7.4-snapshot-135

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-132](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-132) (2026-07-23)
+## [11.7.4-snapshot-135](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-135) (2026-07-24)
 
 
 ### Bug Fixes
@@ -15,6 +15,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
+* **ui-text-input,ui-select:** add contentSpacing prop for even wrapped-tag padding in multiple Select ([0969a00](https://github.com/instructure/instructure-ui/commit/0969a007a16c41eb2b5acec5ba1e4722b8ae0ed4))
 
 
 

package/es/Select/v2/index.js

@@ -556,6 +556,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle),
       isInline,
       width,
       htmlSize,
+      renderBeforeInputElementGap,
       messages,
       renderBeforeInput,
       renderAfterInput,
@@ -607,6 +608,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle),
       size,
       width,
       htmlSize,
+      renderBeforeInputElementGap,
       messages,
       value: inputValue,
       inputRef: utils.createChainedFunction(ref, this.handleInputRef),

package/es/Select/v2/props.js

@@ -31,5 +31,5 @@
 // These props are directly passed to Popover
 // TODO: import these from Popover once TS types can be imported
 
-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', 'layout'];
+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', 'renderBeforeInputElementGap', 'scrollToHighlightedOption', 'layout'];
 export { allowedProps };

package/lib/Select/v2/index.js

@@ -567,6 +567,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       isInline,
       width,
       htmlSize,
+      renderBeforeInputElementGap,
       messages,
       renderBeforeInput,
       renderAfterInput,
@@ -618,6 +619,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       size,
       width,
       htmlSize,
+      renderBeforeInputElementGap,
       messages,
       value: inputValue,
       inputRef: utils.createChainedFunction(ref, this.handleInputRef),

package/lib/Select/v2/props.js

@@ -37,4 +37,4 @@ exports.allowedProps = void 0;
 // These props are directly passed to Popover
 // TODO: import these from Popover once TS types can be imported
 
-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', 'layout'];
+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', 'renderBeforeInputElementGap', 'scrollToHighlightedOption', 'layout'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "11.7.4-snapshot-132",
+  "version": "11.7.4-snapshot-135",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,30 +15,30 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-132",
-    "@instructure/shared-types": "11.7.4-snapshot-132",
-    "@instructure/ui-icons": "11.7.4-snapshot-132",
-    "@instructure/emotion": "11.7.4-snapshot-132",
-    "@instructure/ui-form-field": "11.7.4-snapshot-132",
-    "@instructure/ui-options": "11.7.4-snapshot-132",
-    "@instructure/ui-popover": "11.7.4-snapshot-132",
-    "@instructure/ui-position": "11.7.4-snapshot-132",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-132",
-    "@instructure/ui-text-input": "11.7.4-snapshot-132",
-    "@instructure/ui-selectable": "11.7.4-snapshot-132",
-    "@instructure/ui-view": "11.7.4-snapshot-132",
-    "@instructure/uid": "11.7.4-snapshot-132",
-    "@instructure/ui-themes": "11.7.4-snapshot-132",
-    "@instructure/ui-utils": "11.7.4-snapshot-132"
+    "@instructure/emotion": "11.7.4-snapshot-135",
+    "@instructure/shared-types": "11.7.4-snapshot-135",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-135",
+    "@instructure/ui-icons": "11.7.4-snapshot-135",
+    "@instructure/ui-form-field": "11.7.4-snapshot-135",
+    "@instructure/ui-options": "11.7.4-snapshot-135",
+    "@instructure/ui-selectable": "11.7.4-snapshot-135",
+    "@instructure/ui-position": "11.7.4-snapshot-135",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-135",
+    "@instructure/ui-text-input": "11.7.4-snapshot-135",
+    "@instructure/ui-themes": "11.7.4-snapshot-135",
+    "@instructure/ui-utils": "11.7.4-snapshot-135",
+    "@instructure/ui-view": "11.7.4-snapshot-135",
+    "@instructure/uid": "11.7.4-snapshot-135",
+    "@instructure/ui-popover": "11.7.4-snapshot-135"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-132",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-132",
-    "@instructure/ui-scripts": "11.7.4-snapshot-132"
+    "@instructure/ui-scripts": "11.7.4-snapshot-135",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-135",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-135"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Select/v2/README.md

@@ -340,7 +340,7 @@ type: example
 
 #### Highlighting and selecting options
 
-To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](Tag) with [AccessibleContent](AccessibleContent) for each selected option via the `renderBeforeInput` prop.
+To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](Tag) with [AccessibleContent](AccessibleContent) for each selected option via the `renderBeforeInput` prop. Set `renderBeforeInputElementGap="even"` so wrapped tags are evenly spaced even as they wrap to multiple rows.
 
 > **Accessibility:** set an explicit `aria-label` on the `Select` (matching `renderLabel`) and list the selected options in the `assistiveText` (e.g. `"Alaska Selected, …"`), as the example below does. This keeps the combobox's accessible name limited to the field label, while screen reader users still hear which options are selected. Each pill's `"Remove …"` label is only announced when that pill receives focus.
 
@@ -491,9 +491,6 @@ type: example
               {getOptionById(id).label}
             </AccessibleContent>
           }
-          margin={
-            index > 0 ? 'xxx-small xx-small xxx-small 0' : '0 xx-small 0 0'
-          }
           onClick={(e) => dismissTag(e, id)}
         />
       ))
@@ -518,6 +515,7 @@ type: example
           renderLabel="Multiple Select"
           aria-label="Multiple Select"
           assistiveText={assistiveText}
+          renderBeforeInputElementGap="even"
           inputValue={inputValue}
           isShowingOptions={isShowingOptions}
           inputRef={(el) => {
@@ -531,6 +529,7 @@ type: example
           onRequestSelectOption={handleSelectOption}
           onKeyDown={handleKeyDown}
           renderBeforeInput={selectedOptionId.length > 0 ? renderTags() : null}
+          htmlSize={2}
         >
           {filteredOptions.length > 0 ? (
             filteredOptions.map((option, index) => {

package/src/Select/v2/index.tsx

@@ -703,6 +703,7 @@ class Select extends Component<SelectProps> {
       isInline,
       width,
       htmlSize,
+      renderBeforeInputElementGap,
       messages,
       renderBeforeInput,
       renderAfterInput,
@@ -756,6 +757,7 @@ class Select extends Component<SelectProps> {
       size,
       width,
       htmlSize,
+      renderBeforeInputElementGap,
       messages,
       value: inputValue,
       inputRef: utils.createChainedFunction(ref, this.handleInputRef),

package/src/Select/v2/props.ts

@@ -248,6 +248,14 @@ type PropsFromTextInput = {
    */
   shouldNotWrap?: boolean
 
+  /**
+   * Whether to apply a gap between the elements rendered via `renderBeforeInput`
+   * (a CSS flex container), e.g. tags.
+   * - `'default'`: no gap is applied between the elements.
+   * - `'even'`: wrapped rows are evenly spaced with a vertical and horizontal gap.
+   */
+  renderBeforeInputElementGap?: 'default' | 'even'
+
   /**
    * In `stacked` mode the input is below the label.
    *
@@ -325,6 +333,7 @@ const allowedProps: AllowedPropKeys = [
   'renderAfterInput',
   'children',
   'shouldNotWrap',
+  'renderBeforeInputElementGap',
   'scrollToHighlightedOption',
   'layout'
 ]