@instructure/ui-options 8.18.1-snapshot.2 → 8.19.1-snapshot.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.19.0](https://github.com/instructure/instructure-ui/compare/v8.18.0...v8.19.0) (2022-03-16)
+
+### Bug Fixes
+
+- **ui-options:** fix `themeOverride` prop being passed to the underlying `div` ([669aa58](https://github.com/instructure/instructure-ui/commit/669aa58926b123028bcb9e39427d36910b78b0d1))
+
 # [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
 
 **Note:** Version bump only for package @instructure/ui-options

package/es/Options/Item/index.js

@@ -86,6 +86,7 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
           descriptionRole = _this$props4.descriptionRole,
           renderBeforeLabel = _this$props4.renderBeforeLabel,
           renderAfterLabel = _this$props4.renderAfterLabel,
+          elementRef = _this$props4.elementRef,
           children = _this$props4.children;
     const ElementType = getElementType(Item, this.props, () => as);
     const passthroughProps = omitProps(this.props, Item.allowedProps);
@@ -96,6 +97,10 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       ref: element => {
         this.ref = element;
+
+        if (typeof elementRef === 'function') {
+          elementRef(element);
+        }
       }
     }, jsx("span", Object.assign({}, passthroughProps, {
       css: styles === null || styles === void 0 ? void 0 : styles.container,

package/es/Options/Item/props.js

@@ -32,7 +32,8 @@ const propTypes = {
   afterLabelContentVAlign: PropTypes.oneOf(['start', 'center', 'end']),
   description: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   descriptionRole: PropTypes.string,
+  elementRef: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
-const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'children'];
+const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'elementRef', 'children'];
 export { propTypes, allowedProps };

package/es/Options/Item/styles.js

@@ -113,6 +113,7 @@ const generateStyle = (componentTheme, props) => {
     container: {
       label: 'optionItem__container',
       display: 'block',
+      outline: 'none',
       padding: componentTheme.padding,
       ...(containsList && {
         padding: '0'

package/es/Options/Item/theme.js

@@ -65,4 +65,5 @@ const generateComponentTheme = theme => {
   };
 };
 
+export { generateComponentTheme as optionsItemThemeGenerator };
 export default generateComponentTheme;

package/es/Options/Separator/theme.js

@@ -40,4 +40,5 @@ const generateComponentTheme = theme => {
   };
 };
 
+export { generateComponentTheme as optionsSeparatorThemeGenerator };
 export default generateComponentTheme;

package/es/Options/theme.js

@@ -21,16 +21,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+const optionsThemeKeys = ['labelFontWeight', 'background', 'labelColor', 'labelPadding', 'nestedLabelPadding'];
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
  * @return {Object} The final theme object with the overrides and component variables
  */
+
 const generateComponentTheme = theme => {
   const colors = theme.colors,
         typography = theme.typography,
-        spacing = theme.spacing;
+        spacing = theme.spacing; // TODO: if updated, update optionsThemeKeys array too
+
   const componentVariables = {
     labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
@@ -42,4 +44,5 @@ const generateComponentTheme = theme => {
   };
 };
 
+export { generateComponentTheme as optionsThemeGenerator, optionsThemeKeys };
 export default generateComponentTheme;

package/es/index.js

@@ -21,4 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Options } from './Options';
+export { Options } from './Options';
+export { optionsThemeGenerator, optionsThemeKeys } from './Options/theme';
+export { optionsItemThemeGenerator } from './Options/Item/theme';
+export { optionsSeparatorThemeGenerator } from './Options/Separator/theme';

package/lib/Options/Item/index.js

@@ -76,6 +76,7 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           descriptionRole = _this$props4.descriptionRole,
           renderBeforeLabel = _this$props4.renderBeforeLabel,
           renderAfterLabel = _this$props4.renderAfterLabel,
+          elementRef = _this$props4.elementRef,
           children = _this$props4.children;
     const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
     const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
@@ -86,6 +87,10 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       ref: element => {
         this.ref = element;
+
+        if (typeof elementRef === 'function') {
+          elementRef(element);
+        }
       }
     }, (0, _emotion.jsx)("span", Object.assign({}, passthroughProps, {
       css: styles === null || styles === void 0 ? void 0 : styles.container,

package/lib/Options/Item/props.js

@@ -42,8 +42,9 @@ const propTypes = {
   afterLabelContentVAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
   description: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   descriptionRole: _propTypes.default.string,
+  elementRef: _propTypes.default.func,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'children'];
+const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'elementRef', 'children'];
 exports.allowedProps = allowedProps;

package/lib/Options/Item/styles.js

@@ -121,6 +121,7 @@ const generateStyle = (componentTheme, props) => {
     container: {
       label: 'optionItem__container',
       display: 'block',
+      outline: 'none',
       padding: componentTheme.padding,
       ...(containsList && {
         padding: '0'

package/lib/Options/Item/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.optionsItemThemeGenerator = exports.default = void 0;
 
 /*
  * The MIT License (MIT)
@@ -72,5 +72,6 @@ const generateComponentTheme = theme => {
   };
 };
 
+exports.optionsItemThemeGenerator = generateComponentTheme;
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Options/Separator/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.optionsSeparatorThemeGenerator = exports.default = void 0;
 
 /*
  * The MIT License (MIT)
@@ -47,5 +47,6 @@ const generateComponentTheme = theme => {
   };
 };
 
+exports.optionsSeparatorThemeGenerator = generateComponentTheme;
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Options/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.optionsThemeKeys = exports.optionsThemeGenerator = exports.default = void 0;
 
 /*
  * The MIT License (MIT)
@@ -28,16 +28,20 @@ exports.default = void 0;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+const optionsThemeKeys = ['labelFontWeight', 'background', 'labelColor', 'labelPadding', 'nestedLabelPadding'];
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
  * @return {Object} The final theme object with the overrides and component variables
  */
+
+exports.optionsThemeKeys = optionsThemeKeys;
+
 const generateComponentTheme = theme => {
   const colors = theme.colors,
         typography = theme.typography,
-        spacing = theme.spacing;
+        spacing = theme.spacing; // TODO: if updated, update optionsThemeKeys array too
+
   const componentVariables = {
     labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
@@ -49,5 +53,6 @@ const generateComponentTheme = theme => {
   };
 };
 
+exports.optionsThemeGenerator = generateComponentTheme;
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -9,5 +9,35 @@ Object.defineProperty(exports, "Options", {
     return _Options.Options;
   }
 });
+Object.defineProperty(exports, "optionsItemThemeGenerator", {
+  enumerable: true,
+  get: function () {
+    return _theme2.optionsItemThemeGenerator;
+  }
+});
+Object.defineProperty(exports, "optionsSeparatorThemeGenerator", {
+  enumerable: true,
+  get: function () {
+    return _theme3.optionsSeparatorThemeGenerator;
+  }
+});
+Object.defineProperty(exports, "optionsThemeGenerator", {
+  enumerable: true,
+  get: function () {
+    return _theme.optionsThemeGenerator;
+  }
+});
+Object.defineProperty(exports, "optionsThemeKeys", {
+  enumerable: true,
+  get: function () {
+    return _theme.optionsThemeKeys;
+  }
+});
+
+var _Options = require("./Options");
+
+var _theme = require("./Options/theme");
+
+var _theme2 = require("./Options/Item/theme");
 
-var _Options = require("./Options");
+var _theme3 = require("./Options/Separator/theme");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.18.1-snapshot.2+ca4c1ff9d",
+  "version": "8.19.1-snapshot.0+257cc2783",
   "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": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-color-utils": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-test-locator": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-test-utils": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-themes": "8.18.1-snapshot.2+ca4c1ff9d"
+    "@instructure/ui-babel-preset": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-color-utils": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-test-locator": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-test-utils": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-themes": "8.19.1-snapshot.0+257cc2783"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/shared-types": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-icons": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-prop-types": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-react-utils": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-testable": "8.18.1-snapshot.2+ca4c1ff9d",
-    "@instructure/ui-view": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/emotion": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/shared-types": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-icons": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-prop-types": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-react-utils": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-testable": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-view": "8.19.1-snapshot.0+257cc2783",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "ca4c1ff9d3985151ae0758fb596de41652dbb58b"
+  "gitHead": "257cc27836b9f56296eb692e601bc7acda4e1d1e"
 }

package/src/Options/Item/index.tsx

@@ -108,6 +108,7 @@ class Item extends Component<OptionsItemProps> {
       descriptionRole,
       renderBeforeLabel,
       renderAfterLabel,
+      elementRef,
       children
     } = this.props
 
@@ -122,8 +123,12 @@ class Item extends Component<OptionsItemProps> {
         role="none"
         css={styles?.item}
         // @ts-expect-error TODO: fix produces an union that is too complex to represent
-        ref={(element: any) => {
+        ref={(element: Element | null) => {
           this.ref = element
+
+          if (typeof elementRef === 'function') {
+            elementRef(element)
+          }
         }}
       >
         <span {...passthroughProps} css={styles?.container} role={role}>

package/src/Options/Item/props.ts

@@ -76,6 +76,10 @@ type OptionsItemOwnProps = ItemProps & {
    * The ARIA role of the description element
    */
   descriptionRole?: string
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
 }
 
 type PropKeys = keyof OptionsItemOwnProps
@@ -105,6 +109,7 @@ const propTypes: PropValidators<PropKeys> = {
   afterLabelContentVAlign: PropTypes.oneOf(['start', 'center', 'end']),
   description: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   descriptionRole: PropTypes.string,
+  elementRef: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
 
@@ -118,6 +123,7 @@ const allowedProps: AllowedPropKeys = [
   'afterLabelContentVAlign',
   'description',
   'descriptionRole',
+  'elementRef',
   'children'
 ]
 

package/src/Options/Item/styles.ts

@@ -128,6 +128,7 @@ const generateStyle = (
     container: {
       label: 'optionItem__container',
       display: 'block',
+      outline: 'none',
       padding: componentTheme.padding,
       ...(containsList && { padding: '0' }),
       ...(hasContentBeforeLabel && {

package/src/Options/Item/theme.ts

@@ -73,4 +73,5 @@ const generateComponentTheme = (theme: Theme): OptionsItemTheme => {
   }
 }
 
+export { generateComponentTheme as optionsItemThemeGenerator }
 export default generateComponentTheme

package/src/Options/Separator/theme.ts

@@ -44,4 +44,5 @@ const generateComponentTheme = (theme: Theme): OptionsSeparatorTheme => {
   }
 }
 
+export { generateComponentTheme as optionsSeparatorThemeGenerator }
 export default generateComponentTheme

package/src/Options/theme.ts

@@ -23,7 +23,15 @@
  */
 
 import type { Theme } from '@instructure/ui-themes'
-import { OptionsTheme } from '@instructure/shared-types'
+import type { OptionsTheme } from '@instructure/shared-types'
+
+const optionsThemeKeys: (keyof OptionsTheme)[] = [
+  'labelFontWeight',
+  'background',
+  'labelColor',
+  'labelPadding',
+  'nestedLabelPadding'
+]
 
 /**
  * Generates the theme object for the component from the theme and provided additional information
@@ -33,6 +41,7 @@ import { OptionsTheme } from '@instructure/shared-types'
 const generateComponentTheme = (theme: Theme): OptionsTheme => {
   const { colors, typography, spacing } = theme
 
+  // TODO: if updated, update optionsThemeKeys array too
   const componentVariables: OptionsTheme = {
     labelFontWeight: typography?.fontWeightBold,
 
@@ -48,4 +57,5 @@ const generateComponentTheme = (theme: Theme): OptionsTheme => {
   }
 }
 
+export { generateComponentTheme as optionsThemeGenerator, optionsThemeKeys }
 export default generateComponentTheme

package/src/index.ts

@@ -24,6 +24,10 @@
 
 export { Options } from './Options'
 
+export { optionsThemeGenerator, optionsThemeKeys } from './Options/theme'
+export { optionsItemThemeGenerator } from './Options/Item/theme'
+export { optionsSeparatorThemeGenerator } from './Options/Separator/theme'
+
 export type { OptionsProps } from './Options/props'
 export type { OptionsItemProps } from './Options/Item/props'
 export type { OptionsSeparatorProps } from './Options/Separator/props'