@instructure/ui-options 8.19.0 → 8.19.1-snapshot.0

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 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.

package/es/Options/Item/index.js

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

package/es/Options/Item/props.js

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

package/es/Options/Item/styles.js

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

package/es/Options/Item/theme.js

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

package/es/Options/Separator/theme.js

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

package/es/Options/theme.js

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

package/es/index.js

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

package/lib/Options/Item/index.js

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

package/lib/Options/Item/props.js

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

package/lib/Options/Item/styles.js

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

package/lib/Options/Item/theme.js

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

package/lib/Options/Separator/theme.js

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

package/lib/Options/theme.js

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

package/lib/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.19.0",
+  "version": "8.19.1-snapshot.0+257cc2783",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,21 +23,21 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.19.0",
-    "@instructure/ui-color-utils": "8.19.0",
-    "@instructure/ui-test-locator": "8.19.0",
-    "@instructure/ui-test-utils": "8.19.0",
-    "@instructure/ui-themes": "8.19.0"
+    "@instructure/ui-babel-preset": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-color-utils": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-test-locator": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-test-utils": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-themes": "8.19.1-snapshot.0+257cc2783"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.19.0",
-    "@instructure/shared-types": "8.19.0",
-    "@instructure/ui-icons": "8.19.0",
-    "@instructure/ui-prop-types": "8.19.0",
-    "@instructure/ui-react-utils": "8.19.0",
-    "@instructure/ui-testable": "8.19.0",
-    "@instructure/ui-view": "8.19.0",
+    "@instructure/emotion": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/shared-types": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-icons": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-prop-types": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-react-utils": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-testable": "8.19.1-snapshot.0+257cc2783",
+    "@instructure/ui-view": "8.19.1-snapshot.0+257cc2783",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -46,5 +46,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "257cc27836b9f56296eb692e601bc7acda4e1d1e"
 }

package/src/Options/Item/index.tsx

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

package/src/Options/Item/props.ts

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

package/src/Options/Item/styles.ts

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

package/src/Options/Item/theme.ts

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

package/src/Options/Separator/theme.ts

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

package/src/Options/theme.ts

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

package/src/index.ts

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