@instructure/ui-options 8.25.1-snapshot-7 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-options
 

package/es/Options/Item/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -40,11 +40,23 @@ id: Options.Item
 @tsProps
 **/
 
-let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Item extends Component {
+let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Item extends Component {
+  static displayName = "Item";
+  static componentId = 'Options.Item';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    as: 'span',
+    variant: 'default',
+    role: 'listitem',
+    beforeLabelContentVAlign: 'center',
+    afterLabelContentVAlign: 'center'
+  };
+  ref = null;
+  _descriptionId;
+
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._descriptionId = void 0;
     this._descriptionId = props.deterministicId('OptionsItem-description');
   }
 
@@ -118,12 +130,6 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
     }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter));
   }
 
-}, _class2.displayName = "Item", _class2.componentId = 'Options.Item', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  as: 'span',
-  variant: 'default',
-  role: 'listitem',
-  beforeLabelContentVAlign: 'center',
-  afterLabelContentVAlign: 'center'
-}, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default Item;
 export { Item };

package/es/Options/Separator/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["as", "styles"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -43,7 +43,15 @@ id: Options.Separator
 @tsProps
 **/
 
-let Separator = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_class2 = class Separator extends Component {
+let Separator = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = class Separator extends Component {
+  static displayName = "Separator";
+  static componentId = 'Options.Separator';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    as: 'span'
+  };
+
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -71,8 +79,6 @@ let Separator = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(
     })));
   }
 
-}, _class2.displayName = "Separator", _class2.componentId = 'Options.Separator', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  as: 'span'
-}, _class2)) || _class);
+}) || _class);
 export default Separator;
 export { Separator };

package/es/Options/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -42,17 +42,24 @@ category: components
 ---
 @tsProps
 **/
-let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Options extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-
-    this._labelId = this.props.deterministicId('Options-label');
-  }
+let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Options extends Component {
+  static displayName = "Options";
+  static componentId = 'Options';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    as: 'span',
+    role: 'list',
+    elementRef: () => {},
+    renderLabel: null,
+    children: null
+  };
+  static Item = Item;
+  static Separator = Separator;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -66,6 +73,8 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
+  _labelId = this.props.deterministicId('Options-label');
+
   get childAs() {
     const as = this.props.as;
 
@@ -151,12 +160,6 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
     }), this.renderChildren()));
   }
 
-}, _class2.displayName = "Options", _class2.componentId = 'Options', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  as: 'span',
-  role: 'list',
-  elementRef: () => {},
-  renderLabel: null,
-  children: null
-}, _class2.Item = Item, _class2.Separator = Separator, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default Options;
 export { Options };

package/lib/Options/Item/index.js

@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /**
 ---
@@ -30,11 +30,23 @@ id: Options.Item
 ---
 @tsProps
 **/
-let Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Item extends _react.Component {
+let Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Item extends _react.Component {
+  static displayName = "Item";
+  static componentId = 'Options.Item';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {
+    as: 'span',
+    variant: 'default',
+    role: 'listitem',
+    beforeLabelContentVAlign: 'center',
+    afterLabelContentVAlign: 'center'
+  };
+  ref = null;
+  _descriptionId;
+
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._descriptionId = void 0;
     this._descriptionId = props.deterministicId('OptionsItem-description');
   }
 
@@ -108,13 +120,7 @@ let Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotio
     }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter));
   }
 
-}, _class2.displayName = "Item", _class2.componentId = 'Options.Item', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  as: 'span',
-  variant: 'default',
-  role: 'listitem',
-  beforeLabelContentVAlign: 'center',
-  afterLabelContentVAlign: 'center'
-}, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 exports.Item = Item;
 var _default = Item;
 exports.default = _default;

package/lib/Options/Separator/index.js

@@ -23,7 +23,7 @@ var _props = require("./props");
 
 const _excluded = ["as", "styles"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /**
 ---
@@ -33,7 +33,15 @@ id: Options.Separator
 @module Separator
 @tsProps
 **/
-let Separator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Separator extends _react.Component {
+let Separator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Separator extends _react.Component {
+  static displayName = "Separator";
+  static componentId = 'Options.Separator';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {
+    as: 'span'
+  };
+
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -60,9 +68,7 @@ let Separator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
     })));
   }
 
-}, _class2.displayName = "Separator", _class2.componentId = 'Options.Separator', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  as: 'span'
-}, _class2)) || _class);
+}) || _class);
 exports.Separator = Separator;
 var _default = Separator;
 exports.default = _default;

package/lib/Options/index.js

@@ -29,7 +29,7 @@ var _Separator = require("./Separator");
 
 var _props = require("./props");
 
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /**
 ---
@@ -37,17 +37,24 @@ category: components
 ---
 @tsProps
 **/
-let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Options extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-
-    this._labelId = this.props.deterministicId('Options-label');
-  }
+let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Options extends _react.Component {
+  static displayName = "Options";
+  static componentId = 'Options';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {
+    as: 'span',
+    role: 'list',
+    elementRef: () => {},
+    renderLabel: null,
+    children: null
+  };
+  static Item = _Item.Item;
+  static Separator = _Separator.Separator;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -61,6 +68,8 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
+  _labelId = this.props.deterministicId('Options-label');
+
   get childAs() {
     const as = this.props.as;
 
@@ -147,13 +156,7 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
     }), this.renderChildren()));
   }
 
-}, _class2.displayName = "Options", _class2.componentId = 'Options', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  as: 'span',
-  role: 'list',
-  elementRef: () => {},
-  renderLabel: null,
-  children: null
-}, _class2.Item = _Item.Item, _class2.Separator = _Separator.Separator, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 exports.Options = Options;
 var _default = Options;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.25.1-snapshot-7",
+  "version": "8.25.1-snapshot-10",
   "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.25.1-snapshot-7",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-7",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-7",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-7",
-    "@instructure/ui-themes": "8.25.1-snapshot-7"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
+    "@instructure/ui-themes": "8.25.1-snapshot-10"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.25.1-snapshot-7",
-    "@instructure/shared-types": "8.25.1-snapshot-7",
-    "@instructure/ui-icons": "8.25.1-snapshot-7",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-7",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-7",
-    "@instructure/ui-testable": "8.25.1-snapshot-7",
-    "@instructure/ui-view": "8.25.1-snapshot-7",
+    "@instructure/emotion": "8.25.1-snapshot-10",
+    "@instructure/shared-types": "8.25.1-snapshot-10",
+    "@instructure/ui-icons": "8.25.1-snapshot-10",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
+    "@instructure/ui-testable": "8.25.1-snapshot-10",
+    "@instructure/ui-view": "8.25.1-snapshot-10",
     "prop-types": "^15"
   },
   "peerDependencies": {

package/src/Options/Item/props.ts

@@ -34,7 +34,7 @@ import type {
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
-type ItemProps = {
+type OptionsItemRenderProps = {
   children?: React.ReactNode | (() => React.ReactNode)
   /**
    * Element type to render as. Will be set to `<a>` if href is provided.
@@ -55,17 +55,21 @@ type ItemProps = {
   role?: string
 }
 
-type OptionsItemOwnProps = ItemProps & {
+type OptionsItemOwnProps = OptionsItemRenderProps & {
   /**
    * Content to render before the label
    * (if you pass a function, it has the `props` as its parameter)
    */
-  renderBeforeLabel?: React.ReactNode | ((props: ItemProps) => React.ReactNode)
+  renderBeforeLabel?:
+    | React.ReactNode
+    | ((props: OptionsItemRenderProps) => React.ReactNode)
   /**
    * Content to render after the label
    * (if you pass a function, it has the `props` as its parameter)
    */
-  renderAfterLabel?: React.ReactNode | ((props: ItemProps) => React.ReactNode)
+  renderAfterLabel?:
+    | React.ReactNode
+    | ((props: OptionsItemRenderProps) => React.ReactNode)
   /**
    * Sets the vAlign of renderBeforeLabel content
    */
@@ -146,5 +150,5 @@ const allowedProps: AllowedPropKeys = [
   'children'
 ]
 
-export type { OptionsItemProps, OptionsItemStyle }
+export type { OptionsItemProps, OptionsItemStyle, OptionsItemRenderProps }
 export { propTypes, allowedProps }

package/src/index.ts

@@ -29,5 +29,8 @@ 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 {
+  OptionsItemProps,
+  OptionsItemRenderProps
+} from './Options/Item/props'
 export type { OptionsSeparatorProps } from './Options/Separator/props'