@instructure/ui-options 11.6.0 → 11.6.1-snapshot-129

package/es/Options/v2/index.js

@@ -0,0 +1,147 @@
+var _dec, _dec2, _class, _Options;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component, Children } from 'react';
+import { omitProps, matchComponentTypes, callRenderProp, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
+import { View } from '@instructure/ui-view/latest';
+import { withStyle } from '@instructure/emotion';
+import generateStyles from "./styles.js";
+import { Item } from "./Item/index.js";
+import { Separator } from "./Separator/index.js";
+import { allowedProps } from "./props.js";
+import { isAndroidOrIOS } from '@instructure/ui-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components/utilities
+---
+**/
+let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles), _dec(_class = _dec2(_class = (_Options = class Options extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this._labelId = this.props.deterministicId('Options-label');
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  get childAs() {
+    const as = this.props.as;
+    if (as === 'ul' || as === 'ol') {
+      return 'li';
+    }
+    return void 0;
+  }
+  renderLabel() {
+    const _this$props3 = this.props,
+      renderLabel = _this$props3.renderLabel,
+      styles = _this$props3.styles;
+    return _jsx("span", {
+      id: this._labelId,
+      role: "presentation"
+      // because TalkBack and iOS VoiceOver don't announce sub-menu labels, aria-hidden needs to be false to achive that
+      ,
+      "aria-hidden": isAndroidOrIOS() ? 'false' : 'true',
+      css: styles === null || styles === void 0 ? void 0 : styles.label,
+      children: callRenderProp(renderLabel)
+    });
+  }
+  renderSubList(subOptions) {
+    const styles = this.props.styles;
+    return _jsx(Item, {
+      as: this.childAs,
+      role: "presentation",
+      css: styles === null || styles === void 0 ? void 0 : styles.label,
+      children: subOptions
+    });
+  }
+  renderChildren() {
+    const children = this.props.children;
+    return Children.map(children, child => {
+      if (matchComponentTypes(child, ['Options'])) {
+        return this.renderSubList(child);
+      }
+      if (matchComponentTypes(child, ['Item', 'Separator'])) {
+        return safeCloneElement(child, {
+          as: this.childAs || child.props.as
+        });
+      }
+      return void 0;
+    });
+  }
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId;
+    }
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby'];
+    }
+    return void 0;
+  }
+  render() {
+    const passthroughProps = View.omitViewProps(omitProps(this.props, Options.allowedProps), Options);
+    const _this$props4 = this.props,
+      as = _this$props4.as,
+      role = _this$props4.role,
+      renderLabel = _this$props4.renderLabel,
+      elementRef = _this$props4.elementRef,
+      styles = _this$props4.styles;
+    return _jsxs("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.options,
+      role: "presentation",
+      ref: this.handleRef,
+      "data-cid": "Options",
+      children: [renderLabel && this.renderLabel(), _jsx(View, {
+        ...passthroughProps,
+        elementRef: elementRef,
+        css: styles === null || styles === void 0 ? void 0 : styles.list,
+        as: as,
+        role: role,
+        display: "block",
+        margin: "none",
+        padding: "none",
+        background: "primary",
+        "aria-labelledby": this.ariaLabelledby,
+        children: this.renderChildren()
+      })]
+    });
+  }
+}, _Options.displayName = "Options", _Options.componentId = 'Options', _Options.allowedProps = allowedProps, _Options.defaultProps = {
+  as: 'span',
+  role: 'list',
+  elementRef: () => {},
+  renderLabel: null,
+  children: null
+}, _Options.Item = Item, _Options.Separator = Separator, _Options)) || _class) || _class);
+export default Options;
+export { Options };

package/es/Options/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['as', 'role', 'elementRef', 'renderLabel', 'children'];
+export { allowedProps };

package/es/Options/v2/styles.js

@@ -0,0 +1,57 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    options: {
+      label: 'options',
+      boxSizing: 'border-box',
+      wordWrap: 'break-word'
+    },
+    list: {
+      label: 'options__list',
+      listStyleType: 'none',
+      position: 'relative'
+    },
+    label: {
+      label: 'options__label',
+      color: componentTheme.labelColor,
+      cursor: 'default',
+      display: 'block',
+      fontWeight: componentTheme.labelFontWeight,
+      padding: `${componentTheme.nestedLabelPaddingVertical} ${componentTheme.nestedLabelPaddingHorizontal}`
+    }
+  };
+};
+export default generateStyle;

package/es/Options/v2/theme.js

@@ -0,0 +1,47 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * 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 => {
+  var _colors$contrasts, _colors$contrasts2;
+  const colors = theme.colors,
+    typography = theme.typography,
+    spacing = theme.spacing;
+  const componentVariables = {
+    labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
+    labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
+    labelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`,
+    nestedLabelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
+  };
+  return {
+    ...componentVariables
+  };
+};
+export { generateComponentTheme as optionsThemeGenerator };
+export default generateComponentTheme;

package/es/{index.js → exports/a.js}

@@ -21,9 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Options } from "./Options/index.js";
-export { Item as OptionItem } from "./Options/Item/index.js";
-export { Separator as OptionSeparator } from "./Options/Separator/index.js";
-export { optionsThemeGenerator } from "./Options/theme.js";
-export { optionsItemThemeGenerator } from "./Options/Item/theme.js";
-export { optionsSeparatorThemeGenerator } from "./Options/Separator/theme.js";
+export { Options } from "../Options/v1/index.js";
+export { Item as OptionItem } from "../Options/v1/Item/index.js";
+export { Separator as OptionSeparator } from "../Options/v1/Separator/index.js";
+export { optionsThemeGenerator } from "../Options/v1/theme.js";
+export { optionsItemThemeGenerator } from "../Options/v1/Item/theme.js";
+export { optionsSeparatorThemeGenerator } from "../Options/v1/Separator/theme.js";

package/es/exports/b.js

@@ -0,0 +1,29 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Options } from "../Options/v2/index.js";
+export { Item as OptionItem } from "../Options/v2/Item/index.js";
+export { Separator as OptionSeparator } from "../Options/v2/Separator/index.js";
+export { optionsThemeGenerator } from "../Options/v2/theme.js";
+export { optionsItemThemeGenerator } from "../Options/v2/Item/theme.js";
+export { optionsSeparatorThemeGenerator } from "../Options/v2/Separator/theme.js";

package/lib/Options/{Item → v1/Item}/index.js

@@ -42,7 +42,7 @@ parent: Options
 id: Options.Item
 ---
 **/
-let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Item = class Item extends _react.Component {
+let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Item = class Item extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;

package/lib/Options/{Separator → v1/Separator}/index.js

@@ -45,7 +45,7 @@ id: Options.Separator
 ---
 @module Separator
 **/
-let Separator = exports.Separator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Separator = class Separator extends _react.Component {
+let Separator = exports.Separator = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Separator = class Separator extends _react.Component {
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);

package/lib/Options/v1/index.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Options = void 0;
+var _react = require("react");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _Item = require("./Item");
+var _Separator = require("./Separator");
+var _props = require("./props");
+var _uiUtils = require("@instructure/ui-utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _dec2, _class, _Options;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components/utilities
+---
+**/
+let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Options = class Options extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this._labelId = this.props.deterministicId('Options-label');
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  get childAs() {
+    const as = this.props.as;
+    if (as === 'ul' || as === 'ol') {
+      return 'li';
+    }
+    return void 0;
+  }
+  renderLabel() {
+    const _this$props3 = this.props,
+      renderLabel = _this$props3.renderLabel,
+      styles = _this$props3.styles;
+    return (0, _jsxRuntime.jsx)("span", {
+      id: this._labelId,
+      role: "presentation"
+      // because TalkBack and iOS VoiceOver don't announce sub-menu labels, aria-hidden needs to be false to achive that
+      ,
+      "aria-hidden": (0, _uiUtils.isAndroidOrIOS)() ? 'false' : 'true',
+      css: styles === null || styles === void 0 ? void 0 : styles.label,
+      children: (0, _uiReactUtils.callRenderProp)(renderLabel)
+    });
+  }
+  renderSubList(subOptions) {
+    const styles = this.props.styles;
+    return (0, _jsxRuntime.jsx)(_Item.Item, {
+      as: this.childAs,
+      role: "presentation",
+      css: styles === null || styles === void 0 ? void 0 : styles.label,
+      children: subOptions
+    });
+  }
+  renderChildren() {
+    const children = this.props.children;
+    return _react.Children.map(children, child => {
+      if ((0, _uiReactUtils.matchComponentTypes)(child, ['Options'])) {
+        return this.renderSubList(child);
+      }
+      if ((0, _uiReactUtils.matchComponentTypes)(child, ['Item', 'Separator'])) {
+        return (0, _uiReactUtils.safeCloneElement)(child, {
+          as: this.childAs || child.props.as
+        });
+      }
+      return void 0;
+    });
+  }
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId;
+    }
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby'];
+    }
+    return void 0;
+  }
+  render() {
+    const passthroughProps = _v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Options.allowedProps), Options);
+    const _this$props4 = this.props,
+      as = _this$props4.as,
+      role = _this$props4.role,
+      renderLabel = _this$props4.renderLabel,
+      elementRef = _this$props4.elementRef,
+      styles = _this$props4.styles;
+    return (0, _jsxRuntime.jsxs)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.options,
+      role: "presentation",
+      ref: this.handleRef,
+      "data-cid": "Options",
+      children: [renderLabel && this.renderLabel(), (0, _jsxRuntime.jsx)(_v11_.View, {
+        ...passthroughProps,
+        elementRef: elementRef,
+        css: styles === null || styles === void 0 ? void 0 : styles.list,
+        as: as,
+        role: role,
+        display: "block",
+        margin: "none",
+        padding: "none",
+        background: "primary",
+        "aria-labelledby": this.ariaLabelledby,
+        children: this.renderChildren()
+      })]
+    });
+  }
+}, _Options.displayName = "Options", _Options.componentId = 'Options', _Options.allowedProps = _props.allowedProps, _Options.defaultProps = {
+  as: 'span',
+  role: 'list',
+  elementRef: () => {},
+  renderLabel: null,
+  children: null
+}, _Options.Item = _Item.Item, _Options.Separator = _Separator.Separator, _Options)) || _class) || _class);
+var _default = exports.default = Options;

package/lib/Options/v2/Item/index.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Item = void 0;
+var _react = require("react");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _dec2, _class, _Item;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: Options
+id: Options.Item
+---
+**/
+let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_Item = class Item extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._descriptionId = void 0;
+    this._descriptionId = props.deterministicId('OptionsItem-description');
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  renderContent(renderLabel, contentVariant) {
+    const _this$props3 = this.props,
+      styles = _this$props3.styles,
+      variant = _this$props3.variant,
+      as = _this$props3.as,
+      role = _this$props3.role,
+      children = _this$props3.children;
+    return (0, _jsxRuntime.jsx)("span", {
+      css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
+      role: "presentation",
+      "aria-hidden": "true",
+      children: (0, _uiReactUtils.callRenderProp)(renderLabel, {
+        variant,
+        as,
+        role,
+        children
+      })
+    });
+  }
+  render() {
+    const _this$props4 = this.props,
+      as = _this$props4.as,
+      href = _this$props4.href,
+      role = _this$props4.role,
+      styles = _this$props4.styles,
+      description = _this$props4.description,
+      descriptionRole = _this$props4.descriptionRole,
+      renderBeforeLabel = _this$props4.renderBeforeLabel,
+      renderAfterLabel = _this$props4.renderAfterLabel,
+      elementRef = _this$props4.elementRef,
+      children = _this$props4.children,
+      voiceoverRoleBugWorkaround = _this$props4.voiceoverRoleBugWorkaround;
+    const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
+    const InnerElementType = href ? 'a' : 'span';
+    const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
+    const childrenContent = (0, _uiReactUtils.callRenderProp)(children);
+    const descriptionContent = (0, _uiReactUtils.callRenderProp)(description);
+    const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0);
+    return (0, _jsxRuntime.jsxs)(ElementType, {
+      role: voiceoverRoleBugWorkaround ? role : 'none',
+      "data-cid": "Options.Item",
+      css: styles === null || styles === void 0 ? void 0 : styles.item,
+      ref: element => {
+        this.ref = element;
+        if (typeof elementRef === 'function') {
+          elementRef(element);
+        }
+      },
+      "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0,
+      children: [(0, _jsxRuntime.jsxs)(InnerElementType, {
+        ...passthroughProps,
+        css: styles === null || styles === void 0 ? void 0 : styles.container,
+        role: href || voiceoverRoleBugWorkaround ? void 0 : role,
+        href: href,
+        "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy,
+        children: [childrenContent, descriptionContent && (0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.description,
+          role: descriptionRole,
+          id: this._descriptionId,
+          children: 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)]
+    });
+  }
+}, _Item.displayName = "Item", _Item.componentId = 'Options.Item', _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
+  as: 'span',
+  variant: 'default',
+  role: 'listitem',
+  voiceoverRoleBugWorkaround: false,
+  beforeLabelContentVAlign: 'center',
+  afterLabelContentVAlign: 'center',
+  isSelected: false
+}, _Item)) || _class) || _class);
+var _default = exports.default = Item;

package/lib/Options/v2/Item/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children', 'isSelected'];