@instructure/ui-options 11.7.2-snapshot-48 → 11.7.2-snapshot-50

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 (22) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/es/Options/v1/Item/index.js +12 -7
  3. package/es/Options/v1/index.js +9 -3
  4. package/es/Options/v2/Item/index.js +12 -7
  5. package/es/Options/v2/Item/styles.js +1 -1
  6. package/es/Options/v2/index.js +9 -3
  7. package/lib/Options/v1/Item/index.js +11 -6
  8. package/lib/Options/v1/index.js +7 -1
  9. package/lib/Options/v2/Item/index.js +11 -6
  10. package/lib/Options/v2/Item/styles.js +1 -1
  11. package/lib/Options/v2/index.js +7 -1
  12. package/package.json +11 -11
  13. package/src/Options/v1/Item/index.tsx +13 -7
  14. package/src/Options/v1/index.tsx +10 -3
  15. package/src/Options/v2/Item/index.tsx +13 -7
  16. package/src/Options/v2/Item/styles.ts +1 -1
  17. package/src/Options/v2/index.tsx +10 -3
  18. package/tsconfig.build.tsbuildinfo +1 -1
  19. package/types/Options/v1/Item/index.d.ts.map +1 -1
  20. package/types/Options/v1/index.d.ts.map +1 -1
  21. package/types/Options/v2/Item/index.d.ts.map +1 -1
  22. package/types/Options/v2/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,16 +3,24 @@
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
- ## [11.7.2-snapshot-48](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-48) (2026-04-16)
6
+ ## [11.7.2-snapshot-50](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-50) (2026-04-21)
7
7
 
8
8
 
9
9
  ### Features
10
10
 
11
+ * **many:** rework Select, SimpleSelect and TimeSelect ([fb95519](https://github.com/instructure/instructure-ui/commit/fb9551958326bdc8e95d55075c27c7e078c0c69c))
12
+ * **many:** rework TopNavBar ([bf40e4f](https://github.com/instructure/instructure-ui/commit/bf40e4f380dce5edc45a0f0bc83d5a5070d3be2b))
11
13
  * **ui,ui-options,ui-drilldown:** rework Drilldown ([0562fe2](https://github.com/instructure/instructure-ui/commit/0562fe2b43e3235fc78c4981ada504c1a2f10d1a))
12
14
 
13
15
 
14
16
  ### BREAKING CHANGES
15
17
 
18
+ * **many:** contains breaking changes due to component using the new theming system
19
+
20
+ INSTUI-4967
21
+ * **many:** contains breaking changes due to component using the new theming system
22
+
23
+ INSTUI-4807
16
24
  * **ui,ui-options,ui-drilldown:** contains breaking changes due to component using the new theming system
17
25
 
18
26
  INSTUI-4792
package/es/Options/v1/Item/index.js CHANGED
@@ -23,7 +23,7 @@ var _dec, _dec2, _class, _Item;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import { Component } from 'react';
26
+ import { Component, createElement } from 'react';
27
27
  import { omitProps, getElementType, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
28
28
  import { withStyleLegacy as withStyle } from '@instructure/emotion';
29
29
  import generateStyles from "./styles.js";
@@ -58,16 +58,21 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
58
58
  as = _this$props3.as,
59
59
  role = _this$props3.role,
60
60
  children = _this$props3.children;
61
+ let labelContent;
62
+ if (typeof renderLabel === 'function') {
63
+ labelContent = /*#__PURE__*/createElement(renderLabel, {
64
+ variant,
65
+ as,
66
+ role
67
+ }, children);
68
+ } else {
69
+ labelContent = renderLabel;
70
+ }
61
71
  return _jsx("span", {
62
72
  css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
63
73
  role: "presentation",
64
74
  "aria-hidden": "true",
65
- children: callRenderProp(renderLabel, {
66
- variant,
67
- as,
68
- role,
69
- children
70
- })
75
+ children: labelContent
71
76
  });
72
77
  }
73
78
  render() {
package/es/Options/v1/index.js CHANGED
@@ -23,8 +23,8 @@ var _dec, _dec2, _class, _Options;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import { Component, Children } from 'react';
27
- import { omitProps, matchComponentTypes, callRenderProp, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
26
+ import { Component, Children, createElement } from 'react';
27
+ import { omitProps, matchComponentTypes, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
28
28
  import { View } from '@instructure/ui-view/v11_6';
29
29
  import { withStyleLegacy as withStyle } from '@instructure/emotion';
30
30
  import generateStyles from "./styles.js";
@@ -67,6 +67,12 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
67
67
  const _this$props3 = this.props,
68
68
  renderLabel = _this$props3.renderLabel,
69
69
  styles = _this$props3.styles;
70
+ let labelContent;
71
+ if (typeof renderLabel === 'function') {
72
+ labelContent = /*#__PURE__*/createElement(renderLabel, {});
73
+ } else {
74
+ labelContent = renderLabel;
75
+ }
70
76
  return _jsx("span", {
71
77
  id: this._labelId,
72
78
  role: "presentation"
@@ -74,7 +80,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
74
80
  ,
75
81
  "aria-hidden": isAndroidOrIOS() ? 'false' : 'true',
76
82
  css: styles === null || styles === void 0 ? void 0 : styles.label,
77
- children: callRenderProp(renderLabel)
83
+ children: labelContent
78
84
  });
79
85
  }
80
86
  renderSubList(subOptions) {
package/es/Options/v2/Item/index.js CHANGED
@@ -23,7 +23,7 @@ var _dec, _dec2, _class, _Item;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import { Component } from 'react';
26
+ import { Component, createElement } from 'react';
27
27
  import { omitProps, getElementType, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
28
28
  import { withStyle } from '@instructure/emotion';
29
29
  import generateStyles from "./styles.js";
@@ -57,16 +57,21 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles), _de
57
57
  as = _this$props3.as,
58
58
  role = _this$props3.role,
59
59
  children = _this$props3.children;
60
+ let labelContent;
61
+ if (typeof renderLabel === 'function') {
62
+ labelContent = /*#__PURE__*/createElement(renderLabel, {
63
+ variant,
64
+ as,
65
+ role
66
+ }, children);
67
+ } else {
68
+ labelContent = renderLabel;
69
+ }
60
70
  return _jsx("span", {
61
71
  css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
62
72
  role: "presentation",
63
73
  "aria-hidden": "true",
64
- children: callRenderProp(renderLabel, {
65
- variant,
66
- as,
67
- role,
68
- children
69
- })
74
+ children: labelContent
70
75
  });
71
76
  }
72
77
  render() {
package/es/Options/v2/Item/styles.js CHANGED
@@ -64,7 +64,7 @@ const generateStyle = (componentTheme, props) => {
64
64
  },
65
65
  'selected-highlighted': {
66
66
  background: componentTheme.selectedHighlightedBackground,
67
- color: componentTheme.highlightedLabelColor
67
+ color: componentTheme.selectedLabelColor
68
68
  },
69
69
  default: {
70
70
  transition: 'background 200ms'
package/es/Options/v2/index.js CHANGED
@@ -23,8 +23,8 @@ var _dec, _dec2, _class, _Options;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import { Component, Children } from 'react';
27
- import { omitProps, matchComponentTypes, callRenderProp, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
26
+ import { Component, Children, createElement } from 'react';
27
+ import { omitProps, matchComponentTypes, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
28
28
  import { View } from '@instructure/ui-view/latest';
29
29
  import { withStyle } from '@instructure/emotion';
30
30
  import generateStyles from "./styles.js";
@@ -66,6 +66,12 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles),
66
66
  const _this$props3 = this.props,
67
67
  renderLabel = _this$props3.renderLabel,
68
68
  styles = _this$props3.styles;
69
+ let labelContent;
70
+ if (typeof renderLabel === 'function') {
71
+ labelContent = /*#__PURE__*/createElement(renderLabel, {});
72
+ } else {
73
+ labelContent = renderLabel;
74
+ }
69
75
  return _jsx("span", {
70
76
  id: this._labelId,
71
77
  role: "presentation"
@@ -73,7 +79,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles),
73
79
  ,
74
80
  "aria-hidden": isAndroidOrIOS() ? 'false' : 'true',
75
81
  css: styles === null || styles === void 0 ? void 0 : styles.label,
76
- children: callRenderProp(renderLabel)
82
+ children: labelContent
77
83
  });
78
84
  }
79
85
  renderSubList(subOptions) {
package/lib/Options/v1/Item/index.js CHANGED
@@ -64,16 +64,21 @@ let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
64
64
  as = _this$props3.as,
65
65
  role = _this$props3.role,
66
66
  children = _this$props3.children;
67
+ let labelContent;
68
+ if (typeof renderLabel === 'function') {
69
+ labelContent = /*#__PURE__*/(0, _react.createElement)(renderLabel, {
70
+ variant,
71
+ as,
72
+ role
73
+ }, children);
74
+ } else {
75
+ labelContent = renderLabel;
76
+ }
67
77
  return (0, _jsxRuntime.jsx)("span", {
68
78
  css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
69
79
  role: "presentation",
70
80
  "aria-hidden": "true",
71
- children: (0, _uiReactUtils.callRenderProp)(renderLabel, {
72
- variant,
73
- as,
74
- role,
75
- children
76
- })
81
+ children: labelContent
77
82
  });
78
83
  }
79
84
  render() {
package/lib/Options/v1/index.js CHANGED
@@ -73,6 +73,12 @@ let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)()
73
73
  const _this$props3 = this.props,
74
74
  renderLabel = _this$props3.renderLabel,
75
75
  styles = _this$props3.styles;
76
+ let labelContent;
77
+ if (typeof renderLabel === 'function') {
78
+ labelContent = /*#__PURE__*/(0, _react.createElement)(renderLabel, {});
79
+ } else {
80
+ labelContent = renderLabel;
81
+ }
76
82
  return (0, _jsxRuntime.jsx)("span", {
77
83
  id: this._labelId,
78
84
  role: "presentation"
@@ -80,7 +86,7 @@ let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)()
80
86
  ,
81
87
  "aria-hidden": (0, _uiUtils.isAndroidOrIOS)() ? 'false' : 'true',
82
88
  css: styles === null || styles === void 0 ? void 0 : styles.label,
83
- children: (0, _uiReactUtils.callRenderProp)(renderLabel)
89
+ children: labelContent
84
90
  });
85
91
  }
86
92
  renderSubList(subOptions) {
package/lib/Options/v2/Item/index.js CHANGED
@@ -63,16 +63,21 @@ let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
63
63
  as = _this$props3.as,
64
64
  role = _this$props3.role,
65
65
  children = _this$props3.children;
66
+ let labelContent;
67
+ if (typeof renderLabel === 'function') {
68
+ labelContent = /*#__PURE__*/(0, _react.createElement)(renderLabel, {
69
+ variant,
70
+ as,
71
+ role
72
+ }, children);
73
+ } else {
74
+ labelContent = renderLabel;
75
+ }
66
76
  return (0, _jsxRuntime.jsx)("span", {
67
77
  css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
68
78
  role: "presentation",
69
79
  "aria-hidden": "true",
70
- children: (0, _uiReactUtils.callRenderProp)(renderLabel, {
71
- variant,
72
- as,
73
- role,
74
- children
75
- })
80
+ children: labelContent
76
81
  });
77
82
  }
78
83
  render() {
package/lib/Options/v2/Item/styles.js CHANGED
@@ -70,7 +70,7 @@ const generateStyle = (componentTheme, props) => {
70
70
  },
71
71
  'selected-highlighted': {
72
72
  background: componentTheme.selectedHighlightedBackground,
73
- color: componentTheme.highlightedLabelColor
73
+ color: componentTheme.selectedLabelColor
74
74
  },
75
75
  default: {
76
76
  transition: 'background 200ms'
package/lib/Options/v2/index.js CHANGED
@@ -72,6 +72,12 @@ let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)()
72
72
  const _this$props3 = this.props,
73
73
  renderLabel = _this$props3.renderLabel,
74
74
  styles = _this$props3.styles;
75
+ let labelContent;
76
+ if (typeof renderLabel === 'function') {
77
+ labelContent = /*#__PURE__*/(0, _react.createElement)(renderLabel, {});
78
+ } else {
79
+ labelContent = renderLabel;
80
+ }
75
81
  return (0, _jsxRuntime.jsx)("span", {
76
82
  id: this._labelId,
77
83
  role: "presentation"
@@ -79,7 +85,7 @@ let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)()
79
85
  ,
80
86
  "aria-hidden": (0, _uiUtils.isAndroidOrIOS)() ? 'false' : 'true',
81
87
  css: styles === null || styles === void 0 ? void 0 : styles.label,
82
- children: (0, _uiReactUtils.callRenderProp)(renderLabel)
88
+ children: labelContent
83
89
  });
84
90
  }
85
91
  renderSubList(subOptions) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-options",
3
- "version": "11.7.2-snapshot-48",
3
+ "version": "11.7.2-snapshot-50",
4
4
  "description": "A view-only component for composing interactive lists and menus.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -15,22 +15,22 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.27.6",
18
- "@instructure/emotion": "11.7.2-snapshot-48",
19
- "@instructure/shared-types": "11.7.2-snapshot-48",
20
- "@instructure/ui-icons": "11.7.2-snapshot-48",
21
- "@instructure/ui-react-utils": "11.7.2-snapshot-48",
22
- "@instructure/ui-utils": "11.7.2-snapshot-48",
23
- "@instructure/ui-view": "11.7.2-snapshot-48"
18
+ "@instructure/emotion": "11.7.2-snapshot-50",
19
+ "@instructure/ui-icons": "11.7.2-snapshot-50",
20
+ "@instructure/ui-react-utils": "11.7.2-snapshot-50",
21
+ "@instructure/ui-utils": "11.7.2-snapshot-50",
22
+ "@instructure/shared-types": "11.7.2-snapshot-50",
23
+ "@instructure/ui-view": "11.7.2-snapshot-50"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@testing-library/jest-dom": "^6.6.3",
27
27
  "@testing-library/react": "15.0.7",
28
28
  "@testing-library/user-event": "^14.6.1",
29
29
  "vitest": "^3.2.2",
30
- "@instructure/ui-axe-check": "11.7.2-snapshot-48",
31
- "@instructure/ui-babel-preset": "11.7.2-snapshot-48",
32
- "@instructure/ui-themes": "11.7.2-snapshot-48",
33
- "@instructure/ui-color-utils": "11.7.2-snapshot-48"
30
+ "@instructure/ui-axe-check": "11.7.2-snapshot-50",
31
+ "@instructure/ui-babel-preset": "11.7.2-snapshot-50",
32
+ "@instructure/ui-color-utils": "11.7.2-snapshot-50",
33
+ "@instructure/ui-themes": "11.7.2-snapshot-50"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=18 <=19"
package/src/Options/v1/Item/index.tsx CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { Component } from 'react'
25
+ import { Component, createElement } from 'react'
26
26
 
27
27
  import {
28
28
  omitProps,
@@ -89,18 +89,24 @@ class Item extends Component<OptionsItemProps> {
89
89
  ) {
90
90
  const { styles, variant, as, role, children } = this.props
91
91
 
92
+ let labelContent: React.ReactNode
93
+ if (typeof renderLabel === 'function') {
94
+ labelContent = createElement(
95
+ renderLabel as React.ComponentType<any>,
96
+ { variant, as, role },
97
+ children as React.ReactNode
98
+ )
99
+ } else {
100
+ labelContent = renderLabel as React.ReactNode
101
+ }
102
+
92
103
  return (
93
104
  <span
94
105
  css={[styles?.content, contentVariant]}
95
106
  role="presentation"
96
107
  aria-hidden="true"
97
108
  >
98
- {callRenderProp(renderLabel, {
99
- variant,
100
- as,
101
- role,
102
- children
103
- })}
109
+ {labelContent}
104
110
  </span>
105
111
  )
106
112
  }
package/src/Options/v1/index.tsx CHANGED
@@ -22,12 +22,11 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { ComponentElement, Component, Children } from 'react'
25
+ import { ComponentElement, Component, Children, createElement } from 'react'
26
26
 
27
27
  import {
28
28
  omitProps,
29
29
  matchComponentTypes,
30
- callRenderProp,
31
30
  safeCloneElement,
32
31
  withDeterministicId
33
32
  } from '@instructure/ui-react-utils'
@@ -101,6 +100,14 @@ class Options extends Component<OptionsProps> {
101
100
 
102
101
  renderLabel() {
103
102
  const { renderLabel, styles } = this.props
103
+
104
+ let labelContent: React.ReactNode
105
+ if (typeof renderLabel === 'function') {
106
+ labelContent = createElement(renderLabel as React.ComponentType<any>, {})
107
+ } else {
108
+ labelContent = renderLabel as React.ReactNode
109
+ }
110
+
104
111
  return (
105
112
  <span
106
113
  id={this._labelId}
@@ -109,7 +116,7 @@ class Options extends Component<OptionsProps> {
109
116
  aria-hidden={isAndroidOrIOS() ? 'false' : 'true'}
110
117
  css={styles?.label}
111
118
  >
112
- {callRenderProp(renderLabel)}
119
+ {labelContent}
113
120
  </span>
114
121
  )
115
122
  }
package/src/Options/v2/Item/index.tsx CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { Component } from 'react'
25
+ import { Component, createElement } from 'react'
26
26
 
27
27
  import {
28
28
  omitProps,
@@ -88,18 +88,24 @@ class Item extends Component<OptionsItemProps> {
88
88
  ) {
89
89
  const { styles, variant, as, role, children } = this.props
90
90
 
91
+ let labelContent: React.ReactNode
92
+ if (typeof renderLabel === 'function') {
93
+ labelContent = createElement(
94
+ renderLabel as React.ComponentType<any>,
95
+ { variant, as, role },
96
+ children as React.ReactNode
97
+ )
98
+ } else {
99
+ labelContent = renderLabel as React.ReactNode
100
+ }
101
+
91
102
  return (
92
103
  <span
93
104
  css={[styles?.content, contentVariant]}
94
105
  role="presentation"
95
106
  aria-hidden="true"
96
107
  >
97
- {callRenderProp(renderLabel, {
98
- variant,
99
- as,
100
- role,
101
- children
102
- })}
108
+ {labelContent}
103
109
  </span>
104
110
  )
105
111
  }
package/src/Options/v2/Item/styles.ts CHANGED
@@ -71,7 +71,7 @@ const generateStyle = (
71
71
  },
72
72
  'selected-highlighted': {
73
73
  background: componentTheme.selectedHighlightedBackground,
74
- color: componentTheme.highlightedLabelColor
74
+ color: componentTheme.selectedLabelColor
75
75
  },
76
76
  default: {
77
77
  transition: 'background 200ms'
package/src/Options/v2/index.tsx CHANGED
@@ -22,12 +22,11 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { ComponentElement, Component, Children } from 'react'
25
+ import { ComponentElement, Component, Children, createElement } from 'react'
26
26
 
27
27
  import {
28
28
  omitProps,
29
29
  matchComponentTypes,
30
- callRenderProp,
31
30
  safeCloneElement,
32
31
  withDeterministicId
33
32
  } from '@instructure/ui-react-utils'
@@ -100,6 +99,14 @@ class Options extends Component<OptionsProps> {
100
99
 
101
100
  renderLabel() {
102
101
  const { renderLabel, styles } = this.props
102
+
103
+ let labelContent: React.ReactNode
104
+ if (typeof renderLabel === 'function') {
105
+ labelContent = createElement(renderLabel as React.ComponentType<any>, {})
106
+ } else {
107
+ labelContent = renderLabel as React.ReactNode
108
+ }
109
+
103
110
  return (
104
111
  <span
105
112
  id={this._labelId}
@@ -108,7 +115,7 @@ class Options extends Component<OptionsProps> {
108
115
  aria-hidden={isAndroidOrIOS() ? 'false' : 'true'}
109
116
  css={styles?.label}
110
117
  >
111
- {callRenderProp(renderLabel)}
118
+ {labelContent}
112
119
  </span>
113
120
  )
114
121
  }