@instructure/ui-options - npm Package Compare versions

Comparing version 6.3.1-rc.12 to 6.3.1-rc.13

es/Options/__examples__/Options.examples.js

@@ -36,19 +36,28 @@ /*
     }, "Option two"), React.createElement(Options.Item, {
-      key: "option-3"
+      key: "option-3",
+      variant: "selected"
     }, "Option three"), React.createElement(Options.Item, {
-      key: "option-4"
+      key: "option-4",
+      variant: "disabled"
     }, "Option four")], [React.createElement(Options.Item, {
-      key: "option-1"
-    }, "Option one"), React.createElement(Options.Item, {
-      key: "option-2",
+      key: "option-1",
       variant: "highlighted",
       renderAfterLabel: IconArrowOpenEndSolid
-    }, "Flyout menu option"), React.createElement(Options.Separator, {
+    }, "Flyout menu option"), React.createElement(Options.Item, {
+      key: "option-2"
+    }, "Option one"), React.createElement(Options.Separator, {
       key: "sep-1"
     }), React.createElement(Options, {
-      key: "options-nest",
-      renderLabel: 'Nested List'
+      key: "sub-list",
+      renderLabel: 'Sub list'
     }, React.createElement(Options.Item, {
+      variant: "selected"
+    }, "Sub option one"), React.createElement(Options.Item, null, "Sub option two")), React.createElement(Options.Separator, {
+      key: "sep-2"
+    }), React.createElement(Options, {
+      key: "icon-list",
+      renderLabel: 'Icon List'
+    }, React.createElement(Options.Item, {
       renderBeforeLabel: IconCheckSolid
-    }, "Nested option one"), React.createElement(Options.Item, {
+    }, "Icon option one"), React.createElement(Options.Item, {
       renderBeforeLabel: React.createElement(IconCheckSolid, {
@@ -59,4 +68,4 @@ style: {
       })
-    }, "Nested option two")), React.createElement(Options.Separator, {
-      key: "sep-2"
+    }, "Icon option two")), React.createElement(Options.Separator, {
+      key: "sep-3"
     }), React.createElement(Options.Item, {
@@ -63,0 +72,0 @@ key: "option-3"

es/Options/index.js

@@ -126,2 +126,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
           role = _this$props.role,
+          elementRef = _this$props.elementRef,
           renderLabel = _this$props.renderLabel;
@@ -132,2 +133,3 @@ return React.createElement("div", {
       }, renderLabel && this.renderLabel(), React.createElement(View, Object.assign({}, passthroughProps, {
+        elementRef: elementRef,
         className: styles.list,
@@ -170,2 +172,7 @@ as: as,
   /**
+  * The the actual list element
+  */
+  elementRef: PropTypes.func,
+
+  /**
   * Content to render as a label. Mostly for when the component is nested
@@ -178,2 +185,3 @@ */
   role: 'list',
+  elementRef: function elementRef(node) {},
   renderLabel: null,
@@ -180,0 +188,0 @@ children: null

es/Options/Item/index.js

@@ -40,18 +40,17 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var styles = {
-  componentId: 'dmbAY',
+  componentId: 'eqmZq',
   template: function template(theme) {
-    return "\n\n.dmbAY_bGBk{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background:".concat(theme.background || 'inherit', ";color:").concat(theme.color || 'inherit', ";cursor:pointer;font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.mediumFontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";line-height:").concat(theme.lineHeight || 'inherit', ";outline:none;position:relative;transition:background 200ms;user-select:none}\n\n.dmbAY_blJt,.dmbAY_bGBk{display:block}\n\n.dmbAY_blJt{padding:").concat(theme.padding || 'inherit', "}\n\n.dmbAY_caGd{align-items:center;display:flex;fill:").concat(theme.iconColor || 'inherit', ";height:100%;pointer-events:none;position:absolute;top:0}\n\n.dmbAY_caGd.dmbAY_fgsM{offset-inline-end:auto;offset-inline-start:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=ltr] .dmbAY_caGd.dmbAY_fgsM{left:").concat(theme.iconPadding || 'inherit', ";right:auto}\n\n[dir=rtl] .dmbAY_caGd.dmbAY_fgsM{left:auto;right:").concat(theme.iconPadding || 'inherit', "}\n\n.dmbAY_caGd.dmbAY_cGRw{offset-inline-end:").concat(theme.iconPadding || 'inherit', ";offset-inline-start:auto}\n\n[dir=ltr] .dmbAY_caGd.dmbAY_cGRw{left:auto;right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .dmbAY_caGd.dmbAY_cGRw{left:").concat(theme.iconPadding || 'inherit', ";right:auto}\n\n.dmbAY_cbMJ{background:").concat(theme.highlightedBackground || 'inherit', "}\n\n.dmbAY_cbMJ,.dmbAY_dDxn{color:").concat(theme.highlightedLabelColor || 'inherit', "}\n\n.dmbAY_dDxn{background:").concat(theme.selectedBackground || 'inherit', "}\n\n.dmbAY_bZuE{cursor:not-allowed;opacity:0.5}\n\n.dmbAY_cNUG{cursor:default}\n\n.dmbAY_cNUG>.dmbAY_blJt{padding:0}\n\n.dmbAY_ePLU .dmbAY_blJt{-webkit-padding-end:").concat(theme.iconPadding || 'inherit', ";-webkit-padding-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-end:").concat(theme.iconPadding || 'inherit', ";padding-inline-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .dmbAY_ePLU .dmbAY_blJt{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .dmbAY_ePLU .dmbAY_blJt{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n.dmbAY_bRPx .dmbAY_blJt{-webkit-padding-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);-webkit-padding-start:").concat(theme.iconPadding || 'inherit', ";padding-inline-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-start:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=ltr] .dmbAY_bRPx .dmbAY_blJt{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .dmbAY_bRPx .dmbAY_blJt{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n.dmbAY_bRPx.dmbAY_ePLU .dmbAY_blJt{-webkit-padding-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);-webkit-padding-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .dmbAY_bRPx.dmbAY_ePLU .dmbAY_blJt{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .dmbAY_bRPx.dmbAY_ePLU .dmbAY_blJt{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n.dmbAY_ePLU.dmbAY_fPFr .dmbAY_blJt{-webkit-padding-end:").concat(theme.iconPadding || 'inherit', ";-webkit-padding-start:calc(").concat(theme.groupPadding || 'inherit', " + ").concat(theme.iconPadding || 'inherit', " + 1em);padding-inline-end:").concat(theme.iconPadding || 'inherit', ";padding-inline-start:calc(").concat(theme.groupPadding || 'inherit', " + ").concat(theme.iconPadding || 'inherit', " + 1em)}\n\n[dir=ltr] .dmbAY_ePLU.dmbAY_fPFr .dmbAY_blJt{padding-left:calc(").concat(theme.groupPadding || 'inherit', " + ").concat(theme.iconPadding || 'inherit', " + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .dmbAY_ePLU.dmbAY_fPFr .dmbAY_blJt{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.groupPadding || 'inherit', " + ").concat(theme.iconPadding || 'inherit', " + 1em)}");
+    return "\n\n.eqmZq_bGBk{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background:".concat(theme.background || 'inherit', ";color:").concat(theme.color || 'inherit', ";cursor:pointer;display:block;font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.mediumFontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";line-height:").concat(theme.lineHeight || 'inherit', ";outline:none;position:relative;transition:background 200ms;user-select:none}\n\n.eqmZq_crZr{display:block;padding:").concat(theme.padding || 'inherit', "}\n\n.eqmZq_caGd{align-items:center;display:flex;fill:").concat(theme.iconColor || 'inherit', ";height:100%;pointer-events:none;position:absolute;top:0}\n\n.eqmZq_caGd.eqmZq_fgsM{offset-inline-end:auto;offset-inline-start:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=ltr] .eqmZq_caGd.eqmZq_fgsM{left:").concat(theme.iconPadding || 'inherit', ";right:auto}\n\n[dir=rtl] .eqmZq_caGd.eqmZq_fgsM{left:auto;right:").concat(theme.iconPadding || 'inherit', "}\n\n.eqmZq_caGd.eqmZq_cGRw{offset-inline-end:").concat(theme.iconPadding || 'inherit', ";offset-inline-start:auto}\n\n[dir=ltr] .eqmZq_caGd.eqmZq_cGRw{left:auto;right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .eqmZq_caGd.eqmZq_cGRw{left:").concat(theme.iconPadding || 'inherit', ";right:auto}\n\n.eqmZq_cbMJ{background:").concat(theme.highlightedBackground || 'inherit', "}\n\n.eqmZq_cbMJ,.eqmZq_dDxn{color:").concat(theme.highlightedLabelColor || 'inherit', "}\n\n.eqmZq_dDxn{background:").concat(theme.selectedBackground || 'inherit', "}\n\n.eqmZq_bZuE{cursor:not-allowed;opacity:0.5}\n\n.eqmZq_cNUG{cursor:default}\n\n.eqmZq_cNUG>.eqmZq_crZr{padding:0}\n\n.eqmZq_ePLU .eqmZq_crZr{-webkit-padding-end:").concat(theme.iconPadding || 'inherit', ";-webkit-padding-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-end:").concat(theme.iconPadding || 'inherit', ";padding-inline-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .eqmZq_ePLU .eqmZq_crZr{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .eqmZq_ePLU .eqmZq_crZr{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n.eqmZq_bRPx .eqmZq_crZr{-webkit-padding-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);-webkit-padding-start:").concat(theme.iconPadding || 'inherit', ";padding-inline-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-start:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=ltr] .eqmZq_bRPx .eqmZq_crZr{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .eqmZq_bRPx .eqmZq_crZr{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n.eqmZq_bRPx.eqmZq_ePLU .eqmZq_crZr{-webkit-padding-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);-webkit-padding-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .eqmZq_bRPx.eqmZq_ePLU .eqmZq_crZr{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .eqmZq_bRPx.eqmZq_ePLU .eqmZq_crZr{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n.eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_crZr{-webkit-padding-start:").concat(theme.nestedPadding || 'inherit', ";padding-inline-start:").concat(theme.nestedPadding || 'inherit', "}\n\n[dir=ltr] .eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_crZr{padding-left:").concat(theme.nestedPadding || 'inherit', "}\n\n[dir=rtl] .eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_crZr{padding-right:").concat(theme.nestedPadding || 'inherit', "}\n\n.eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_fgsM{offset-inline-start:").concat(theme.nestedPadding || 'inherit', "}\n\n[dir=ltr] .eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_fgsM{left:").concat(theme.nestedPadding || 'inherit', "}\n\n[dir=rtl] .eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_fgsM{right:").concat(theme.nestedPadding || 'inherit', "}");
   },
-  'root': 'dmbAY_bGBk',
-  'label': 'dmbAY_blJt',
-  'content': 'dmbAY_caGd',
-  'content--before': 'dmbAY_fgsM',
-  'content--after': 'dmbAY_cGRw',
-  'isHighlighted': 'dmbAY_cbMJ',
-  'isSelected': 'dmbAY_dDxn',
-  'isDisabled': 'dmbAY_bZuE',
-  'containsList': 'dmbAY_cNUG',
-  'hasContentBeforeLabel': 'dmbAY_ePLU',
-  'hasContentAfterLabel': 'dmbAY_bRPx',
-  'isGrouped': 'dmbAY_fPFr'
+  'root': 'eqmZq_bGBk',
+  'container': 'eqmZq_crZr',
+  'content': 'eqmZq_caGd',
+  'content--before': 'eqmZq_fgsM',
+  'content--after': 'eqmZq_cGRw',
+  'isHighlighted': 'eqmZq_cbMJ',
+  'isSelected': 'eqmZq_dDxn',
+  'isDisabled': 'eqmZq_bZuE',
+  'containsList': 'eqmZq_cNUG',
+  'hasContentBeforeLabel': 'eqmZq_ePLU',
+  'hasContentAfterLabel': 'eqmZq_bRPx'
 };
@@ -113,3 +112,3 @@ import theme from './theme';
       }, React.createElement("span", Object.assign({}, passthroughProps, {
-        className: styles.label,
+        className: styles.container,
         role: role
@@ -116,0 +115,0 @@ }), children), renderBeforeLabel && this.renderContent('before'), renderAfterLabel && this.renderContent('after'));

es/Options/Item/theme.js

@@ -40,3 +40,4 @@ /*
     padding: "".concat(spacing.xSmall, " ").concat(spacing.small),
-    iconPadding: spacing.small
+    iconPadding: spacing.small,
+    nestedPadding: spacing.medium
   };
@@ -43,0 +44,0 @@ }

lib/Options/__examples__/Options.examples.js

@@ -48,19 +48,28 @@ "use strict";
     }, "Option two"), _react.default.createElement(_index.Options.Item, {
-      key: "option-3"
+      key: "option-3",
+      variant: "selected"
     }, "Option three"), _react.default.createElement(_index.Options.Item, {
-      key: "option-4"
+      key: "option-4",
+      variant: "disabled"
     }, "Option four")], [_react.default.createElement(_index.Options.Item, {
-      key: "option-1"
-    }, "Option one"), _react.default.createElement(_index.Options.Item, {
-      key: "option-2",
+      key: "option-1",
       variant: "highlighted",
       renderAfterLabel: _uiIcons.IconArrowOpenEndSolid
-    }, "Flyout menu option"), _react.default.createElement(_index.Options.Separator, {
+    }, "Flyout menu option"), _react.default.createElement(_index.Options.Item, {
+      key: "option-2"
+    }, "Option one"), _react.default.createElement(_index.Options.Separator, {
       key: "sep-1"
     }), _react.default.createElement(_index.Options, {
-      key: "options-nest",
-      renderLabel: 'Nested List'
+      key: "sub-list",
+      renderLabel: 'Sub list'
     }, _react.default.createElement(_index.Options.Item, {
+      variant: "selected"
+    }, "Sub option one"), _react.default.createElement(_index.Options.Item, null, "Sub option two")), _react.default.createElement(_index.Options.Separator, {
+      key: "sep-2"
+    }), _react.default.createElement(_index.Options, {
+      key: "icon-list",
+      renderLabel: 'Icon List'
+    }, _react.default.createElement(_index.Options.Item, {
       renderBeforeLabel: _uiIcons.IconCheckSolid
-    }, "Nested option one"), _react.default.createElement(_index.Options.Item, {
+    }, "Icon option one"), _react.default.createElement(_index.Options.Item, {
       renderBeforeLabel: _react.default.createElement(_uiIcons.IconCheckSolid, {
@@ -71,4 +80,4 @@ style: {
       })
-    }, "Nested option two")), _react.default.createElement(_index.Options.Separator, {
-      key: "sep-2"
+    }, "Icon option two")), _react.default.createElement(_index.Options.Separator, {
+      key: "sep-3"
     }), _react.default.createElement(_index.Options.Item, {
@@ -75,0 +84,0 @@ key: "option-3"

lib/Options/index.js

@@ -132,2 +132,3 @@ "use strict";
           role = _this$props.role,
+          elementRef = _this$props.elementRef,
           renderLabel = _this$props.renderLabel;
@@ -138,2 +139,3 @@ return _react.default.createElement("div", {
       }, renderLabel && this.renderLabel(), _react.default.createElement(_uiLayout.View, Object.assign({}, passthroughProps, {
+        elementRef: elementRef,
         className: styles.list,
@@ -175,2 +177,7 @@ as: as,
   /**
+  * The the actual list element
+  */
+  elementRef: _propTypes.default.func,
+
+  /**
   * Content to render as a label. Mostly for when the component is nested
@@ -183,2 +190,3 @@ */
   role: 'list',
+  elementRef: function elementRef(node) {},
   renderLabel: null,
@@ -185,0 +193,0 @@ children: null

lib/Options/Item/index.js

@@ -41,18 +41,17 @@ "use strict";
 var styles = {
-  componentId: 'dmbAY',
+  componentId: 'eqmZq',
   template: function template(theme) {
-    return "\n\n.dmbAY_bGBk{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background:".concat(theme.background || 'inherit', ";color:").concat(theme.color || 'inherit', ";cursor:pointer;font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.mediumFontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";line-height:").concat(theme.lineHeight || 'inherit', ";outline:none;position:relative;transition:background 200ms;user-select:none}\n\n.dmbAY_blJt,.dmbAY_bGBk{display:block}\n\n.dmbAY_blJt{padding:").concat(theme.padding || 'inherit', "}\n\n.dmbAY_caGd{align-items:center;display:flex;fill:").concat(theme.iconColor || 'inherit', ";height:100%;pointer-events:none;position:absolute;top:0}\n\n.dmbAY_caGd.dmbAY_fgsM{offset-inline-end:auto;offset-inline-start:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=ltr] .dmbAY_caGd.dmbAY_fgsM{left:").concat(theme.iconPadding || 'inherit', ";right:auto}\n\n[dir=rtl] .dmbAY_caGd.dmbAY_fgsM{left:auto;right:").concat(theme.iconPadding || 'inherit', "}\n\n.dmbAY_caGd.dmbAY_cGRw{offset-inline-end:").concat(theme.iconPadding || 'inherit', ";offset-inline-start:auto}\n\n[dir=ltr] .dmbAY_caGd.dmbAY_cGRw{left:auto;right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .dmbAY_caGd.dmbAY_cGRw{left:").concat(theme.iconPadding || 'inherit', ";right:auto}\n\n.dmbAY_cbMJ{background:").concat(theme.highlightedBackground || 'inherit', "}\n\n.dmbAY_cbMJ,.dmbAY_dDxn{color:").concat(theme.highlightedLabelColor || 'inherit', "}\n\n.dmbAY_dDxn{background:").concat(theme.selectedBackground || 'inherit', "}\n\n.dmbAY_bZuE{cursor:not-allowed;opacity:0.5}\n\n.dmbAY_cNUG{cursor:default}\n\n.dmbAY_cNUG>.dmbAY_blJt{padding:0}\n\n.dmbAY_ePLU .dmbAY_blJt{-webkit-padding-end:").concat(theme.iconPadding || 'inherit', ";-webkit-padding-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-end:").concat(theme.iconPadding || 'inherit', ";padding-inline-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .dmbAY_ePLU .dmbAY_blJt{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .dmbAY_ePLU .dmbAY_blJt{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n.dmbAY_bRPx .dmbAY_blJt{-webkit-padding-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);-webkit-padding-start:").concat(theme.iconPadding || 'inherit', ";padding-inline-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-start:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=ltr] .dmbAY_bRPx .dmbAY_blJt{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .dmbAY_bRPx .dmbAY_blJt{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n.dmbAY_bRPx.dmbAY_ePLU .dmbAY_blJt{-webkit-padding-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);-webkit-padding-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .dmbAY_bRPx.dmbAY_ePLU .dmbAY_blJt{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .dmbAY_bRPx.dmbAY_ePLU .dmbAY_blJt{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n.dmbAY_ePLU.dmbAY_fPFr .dmbAY_blJt{-webkit-padding-end:").concat(theme.iconPadding || 'inherit', ";-webkit-padding-start:calc(").concat(theme.groupPadding || 'inherit', " + ").concat(theme.iconPadding || 'inherit', " + 1em);padding-inline-end:").concat(theme.iconPadding || 'inherit', ";padding-inline-start:calc(").concat(theme.groupPadding || 'inherit', " + ").concat(theme.iconPadding || 'inherit', " + 1em)}\n\n[dir=ltr] .dmbAY_ePLU.dmbAY_fPFr .dmbAY_blJt{padding-left:calc(").concat(theme.groupPadding || 'inherit', " + ").concat(theme.iconPadding || 'inherit', " + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .dmbAY_ePLU.dmbAY_fPFr .dmbAY_blJt{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.groupPadding || 'inherit', " + ").concat(theme.iconPadding || 'inherit', " + 1em)}");
+    return "\n\n.eqmZq_bGBk{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background:".concat(theme.background || 'inherit', ";color:").concat(theme.color || 'inherit', ";cursor:pointer;display:block;font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.mediumFontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";line-height:").concat(theme.lineHeight || 'inherit', ";outline:none;position:relative;transition:background 200ms;user-select:none}\n\n.eqmZq_crZr{display:block;padding:").concat(theme.padding || 'inherit', "}\n\n.eqmZq_caGd{align-items:center;display:flex;fill:").concat(theme.iconColor || 'inherit', ";height:100%;pointer-events:none;position:absolute;top:0}\n\n.eqmZq_caGd.eqmZq_fgsM{offset-inline-end:auto;offset-inline-start:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=ltr] .eqmZq_caGd.eqmZq_fgsM{left:").concat(theme.iconPadding || 'inherit', ";right:auto}\n\n[dir=rtl] .eqmZq_caGd.eqmZq_fgsM{left:auto;right:").concat(theme.iconPadding || 'inherit', "}\n\n.eqmZq_caGd.eqmZq_cGRw{offset-inline-end:").concat(theme.iconPadding || 'inherit', ";offset-inline-start:auto}\n\n[dir=ltr] .eqmZq_caGd.eqmZq_cGRw{left:auto;right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .eqmZq_caGd.eqmZq_cGRw{left:").concat(theme.iconPadding || 'inherit', ";right:auto}\n\n.eqmZq_cbMJ{background:").concat(theme.highlightedBackground || 'inherit', "}\n\n.eqmZq_cbMJ,.eqmZq_dDxn{color:").concat(theme.highlightedLabelColor || 'inherit', "}\n\n.eqmZq_dDxn{background:").concat(theme.selectedBackground || 'inherit', "}\n\n.eqmZq_bZuE{cursor:not-allowed;opacity:0.5}\n\n.eqmZq_cNUG{cursor:default}\n\n.eqmZq_cNUG>.eqmZq_crZr{padding:0}\n\n.eqmZq_ePLU .eqmZq_crZr{-webkit-padding-end:").concat(theme.iconPadding || 'inherit', ";-webkit-padding-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-end:").concat(theme.iconPadding || 'inherit', ";padding-inline-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .eqmZq_ePLU .eqmZq_crZr{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=rtl] .eqmZq_ePLU .eqmZq_crZr{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n.eqmZq_bRPx .eqmZq_crZr{-webkit-padding-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);-webkit-padding-start:").concat(theme.iconPadding || 'inherit', ";padding-inline-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-start:").concat(theme.iconPadding || 'inherit', "}\n\n[dir=ltr] .eqmZq_bRPx .eqmZq_crZr{padding-left:").concat(theme.iconPadding || 'inherit', ";padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .eqmZq_bRPx .eqmZq_crZr{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:").concat(theme.iconPadding || 'inherit', "}\n\n.eqmZq_bRPx.eqmZq_ePLU .eqmZq_crZr{-webkit-padding-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);-webkit-padding-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-inline-start:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .eqmZq_bRPx.eqmZq_ePLU .eqmZq_crZr{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .eqmZq_bRPx.eqmZq_ePLU .eqmZq_crZr{padding-left:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em);padding-right:calc(").concat(theme.iconPadding || 'inherit', "*2 + 1em)}\n\n.eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_crZr{-webkit-padding-start:").concat(theme.nestedPadding || 'inherit', ";padding-inline-start:").concat(theme.nestedPadding || 'inherit', "}\n\n[dir=ltr] .eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_crZr{padding-left:").concat(theme.nestedPadding || 'inherit', "}\n\n[dir=rtl] .eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_crZr{padding-right:").concat(theme.nestedPadding || 'inherit', "}\n\n.eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_fgsM{offset-inline-start:").concat(theme.nestedPadding || 'inherit', "}\n\n[dir=ltr] .eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_fgsM{left:").concat(theme.nestedPadding || 'inherit', "}\n\n[dir=rtl] .eqmZq_bGBk .eqmZq_bGBk:not(.eqmZq_ePLU) .eqmZq_fgsM{right:").concat(theme.nestedPadding || 'inherit', "}");
   },
-  'root': 'dmbAY_bGBk',
-  'label': 'dmbAY_blJt',
-  'content': 'dmbAY_caGd',
-  'content--before': 'dmbAY_fgsM',
-  'content--after': 'dmbAY_cGRw',
-  'isHighlighted': 'dmbAY_cbMJ',
-  'isSelected': 'dmbAY_dDxn',
-  'isDisabled': 'dmbAY_bZuE',
-  'containsList': 'dmbAY_cNUG',
-  'hasContentBeforeLabel': 'dmbAY_ePLU',
-  'hasContentAfterLabel': 'dmbAY_bRPx',
-  'isGrouped': 'dmbAY_fPFr'
+  'root': 'eqmZq_bGBk',
+  'container': 'eqmZq_crZr',
+  'content': 'eqmZq_caGd',
+  'content--before': 'eqmZq_fgsM',
+  'content--after': 'eqmZq_cGRw',
+  'isHighlighted': 'eqmZq_cbMJ',
+  'isSelected': 'eqmZq_dDxn',
+  'isDisabled': 'eqmZq_bZuE',
+  'containsList': 'eqmZq_cNUG',
+  'hasContentBeforeLabel': 'eqmZq_ePLU',
+  'hasContentAfterLabel': 'eqmZq_bRPx'
 };
@@ -112,3 +111,3 @@
       }, _react.default.createElement("span", Object.assign({}, passthroughProps, {
-        className: styles.label,
+        className: styles.container,
         role: role
@@ -115,0 +114,0 @@ }), children), renderBeforeLabel && this.renderContent('before'), renderAfterLabel && this.renderContent('after'));

lib/Options/Item/theme.js

@@ -47,3 +47,4 @@ "use strict";
     padding: "".concat(spacing.xSmall, " ").concat(spacing.small),
-    iconPadding: spacing.small
+    iconPadding: spacing.small,
+    nestedPadding: spacing.medium
   };
@@ -50,0 +51,0 @@ }

package.json

 {
   "name": "@instructure/ui-options",
-  "version": "6.3.1-rc.12+df5f505b",
+  "version": "6.3.1-rc.13+634ab1a0",
   "description": "A view-only component for composing interactive lists and menus.",
@@ -23,15 +23,15 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "6.3.1-rc.12+df5f505b",
-    "@instructure/ui-color-utils": "6.3.1-rc.12+df5f505b",
-    "@instructure/ui-test-utils": "6.3.1-rc.12+df5f505b",
-    "@instructure/uid": "6.3.1-rc.12+df5f505b"
+    "@instructure/ui-babel-preset": "6.3.1-rc.13+634ab1a0",
+    "@instructure/ui-color-utils": "6.3.1-rc.13+634ab1a0",
+    "@instructure/ui-test-utils": "6.3.1-rc.13+634ab1a0",
+    "@instructure/uid": "6.3.1-rc.13+634ab1a0"
   },
   "dependencies": {
     "@babel/runtime": "^7",
-    "@instructure/ui-icons": "6.3.1-rc.12+df5f505b",
-    "@instructure/ui-layout": "6.3.1-rc.12+df5f505b",
-    "@instructure/ui-prop-types": "6.3.1-rc.12+df5f505b",
-    "@instructure/ui-react-utils": "6.3.1-rc.12+df5f505b",
-    "@instructure/ui-testable": "6.3.1-rc.12+df5f505b",
-    "@instructure/ui-themeable": "6.3.1-rc.12+df5f505b",
+    "@instructure/ui-icons": "6.3.1-rc.13+634ab1a0",
+    "@instructure/ui-layout": "6.3.1-rc.13+634ab1a0",
+    "@instructure/ui-prop-types": "6.3.1-rc.13+634ab1a0",
+    "@instructure/ui-react-utils": "6.3.1-rc.13+634ab1a0",
+    "@instructure/ui-testable": "6.3.1-rc.13+634ab1a0",
+    "@instructure/ui-themeable": "6.3.1-rc.13+634ab1a0",
     "classnames": "^2",
@@ -45,3 +45,3 @@ "prop-types": "^15",
   "sideEffects": false,
-  "gitHead": "df5f505b1029ca8f21c7d546a800426cf7d8fcad"
+  "gitHead": "634ab1a08a93a50d02cd6423f80ccb8f83f8d9ce"
 }

src/Options/__examples__/Options.examples.js

@@ -39,6 +39,6 @@ /*
         </Options.Item>,
-        <Options.Item key="option-3">
+        <Options.Item key="option-3" variant="selected">
           Option three
         </Options.Item>,
-        <Options.Item key="option-4">
+        <Options.Item key="option-4" variant="disabled">
           Option four
@@ -48,7 +48,4 @@ </Options.Item>
       [
-        <Options.Item key="option-1">
-          Option one
-        </Options.Item>,
         <Options.Item
-          key="option-2"
+          key="option-1"
           variant="highlighted"
@@ -59,6 +56,18 @@ renderAfterLabel={IconArrowOpenEndSolid}
         </Options.Item>,
+        <Options.Item key="option-2">
+          Option one
+        </Options.Item>,
         <Options.Separator key="sep-1" />,
-        <Options key="options-nest" renderLabel={'Nested List'}>
+        <Options key="sub-list" renderLabel={'Sub list'}>
+          <Options.Item variant="selected">
+            Sub option one
+          </Options.Item>
+          <Options.Item>
+            Sub option two
+          </Options.Item>
+        </Options>,
+        <Options.Separator key="sep-2" />,
+        <Options key="icon-list" renderLabel={'Icon List'}>
           <Options.Item renderBeforeLabel={IconCheckSolid}>
-            Nested option one
+            Icon option one
           </Options.Item>
@@ -68,6 +77,6 @@ <Options.Item renderBeforeLabel={
           }>
-            Nested option two
+            Icon option two
           </Options.Item>
         </Options>,
-        <Options.Separator key="sep-2" />,
+        <Options.Separator key="sep-3" />,
         <Options.Item key="option-3">
@@ -74,0 +83,0 @@ Option two

src/Options/index.js

@@ -65,2 +65,6 @@ /*
     /**
+    * The the actual list element
+    */
+    elementRef: PropTypes.func,
+    /**
     * Content to render as a label. Mostly for when the component is nested
@@ -75,2 +79,3 @@ */
     role: 'list',
+    elementRef: (node) => {},
     renderLabel: null,
@@ -140,2 +145,3 @@ children: null
       role,
+      elementRef,
       renderLabel
@@ -152,2 +158,3 @@ } = this.props
           {...passthroughProps}
+          elementRef={elementRef}
           className={styles.list}
@@ -154,0 +161,0 @@ as={as}

src/Options/Item/index.js

@@ -142,3 +142,3 @@ /*
           {...passthroughProps}
-          className={styles.label}
+          className={styles.container}
           role={role}
@@ -145,0 +145,0 @@ >

src/Options/Item/theme.js

@@ -40,3 +40,4 @@ /*
     padding: `${spacing.xSmall} ${spacing.small}`,
-    iconPadding: spacing.small
+    iconPadding: spacing.small,
+    nestedPadding: spacing.medium
   }
@@ -43,0 +44,0 @@ }

src/Options/README.md

@@ -39,3 +39,3 @@ ---
 <View display="block" width="300px">
-  <Options role="menu">
+  <Options role="menu" as="ul">
     <Options.Item role="menuitem">
@@ -50,6 +50,15 @@ Option one
     </Options.Item>
+    <Options.Separator as="li" />
+    <Options role="menu" as="ul" renderLabel={'Sub menu'}>
+      <Options.Item role="menuitem">
+        Sub option one
+      </Options.Item>
+      <Options.Item role="menuitem">
+        Sub option two
+      </Options.Item>
+    </Options>
     <Options.Separator />
-    <Options role="menu" renderLabel={'Nested group'}>
+    <Options role="menu" as="ul" renderLabel={'Radio group'}>
       <Options.Item role="menuitemradio" renderBeforeLabel={IconCheckSolid}>
-        Nested option one
+        Radio option one
       </Options.Item>
@@ -59,3 +68,3 @@ <Options.Item role="menuitemradio" renderBeforeLabel={
       }>
-        Nested option two
+        Radio option two
       </Options.Item>
@@ -62,0 +71,0 @@ </Options>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106023

increased by1.97%

Lines of code

2270

increased by2.44%

Dependency changes

• Updated@instructure/ui-icons@6.3.1-rc.13+634ab1a0

• Updated@instructure/ui-layout@6.3.1-rc.13+634ab1a0

• Updated@instructure/ui-prop-types@6.3.1-rc.13+634ab1a0

• Updated@instructure/ui-react-utils@6.3.1-rc.13+634ab1a0

• Updated@instructure/ui-testable@6.3.1-rc.13+634ab1a0

• Updated@instructure/ui-themeable@6.3.1-rc.13+634ab1a0