@instructure/ui-options 8.33.1 → 8.33.2

package/lib/Options/Item/index.js

@@ -1,28 +1,18 @@
 "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 _uiTestable = require("@instructure/ui-testable");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _dec3, _class, _class2;
-
 /**
 ---
 parent: Options
@@ -37,26 +27,21 @@ let Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotio
     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;
+      styles = _this$props3.styles,
+      variant = _this$props3.variant,
+      as = _this$props3.as,
+      role = _this$props3.role,
+      children = _this$props3.children;
     return (0, _emotion.jsx)("span", {
       css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
       role: "presentation",
@@ -68,19 +53,18 @@ let Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotio
       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;
+      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;
     const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
     const InnerElementType = href ? 'a' : 'span';
     const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
@@ -91,7 +75,6 @@ let Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotio
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       ref: element => {
         this.ref = element;
-
         if (typeof elementRef === 'function') {
           elementRef(element);
         }
@@ -107,7 +90,6 @@ let Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotio
       id: this._descriptionId
     }, 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',

package/lib/Options/Item/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "OptionsItemLocator", {
   }
 });
 exports.default = void 0;
-
 var _OptionsItemLocator = require("./OptionsItemLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Options/Item/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   as: _propTypes.default.elementType,
   variant: _propTypes.default.oneOf(['default', 'highlighted', 'selected', 'disabled', 'highlighted-disabled']),

package/lib/Options/Item/styles.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _uiReactUtils = require("@instructure/ui-react-utils");
-
 /*
  * The MIT License (MIT)
  *
@@ -43,14 +41,15 @@ var _uiReactUtils = require("@instructure/ui-react-utils");
  */
 const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
-        children = props.children,
-        hasContentBeforeLabel = props.renderBeforeLabel,
-        hasContentAfterLabel = props.renderAfterLabel,
-        beforeLabelContentVAlign = props.beforeLabelContentVAlign,
-        afterLabelContentVAlign = props.afterLabelContentVAlign; // TODO if children are () => ReactNode this wont match anything
-
-  const containsList = (0, _uiReactUtils.matchComponentTypes)(children, ['Options']); // used for label and description too
+    children = props.children,
+    hasContentBeforeLabel = props.renderBeforeLabel,
+    hasContentAfterLabel = props.renderAfterLabel,
+    beforeLabelContentVAlign = props.beforeLabelContentVAlign,
+    afterLabelContentVAlign = props.afterLabelContentVAlign;
+  // TODO if children are () => ReactNode this wont match anything
+  const containsList = (0, _uiReactUtils.matchComponentTypes)(children, ['Options']);
 
+  // used for label and description too
   const variantVariants = {
     highlighted: {
       background: componentTheme.highlightedBackground,
@@ -72,7 +71,6 @@ const generateStyle = (componentTheme, props) => {
     },
     default: {}
   };
-
   const getContentVAlign = type => {
     const vAlign = type === 'before' ? beforeLabelContentVAlign : afterLabelContentVAlign;
     const vOffset = type === 'before' ? componentTheme.beforeLabelContentVOffset : componentTheme.afterLabelContentVOffset;
@@ -92,7 +90,6 @@ const generateStyle = (componentTheme, props) => {
       }
     }[vAlign];
   };
-
   const linkStyles = {
     textDecoration: 'none',
     color: 'currentColor'
@@ -118,7 +115,8 @@ const generateStyle = (componentTheme, props) => {
         cursor: 'default'
       }),
       // for nested items
-      '[class*=-optionItem] &': { // except if it has icon before
+      '[class*=-optionItem] &': {
+        // except if it has icon before
         ...(!hasContentBeforeLabel && {
           '[class$=-optionItem__container]': {
             paddingInlineStart: componentTheme.nestedPadding
@@ -189,10 +187,8 @@ const generateStyle = (componentTheme, props) => {
       color: componentTheme.descriptionColor,
       ...variantVariants[variant],
       background: 'none' // needed to clear variant background
-
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Options/Item/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.optionsItemThemeGenerator = exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,9 +35,9 @@ exports.optionsItemThemeGenerator = exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        spacing = theme.spacing,
-        themeName = theme.key;
+    typography = theme.typography,
+    spacing = theme.spacing,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -67,11 +66,11 @@ const generateComponentTheme = theme => {
     descriptionPaddingStart: '0.25em',
     descriptionColor: colors.textDark
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 exports.optionsItemThemeGenerator = generateComponentTheme;
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Options/OptionsLocator.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OptionsLocator = void 0;
-
 var _uiTestLocator = require("@instructure/ui-test-locator");
-
 var _index = require("./index");
-
 var _OptionsItemLocator = require("./Item/OptionsItemLocator");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,6 +30,7 @@ var _OptionsItemLocator = require("./Item/OptionsItemLocator");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const OptionsLocator = (0, _uiTestLocator.locator)(_index.Options.selector, {
   findAllItems: function () {

package/lib/Options/Separator/index.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Separator = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _uiReactUtils = require("@instructure/ui-react-utils");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["as", "styles"];
-
 var _dec, _class, _class2;
-
 /**
 ---
 parent: Options
@@ -36,21 +25,17 @@ id: Options.Separator
 let Separator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = 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);
   }
-
   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);
   }
-
   render() {
     const _this$props3 = this.props,
-          as = _this$props3.as,
-          styles = _this$props3.styles,
-          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      as = _this$props3.as,
+      styles = _this$props3.styles,
+      rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const ElementType = (0, _uiReactUtils.getElementType)(Separator, this.props, () => as);
     return (0, _emotion.jsx)(ElementType, {
       role: "none"
@@ -59,7 +44,6 @@ let Separator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       role: "presentation"
     })));
   }
-
 }, _class2.displayName = "Separator", _class2.componentId = 'Options.Separator', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   as: 'span'
 }, _class2)) || _class);

package/lib/Options/Separator/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   as: _propTypes.default.elementType
 };

package/lib/Options/Separator/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -50,6 +49,5 @@ const generateStyle = componentTheme => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Options/Separator/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.optionsSeparatorThemeGenerator = exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,17 +35,17 @@ exports.optionsSeparatorThemeGenerator = exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const borders = theme.borders,
-        colors = theme.colors,
-        spacing = theme.spacing;
+    colors = theme.colors,
+    spacing = theme.spacing;
   const componentVariables = {
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
     height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 exports.optionsSeparatorThemeGenerator = generateComponentTheme;
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Options/__examples__/Options.examples.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _uiIcons = require("@instructure/ui-icons");
-
 var _index = require("../index");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Options/index.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Options = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _uiReactUtils = require("@instructure/ui-react-utils");
-
 var _uiTestable = require("@instructure/ui-testable");
-
 var _uiView = require("@instructure/ui-view");
-
 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 _dec, _dec2, _dec3, _class, _class2;
-
 /**
 ---
 category: components
@@ -41,40 +27,30 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
   constructor() {
     super(...arguments);
     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;
+      renderLabel = _this$props3.renderLabel,
+      styles = _this$props3.styles;
     return (0, _emotion.jsx)("span", {
       id: this._labelId,
       role: "presentation",
@@ -82,7 +58,6 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
       css: styles === null || styles === void 0 ? void 0 : styles.label
     }, (0, _uiReactUtils.callRenderProp)(renderLabel));
   }
-
   renderSubList(subOptions) {
     const styles = this.props.styles;
     return (0, _emotion.jsx)(_Item.Item, {
@@ -91,45 +66,37 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
       css: styles === null || styles === void 0 ? void 0 : styles.label
     }, 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 = _uiView.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;
+      as = _this$props4.as,
+      role = _this$props4.role,
+      renderLabel = _this$props4.renderLabel,
+      elementRef = _this$props4.elementRef,
+      styles = _this$props4.styles;
     return (0, _emotion.jsx)("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.options,
       role: "presentation",
@@ -146,7 +113,6 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
       "aria-labelledby": this.ariaLabelledby
     }), this.renderChildren()));
   }
-
 }, _class2.displayName = "Options", _class2.componentId = 'Options', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   as: 'span',
   role: 'list',

package/lib/Options/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "OptionsLocator", {
   }
 });
 exports.default = void 0;
-
 var _OptionsLocator = require("./OptionsLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Options/props.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _uiPropTypes = require("@instructure/ui-prop-types");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,6 +30,7 @@ var _uiPropTypes = require("@instructure/ui-prop-types");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   as: _propTypes.default.elementType,
   role: _propTypes.default.string,

package/lib/Options/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -61,6 +60,5 @@ const generateStyle = componentTheme => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Options/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.optionsThemeGenerator = exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,8 +35,8 @@ exports.optionsThemeGenerator = exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        spacing = theme.spacing;
+    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.backgroundLightest,
@@ -45,10 +44,10 @@ const generateComponentTheme = theme => {
     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
+  return {
+    ...componentVariables
   };
 };
-
 exports.optionsThemeGenerator = generateComponentTheme;
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -27,11 +27,7 @@ Object.defineProperty(exports, "optionsThemeGenerator", {
     return _theme.optionsThemeGenerator;
   }
 });
-
 var _Options = require("./Options");
-
 var _theme = require("./Options/theme");
-
 var _theme2 = require("./Options/Item/theme");
-
 var _theme3 = require("./Options/Separator/theme");