@instructure/ui-select 10.11.1-snapshot-11 → 10.11.1-snapshot-14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +6 -1
  2. package/es/Select/index.js +2 -1
  3. package/es/Select/styles.js +2 -1
  4. package/es/Select/theme.js +2 -1
  5. package/lib/Select/index.js +2 -1
  6. package/lib/Select/styles.js +2 -1
  7. package/lib/Select/theme.js +2 -1
  8. package/package.json +24 -24
  9. package/src/Select/index.tsx +2 -1
  10. package/src/Select/props.ts +3 -1
  11. package/src/Select/styles.ts +2 -1
  12. package/src/Select/theme.ts +2 -1
  13. package/tsconfig.build.tsbuildinfo +1 -1
  14. package/types/Select/index.d.ts.map +1 -1
  15. package/types/Select/props.d.ts +1 -1
  16. package/types/Select/props.d.ts.map +1 -1
  17. package/types/Select/styles.d.ts.map +1 -1
  18. package/types/Select/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.11.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-11) (2025-02-21)
6
+ ## [10.11.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-14) (2025-02-21)
7
7
 
8
8
 
9
9
  ### Bug Fixes
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
11
11
  * **ui-select:** fix select's dropdown border radius ([7427773](https://github.com/instructure/instructure-ui/commit/74277738698fd9014a6cd5e4043f717914bc863d))
12
12
 
13
13
 
14
+ ### Features
15
+
16
+ * **ui-popover, ui-select:** allow overriding Select's dropdown border ([90d59d3](https://github.com/instructure/instructure-ui/commit/90d59d3c3689c3a1500c37db363fa43c1b8403d7))
17
+
18
+
14
19
 
15
20
 
16
21
 
package/es/Select/index.js CHANGED
@@ -545,7 +545,8 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
545
545
  positionTarget: this._inputContainer,
546
546
  isShowingContent: isShowingOptions,
547
547
  shouldReturnFocus: false,
548
- withArrow: false
548
+ withArrow: false,
549
+ borderWidth: styles === null || styles === void 0 ? void 0 : styles.popoverBorderWidth
549
550
  }, this.renderList({
550
551
  getListProps,
551
552
  getOptionProps,
package/es/Select/styles.js CHANGED
@@ -57,7 +57,8 @@ const generateStyle = (componentTheme, props) => {
57
57
  assistiveText: {
58
58
  label: 'select__assistiveText',
59
59
  display: 'none'
60
- }
60
+ },
61
+ popoverBorderWidth: componentTheme.popoverBorderWidth
61
62
  };
62
63
  };
63
64
  export default generateStyle;
package/es/Select/theme.js CHANGED
@@ -39,7 +39,8 @@ const generateComponentTheme = theme => {
39
39
  mediumIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
40
40
  largeIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
41
41
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
42
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010
42
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
43
+ popoverBorderWidth: 'small'
43
44
  };
44
45
  return {
45
46
  ...componentVariables
package/lib/Select/index.js CHANGED
@@ -557,7 +557,8 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
557
557
  positionTarget: this._inputContainer,
558
558
  isShowingContent: isShowingOptions,
559
559
  shouldReturnFocus: false,
560
- withArrow: false
560
+ withArrow: false,
561
+ borderWidth: styles === null || styles === void 0 ? void 0 : styles.popoverBorderWidth
561
562
  }, this.renderList({
562
563
  getListProps,
563
564
  getOptionProps,
package/lib/Select/styles.js CHANGED
@@ -63,7 +63,8 @@ const generateStyle = (componentTheme, props) => {
63
63
  assistiveText: {
64
64
  label: 'select__assistiveText',
65
65
  display: 'none'
66
- }
66
+ },
67
+ popoverBorderWidth: componentTheme.popoverBorderWidth
67
68
  };
68
69
  };
69
70
  var _default = exports.default = generateStyle;
package/lib/Select/theme.js CHANGED
@@ -45,7 +45,8 @@ const generateComponentTheme = theme => {
45
45
  mediumIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
46
46
  largeIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
47
47
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
48
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010
48
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
49
+ popoverBorderWidth: 'small'
49
50
  };
50
51
  return {
51
52
  ...componentVariables
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-select",
3
- "version": "10.11.1-snapshot-11",
3
+ "version": "10.11.1-snapshot-14",
4
4
  "description": "A component for select and autocomplete behavior.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,13 +23,13 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.11.1-snapshot-11",
27
- "@instructure/ui-babel-preset": "10.11.1-snapshot-11",
28
- "@instructure/ui-color-utils": "10.11.1-snapshot-11",
29
- "@instructure/ui-scripts": "10.11.1-snapshot-11",
30
- "@instructure/ui-test-locator": "10.11.1-snapshot-11",
31
- "@instructure/ui-test-utils": "10.11.1-snapshot-11",
32
- "@instructure/ui-themes": "10.11.1-snapshot-11",
26
+ "@instructure/ui-axe-check": "10.11.1-snapshot-14",
27
+ "@instructure/ui-babel-preset": "10.11.1-snapshot-14",
28
+ "@instructure/ui-color-utils": "10.11.1-snapshot-14",
29
+ "@instructure/ui-scripts": "10.11.1-snapshot-14",
30
+ "@instructure/ui-test-locator": "10.11.1-snapshot-14",
31
+ "@instructure/ui-test-utils": "10.11.1-snapshot-14",
32
+ "@instructure/ui-themes": "10.11.1-snapshot-14",
33
33
  "@testing-library/jest-dom": "^6.6.3",
34
34
  "@testing-library/react": "^16.0.1",
35
35
  "@testing-library/user-event": "^14.5.2",
@@ -37,22 +37,22 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "@babel/runtime": "^7.26.0",
40
- "@instructure/emotion": "10.11.1-snapshot-11",
41
- "@instructure/shared-types": "10.11.1-snapshot-11",
42
- "@instructure/ui-dom-utils": "10.11.1-snapshot-11",
43
- "@instructure/ui-form-field": "10.11.1-snapshot-11",
44
- "@instructure/ui-icons": "10.11.1-snapshot-11",
45
- "@instructure/ui-options": "10.11.1-snapshot-11",
46
- "@instructure/ui-popover": "10.11.1-snapshot-11",
47
- "@instructure/ui-position": "10.11.1-snapshot-11",
48
- "@instructure/ui-prop-types": "10.11.1-snapshot-11",
49
- "@instructure/ui-react-utils": "10.11.1-snapshot-11",
50
- "@instructure/ui-selectable": "10.11.1-snapshot-11",
51
- "@instructure/ui-testable": "10.11.1-snapshot-11",
52
- "@instructure/ui-text-input": "10.11.1-snapshot-11",
53
- "@instructure/ui-utils": "10.11.1-snapshot-11",
54
- "@instructure/ui-view": "10.11.1-snapshot-11",
55
- "@instructure/uid": "10.11.1-snapshot-11",
40
+ "@instructure/emotion": "10.11.1-snapshot-14",
41
+ "@instructure/shared-types": "10.11.1-snapshot-14",
42
+ "@instructure/ui-dom-utils": "10.11.1-snapshot-14",
43
+ "@instructure/ui-form-field": "10.11.1-snapshot-14",
44
+ "@instructure/ui-icons": "10.11.1-snapshot-14",
45
+ "@instructure/ui-options": "10.11.1-snapshot-14",
46
+ "@instructure/ui-popover": "10.11.1-snapshot-14",
47
+ "@instructure/ui-position": "10.11.1-snapshot-14",
48
+ "@instructure/ui-prop-types": "10.11.1-snapshot-14",
49
+ "@instructure/ui-react-utils": "10.11.1-snapshot-14",
50
+ "@instructure/ui-selectable": "10.11.1-snapshot-14",
51
+ "@instructure/ui-testable": "10.11.1-snapshot-14",
52
+ "@instructure/ui-text-input": "10.11.1-snapshot-14",
53
+ "@instructure/ui-utils": "10.11.1-snapshot-14",
54
+ "@instructure/ui-view": "10.11.1-snapshot-14",
55
+ "@instructure/uid": "10.11.1-snapshot-14",
56
56
  "prop-types": "^15.8.1"
57
57
  },
58
58
  "peerDependencies": {
package/src/Select/index.tsx CHANGED
@@ -60,7 +60,7 @@ import type {
60
60
  SelectableRender
61
61
  } from '@instructure/ui-selectable'
62
62
 
63
- import { withStyle, jsx } from '@instructure/emotion'
63
+ import { withStyle, jsx, BorderWidth } from '@instructure/emotion'
64
64
 
65
65
  import generateStyle from './styles'
66
66
  import generateComponentTheme from './theme'
@@ -713,6 +713,7 @@ class Select extends Component<SelectProps> {
713
713
  isShowingContent={isShowingOptions}
714
714
  shouldReturnFocus={false}
715
715
  withArrow={false}
716
+ borderWidth={styles?.popoverBorderWidth as BorderWidth}
716
717
  >
717
718
  {this.renderList({
718
719
  getListProps,
package/src/Select/props.ts CHANGED
@@ -273,7 +273,9 @@ type SelectProps = SelectOwnProps &
273
273
  > &
274
274
  WithDeterministicIdProps
275
275
 
276
- type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>
276
+ type SelectStyle = ComponentStyle<
277
+ 'select' | 'icon' | 'assistiveText' | 'popoverBorderWidth'
278
+ >
277
279
 
278
280
  const propTypes: PropValidators<PropKeys> = {
279
281
  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
package/src/Select/styles.ts CHANGED
@@ -59,7 +59,8 @@ const generateStyle = (
59
59
  assistiveText: {
60
60
  label: 'select__assistiveText',
61
61
  display: 'none'
62
- }
62
+ },
63
+ popoverBorderWidth: componentTheme.popoverBorderWidth
63
64
  }
64
65
  }
65
66
 
package/src/Select/theme.ts CHANGED
@@ -42,7 +42,8 @@ const generateComponentTheme = (theme: Theme): SelectTheme => {
42
42
  largeIconSize: typography?.fontSizeMedium,
43
43
 
44
44
  color: colors?.contrasts?.grey125125,
45
- background: colors?.contrasts?.white1010
45
+ background: colors?.contrasts?.white1010,
46
+ popoverBorderWidth: 'small'
46
47
  }
47
48
 
48
49
  return {