@instructure/ui-options 10.8.1-snapshot-4 → 10.9.0

package/CHANGELOG.md

@@ -3,9 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.8.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.8.0...v10.8.1-snapshot-4) (2024-12-12)
+# [10.9.0](https://github.com/instructure/instructure-ui/compare/v10.8.0...v10.9.0) (2024-12-12)
 
-**Note:** Version bump only for package @instructure/ui-options
+
+### Features
+
+* **many:** make meta package export every component and type definition ([dee9abb](https://github.com/instructure/instructure-ui/commit/dee9abb9cbffa4abc9edf48fb7d8ad41fea385b4))
+* **shared-types,ui-options,ui-select:** allow to change font weight of selected option item in Select ([6818928](https://github.com/instructure/instructure-ui/commit/6818928536ad0145516c8d7d25eb8079c84089b6))
 
 
 

package/es/Options/Item/index.js

@@ -117,7 +117,8 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
   role: 'listitem',
   voiceoverRoleBugWorkaround: false,
   beforeLabelContentVAlign: 'center',
-  afterLabelContentVAlign: 'center'
+  afterLabelContentVAlign: 'center',
+  isSelected: false
 }, _Item)) || _class) || _class) || _class);
 export default Item;
 export { Item };

package/es/Options/Item/props.js

@@ -36,7 +36,8 @@ const propTypes = {
   href: PropTypes.string,
   voiceoverRoleBugWorkaround: PropTypes.bool,
   elementRef: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  isSelected: PropTypes.bool
 };
-const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children'];
+const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children', 'isSelected'];
 export { propTypes, allowedProps };

package/es/Options/Item/styles.js

@@ -98,7 +98,7 @@ const generateStyle = (componentTheme, props) => {
       display: 'block',
       fontSize: componentTheme.fontSize,
       fontFamily: componentTheme.fontFamily,
-      fontWeight: componentTheme.fontWeight,
+      fontWeight: props.isSelected ? componentTheme.fontWeightSelected : componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
       outline: 'none',
       position: 'relative',

package/es/Options/Item/theme.js

@@ -44,6 +44,7 @@ const generateComponentTheme = theme => {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    fontWeightSelected: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     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,
     highlightedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,

package/es/index.js

@@ -23,6 +23,8 @@
  */
 
 export { Options } from './Options';
+export { Item as OptionItem } from './Options/Item';
+export { Separator as OptionSeparator } from './Options/Separator';
 export { optionsThemeGenerator } from './Options/theme';
 export { optionsItemThemeGenerator } from './Options/Item/theme';
 export { optionsSeparatorThemeGenerator } from './Options/Separator/theme';

package/lib/Options/Item/index.js

@@ -122,6 +122,7 @@ let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
   role: 'listitem',
   voiceoverRoleBugWorkaround: false,
   beforeLabelContentVAlign: 'center',
-  afterLabelContentVAlign: 'center'
+  afterLabelContentVAlign: 'center',
+  isSelected: false
 }, _Item)) || _class) || _class) || _class);
 var _default = exports.default = Item;

package/lib/Options/Item/props.js

@@ -43,6 +43,7 @@ const propTypes = exports.propTypes = {
   href: _propTypes.default.string,
   voiceoverRoleBugWorkaround: _propTypes.default.bool,
   elementRef: _propTypes.default.func,
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  isSelected: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children'];
+const allowedProps = exports.allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children', 'isSelected'];

package/lib/Options/Item/styles.js

@@ -104,7 +104,7 @@ const generateStyle = (componentTheme, props) => {
       display: 'block',
       fontSize: componentTheme.fontSize,
       fontFamily: componentTheme.fontFamily,
-      fontWeight: componentTheme.fontWeight,
+      fontWeight: props.isSelected ? componentTheme.fontWeightSelected : componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
       outline: 'none',
       position: 'relative',

package/lib/Options/Item/theme.js

@@ -50,6 +50,7 @@ const generateComponentTheme = theme => {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    fontWeightSelected: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     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,
     highlightedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,

package/lib/index.js

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "OptionItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.Item;
+  }
+});
+Object.defineProperty(exports, "OptionSeparator", {
+  enumerable: true,
+  get: function () {
+    return _Separator.Separator;
+  }
+});
 Object.defineProperty(exports, "Options", {
   enumerable: true,
   get: function () {
@@ -28,6 +40,8 @@ Object.defineProperty(exports, "optionsThemeGenerator", {
   }
 });
 var _Options = require("./Options");
+var _Item = require("./Options/Item");
+var _Separator = require("./Options/Separator");
 var _theme = require("./Options/theme");
 var _theme2 = require("./Options/Item/theme");
 var _theme3 = require("./Options/Separator/theme");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "10.8.1-snapshot-4",
+  "version": "10.9.0",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,21 +23,21 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.8.1-snapshot-4",
-    "@instructure/ui-color-utils": "10.8.1-snapshot-4",
-    "@instructure/ui-test-locator": "10.8.1-snapshot-4",
-    "@instructure/ui-test-utils": "10.8.1-snapshot-4",
-    "@instructure/ui-themes": "10.8.1-snapshot-4"
+    "@instructure/ui-babel-preset": "10.9.0",
+    "@instructure/ui-color-utils": "10.9.0",
+    "@instructure/ui-test-locator": "10.9.0",
+    "@instructure/ui-test-utils": "10.9.0",
+    "@instructure/ui-themes": "10.9.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.8.1-snapshot-4",
-    "@instructure/shared-types": "10.8.1-snapshot-4",
-    "@instructure/ui-icons": "10.8.1-snapshot-4",
-    "@instructure/ui-prop-types": "10.8.1-snapshot-4",
-    "@instructure/ui-react-utils": "10.8.1-snapshot-4",
-    "@instructure/ui-testable": "10.8.1-snapshot-4",
-    "@instructure/ui-view": "10.8.1-snapshot-4",
+    "@instructure/emotion": "10.9.0",
+    "@instructure/shared-types": "10.9.0",
+    "@instructure/ui-icons": "10.9.0",
+    "@instructure/ui-prop-types": "10.9.0",
+    "@instructure/ui-react-utils": "10.9.0",
+    "@instructure/ui-testable": "10.9.0",
+    "@instructure/ui-view": "10.9.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Options/Item/index.tsx

@@ -61,7 +61,8 @@ class Item extends Component<OptionsItemProps> {
     role: 'listitem',
     voiceoverRoleBugWorkaround: false,
     beforeLabelContentVAlign: 'center',
-    afterLabelContentVAlign: 'center'
+    afterLabelContentVAlign: 'center',
+    isSelected: false
   } as const
 
   ref: Element | null = null

package/src/Options/Item/props.ts

@@ -94,6 +94,10 @@ type OptionsItemOwnProps = OptionsItemRenderProps & {
    * provides a reference to the underlying html root element
    */
   elementRef?: (element: Element | null) => void
+  /**
+   * Whether or not this option is selected
+   */
+  isSelected?: boolean
 }
 
 type PropKeys = keyof OptionsItemOwnProps
@@ -133,7 +137,8 @@ const propTypes: PropValidators<PropKeys> = {
   href: PropTypes.string,
   voiceoverRoleBugWorkaround: PropTypes.bool,
   elementRef: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  isSelected: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -149,7 +154,8 @@ const allowedProps: AllowedPropKeys = [
   'voiceoverRoleBugWorkaround',
   'href',
   'elementRef',
-  'children'
+  'children',
+  'isSelected'
 ]
 
 export type { OptionsItemProps, OptionsItemStyle, OptionsItemRenderProps }

package/src/Options/Item/styles.ts

@@ -112,7 +112,9 @@ const generateStyle = (
       display: 'block',
       fontSize: componentTheme.fontSize,
       fontFamily: componentTheme.fontFamily,
-      fontWeight: componentTheme.fontWeight,
+      fontWeight: props.isSelected
+        ? componentTheme.fontWeightSelected
+        : componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
       outline: 'none',
       position: 'relative',

package/src/Options/Item/theme.ts

@@ -45,6 +45,7 @@ const generateComponentTheme = (theme: Theme): OptionsItemTheme => {
     fontFamily: typography?.fontFamily,
     fontWeight: typography?.fontWeightNormal,
     lineHeight: typography?.lineHeightCondensed,
+    fontWeightSelected: typography?.fontWeightNormal,
 
     color: colors?.contrasts?.grey125125,
     background: colors?.contrasts?.white1010,

package/src/index.ts

@@ -23,6 +23,8 @@
  */
 
 export { Options } from './Options'
+export { Item as OptionItem } from './Options/Item'
+export { Separator as OptionSeparator } from './Options/Separator'
 
 export { optionsThemeGenerator } from './Options/theme'
 export { optionsItemThemeGenerator } from './Options/Item/theme'