@instructure/ui-options 11.7.2-snapshot-49 → 11.7.2-snapshot-51

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 (19) hide show
  1. package/CHANGELOG.md +5 -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/index.js +9 -3
  6. package/lib/Options/v1/Item/index.js +11 -6
  7. package/lib/Options/v1/index.js +7 -1
  8. package/lib/Options/v2/Item/index.js +11 -6
  9. package/lib/Options/v2/index.js +7 -1
  10. package/package.json +11 -11
  11. package/src/Options/v1/Item/index.tsx +13 -7
  12. package/src/Options/v1/index.tsx +10 -3
  13. package/src/Options/v2/Item/index.tsx +13 -7
  14. package/src/Options/v2/index.tsx +10 -3
  15. package/tsconfig.build.tsbuildinfo +1 -1
  16. package/types/Options/v1/Item/index.d.ts.map +1 -1
  17. package/types/Options/v1/index.d.ts.map +1 -1
  18. package/types/Options/v2/Item/index.d.ts.map +1 -1
  19. package/types/Options/v2/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,12 +3,13 @@
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-49](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-49) (2026-04-16)
6
+ ## [11.7.2-snapshot-51](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-51) (2026-04-21)
7
7
 
8
8
 
9
9
  ### Features
10
10
 
11
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))
12
13
  * **ui,ui-options,ui-drilldown:** rework Drilldown ([0562fe2](https://github.com/instructure/instructure-ui/commit/0562fe2b43e3235fc78c4981ada504c1a2f10d1a))
13
14
 
14
15
 
@@ -16,6 +17,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
16
17
 
17
18
  * **many:** contains breaking changes due to component using the new theming system
18
19
 
20
+ INSTUI-4967
21
+ * **many:** contains breaking changes due to component using the new theming system
22
+
19
23
  INSTUI-4807
20
24
  * **ui,ui-options,ui-drilldown:** contains breaking changes due to component using the new theming system
21
25
 
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/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/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-49",
3
+ "version": "11.7.2-snapshot-51",
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-49",
19
- "@instructure/shared-types": "11.7.2-snapshot-49",
20
- "@instructure/ui-icons": "11.7.2-snapshot-49",
21
- "@instructure/ui-react-utils": "11.7.2-snapshot-49",
22
- "@instructure/ui-utils": "11.7.2-snapshot-49",
23
- "@instructure/ui-view": "11.7.2-snapshot-49"
18
+ "@instructure/ui-icons": "11.7.2-snapshot-51",
19
+ "@instructure/emotion": "11.7.2-snapshot-51",
20
+ "@instructure/ui-react-utils": "11.7.2-snapshot-51",
21
+ "@instructure/ui-view": "11.7.2-snapshot-51",
22
+ "@instructure/shared-types": "11.7.2-snapshot-51",
23
+ "@instructure/ui-utils": "11.7.2-snapshot-51"
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-49",
31
- "@instructure/ui-babel-preset": "11.7.2-snapshot-49",
32
- "@instructure/ui-color-utils": "11.7.2-snapshot-49",
33
- "@instructure/ui-themes": "11.7.2-snapshot-49"
30
+ "@instructure/ui-axe-check": "11.7.2-snapshot-51",
31
+ "@instructure/ui-babel-preset": "11.7.2-snapshot-51",
32
+ "@instructure/ui-color-utils": "11.7.2-snapshot-51",
33
+ "@instructure/ui-themes": "11.7.2-snapshot-51"
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/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
  }