@hig/dropdown - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

build/index.es.js

@@ -514,3 +514,3 @@ import React, { Component } from 'react';
     backgroundColor: "transparent"
-  }, props.highlighted ? { backgroundColor: themeData["menu.item.hover.backgroundColor"] } : null, props.selected ? { backgroundColor: themeData["menu.item.focus.backgroundColor"] } : null);
+  }, props.highlighted && !props.disabled ? { backgroundColor: themeData["menu.item.hover.backgroundColor"] } : null, props.selected ? { backgroundColor: themeData["menu.item.focus.backgroundColor"] } : null, props.disabled ? { opacity: themeData["component.disabled.opacity"] } : null);
 }
@@ -532,2 +532,3 @@
   var children = props.children,
+      disabled = props.disabled,
       id = props.id,
@@ -553,3 +554,4 @@ onClick = props.onClick,
           "aria-selected": selected,
-          className: css(stylesheet$3(_extends$5({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
+          className: css(stylesheet$3(_extends$5({ disabled: disabled, selected: selected, highlighted: highlighted }, props), resolvedRoles)),
+          disabled: disabled,
           id: id,
@@ -571,2 +573,3 @@ onClick: handleClick,
   children: PropTypes.node,
+  disabled: PropTypes.bool,
   highlighted: PropTypes.bool,
@@ -632,3 +635,4 @@ id: PropTypes.string,
   /**
-   * Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard.
+   * Indicates the option is currently highlighted.
+   * This is comparable to hover state, but useful when interacting by keyboard.
    */
@@ -669,3 +673,3 @@ highlighted: PropTypes.bool,
       "required": false,
-      "description": "Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard."
+      "description": "Indicates the option is currently highlighted.\nThis is comparable to hover state, but useful when interacting by keyboard."
     },
@@ -737,20 +741,21 @@ "onClick": {
   return function (option, index) {
+    var itemProps = getItemProps({
+      index: index,
+      key: "option-" + index,
+      item: option && option.item ? option.item : option,
+      disabled: option && option.disabled ? option.disabled : false,
+      selected: isSelected(option),
+      highlighted: highlightedIndex === index
+    });
     var result = void 0;
     if (option && option.render !== undefined) {
-      result = option.render(option);
+      result = option.render(option, itemProps);
     } else if (renderOption !== undefined) {
-      result = renderOption(option);
+      result = renderOption(option, itemProps);
     } else {
-      var itemProps = getItemProps({
-        index: index,
-        key: "option-" + index,
-        item: option,
-        selected: isSelected(option),
-        highlighted: highlightedIndex === index
-      });
-
+      var optionLabel = option && option.item ? option.item : option;
       result = React.createElement(
         OptionPresenter,
         itemProps,
-        formatOption(option)
+        formatOption(optionLabel)
       );
@@ -862,3 +867,4 @@ }
       /**
-       * The `Wrapper` presenter is used as a function to avoid having to use Downshift's `getRootProps`
+       * The `Wrapper` presenter is used as a function to avoid having to
+       * use Downshift's `getRootProps`
        * @see https://github.com/paypal/downshift#getrootprops
@@ -1093,2 +1099,4 @@ */
    * An array of unique values of any type except `undefined`
+   * If you use an array of objects, the object must contain the property `item`,
+   * the option's disabled state can be controlled with a `disabled` property.
    */
@@ -1106,2 +1114,6 @@ options: PropTypes.arrayOf(PropTypes.any),
    *
+   * In  addition to the option passed as an argument, props
+   * are also passed in that can be used for each option to help
+   * maintain some of the built-in `Dropdown` option functionality.
+   *
    * Similarly if both formatOption and renderOption are provided,
@@ -1217,3 +1229,3 @@ * renderOption will take precedence
       "required": false,
-      "description": "An array of unique values of any type except `undefined`"
+      "description": "An array of unique values of any type except `undefined`\nIf you use an array of objects, the object must contain the property `item`,\nthe option's disabled state can be controlled with a `disabled` property."
     },
@@ -1232,3 +1244,3 @@ "placeholder": {
       "required": false,
-      "description": "When present, this function is used to render each option.  Each\noption is passed as an argument. If any option has Option.render\nprop present, that will take precedence and this\nfunction will not be called for that option.\n\nSimilarly if both formatOption and renderOption are provided,\nrenderOption will take precedence"
+      "description": "When present, this function is used to render each option.  Each\noption is passed as an argument. If any option has Option.render\nprop present, that will take precedence and this\nfunction will not be called for that option.\n\nIn  addition to the option passed as an argument, props\nare also passed in that can be used for each option to help\nmaintain some of the built-in `Dropdown` option functionality.\n\nSimilarly if both formatOption and renderOption are provided,\nrenderOption will take precedence"
     },
@@ -1235,0 +1247,0 @@ "required": {

build/index.js

@@ -522,3 +522,3 @@ 'use strict';
     backgroundColor: "transparent"
-  }, props.highlighted ? { backgroundColor: themeData["menu.item.hover.backgroundColor"] } : null, props.selected ? { backgroundColor: themeData["menu.item.focus.backgroundColor"] } : null);
+  }, props.highlighted && !props.disabled ? { backgroundColor: themeData["menu.item.hover.backgroundColor"] } : null, props.selected ? { backgroundColor: themeData["menu.item.focus.backgroundColor"] } : null, props.disabled ? { opacity: themeData["component.disabled.opacity"] } : null);
 }
@@ -540,2 +540,3 @@
   var children = props.children,
+      disabled = props.disabled,
       id = props.id,
@@ -561,3 +562,4 @@ onClick = props.onClick,
           "aria-selected": selected,
-          className: emotion.css(stylesheet$3(_extends$5({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
+          className: emotion.css(stylesheet$3(_extends$5({ disabled: disabled, selected: selected, highlighted: highlighted }, props), resolvedRoles)),
+          disabled: disabled,
           id: id,
@@ -579,2 +581,3 @@ onClick: handleClick,
   children: PropTypes.node,
+  disabled: PropTypes.bool,
   highlighted: PropTypes.bool,
@@ -640,3 +643,4 @@ id: PropTypes.string,
   /**
-   * Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard.
+   * Indicates the option is currently highlighted.
+   * This is comparable to hover state, but useful when interacting by keyboard.
    */
@@ -677,3 +681,3 @@ highlighted: PropTypes.bool,
       "required": false,
-      "description": "Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard."
+      "description": "Indicates the option is currently highlighted.\nThis is comparable to hover state, but useful when interacting by keyboard."
     },
@@ -745,20 +749,21 @@ "onClick": {
   return function (option, index) {
+    var itemProps = getItemProps({
+      index: index,
+      key: "option-" + index,
+      item: option && option.item ? option.item : option,
+      disabled: option && option.disabled ? option.disabled : false,
+      selected: isSelected(option),
+      highlighted: highlightedIndex === index
+    });
     var result = void 0;
     if (option && option.render !== undefined) {
-      result = option.render(option);
+      result = option.render(option, itemProps);
     } else if (renderOption !== undefined) {
-      result = renderOption(option);
+      result = renderOption(option, itemProps);
     } else {
-      var itemProps = getItemProps({
-        index: index,
-        key: "option-" + index,
-        item: option,
-        selected: isSelected(option),
-        highlighted: highlightedIndex === index
-      });
-
+      var optionLabel = option && option.item ? option.item : option;
       result = React__default.createElement(
         OptionPresenter,
         itemProps,
-        formatOption(option)
+        formatOption(optionLabel)
       );
@@ -870,3 +875,4 @@ }
       /**
-       * The `Wrapper` presenter is used as a function to avoid having to use Downshift's `getRootProps`
+       * The `Wrapper` presenter is used as a function to avoid having to
+       * use Downshift's `getRootProps`
        * @see https://github.com/paypal/downshift#getrootprops
@@ -1101,2 +1107,4 @@ */
    * An array of unique values of any type except `undefined`
+   * If you use an array of objects, the object must contain the property `item`,
+   * the option's disabled state can be controlled with a `disabled` property.
    */
@@ -1114,2 +1122,6 @@ options: PropTypes.arrayOf(PropTypes.any),
    *
+   * In  addition to the option passed as an argument, props
+   * are also passed in that can be used for each option to help
+   * maintain some of the built-in `Dropdown` option functionality.
+   *
    * Similarly if both formatOption and renderOption are provided,
@@ -1225,3 +1237,3 @@ * renderOption will take precedence
       "required": false,
-      "description": "An array of unique values of any type except `undefined`"
+      "description": "An array of unique values of any type except `undefined`\nIf you use an array of objects, the object must contain the property `item`,\nthe option's disabled state can be controlled with a `disabled` property."
     },
@@ -1240,3 +1252,3 @@ "placeholder": {
       "required": false,
-      "description": "When present, this function is used to render each option.  Each\noption is passed as an argument. If any option has Option.render\nprop present, that will take precedence and this\nfunction will not be called for that option.\n\nSimilarly if both formatOption and renderOption are provided,\nrenderOption will take precedence"
+      "description": "When present, this function is used to render each option.  Each\noption is passed as an argument. If any option has Option.render\nprop present, that will take precedence and this\nfunction will not be called for that option.\n\nIn  addition to the option passed as an argument, props\nare also passed in that can be used for each option to help\nmaintain some of the built-in `Dropdown` option functionality.\n\nSimilarly if both formatOption and renderOption are provided,\nrenderOption will take precedence"
     },
@@ -1243,0 +1255,0 @@ "required": {

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/dropdown-v2.2.0](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.1.0...@hig/dropdown@2.2.0) (2019-10-23)
+
+
+### Features
+
+* allow for disabled options ([64ae4ca](https://github.com/Autodesk/hig/commit/64ae4ca))
+
 # [@hig/dropdown-v2.1.0](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.0.7...@hig/dropdown@2.1.0) (2019-09-06)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/dropdown",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "HIG Dropdown",
@@ -30,3 +30,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.11.0",
+    "@hig/theme-data": "^2.13.0",
     "react": "^15.4.1 || ^16.3.2"
@@ -33,0 +33,0 @@ },

README.md

@@ -33,1 +33,52 @@ # Dropdown
 Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
+
+## Using [render props][] for additional customization
+
+[render props]: https://reactjs.org/docs/render-props.html
+
+#### Render Option
+
+When a function is provided to `props.renderOption`, it will be given a payload containing:
+
+* `option {object || string}`
+    - the string or object from `props.options`
+* `props {object}`
+    - object that can be used as `props` to retain some of the `Dropdown` functionality in the custom rendered menu option. It contains the following properties:
+      - `aria-selected {boolean}` 
+      - `disabled {boolean}`
+      - `highlighted {boolean}`
+      - `id {string}`
+      - `key {string}` 
+      - `onClick {function(MouseEvent)}`
+      - `onMouseDown {function(MouseEvent)}`
+      - `onMouseMove {function(MouseEvent)}`
+      - `role {string}`
+      - `selected {boolean}`
+
+```jsx
+<Dropdown
+  placeholder="Select a theme",
+  options={[
+    {item: "HIG Light Theme", disabled: true}, 
+    {item: "HIG Dark Blue Theme"}, 
+    {item: "Matrix Theme"}
+  ]}
+  renderOption={(option, props) => {
+    return(
+      <div
+        aria-selected={props["aria-selected"]}
+        id={props.id}
+        onClick={props.onClick}
+        onMouseDown={props.onMouseDown}
+        onMouseMove={props.onMouseMove}
+        disabled={props.disabled}
+        selected={props.selected}
+        role={props.role}
+        key={props.key}
+      >
+        <strong>{option.item}</strong>
+      </div>
+    );
+  }}
+/>
+```

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

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

Improved metrics

Total package byte prevSize

98796

increased by4.08%

Lines of code

2277

increased by1.24%

Number of lines in readme file

84

increased by154.55%

No dependency changes