@rhc-shared-components/form-select-component 0.1.2 → 0.1.4

package/dist/FormSelectComponent.d.ts

@@ -6,6 +6,8 @@ export interface ISelectItem {
     description?: string;
     isDisabled?: boolean;
     isPlaceholder?: boolean;
+    extraProps?: any;
+    selectOptionExtraProps?: any;
 }
 export interface FormSelectProps {
     name: string;
@@ -17,6 +19,9 @@ export interface FormSelectProps {
     subInfo?: string;
     ariaLabel?: string;
     helperText?: string;
+    onChange?: (_event: any, selection: any) => void;
+    extraProps?: any;
+    selectOptionExtraProps?: any;
 }
 declare const FormSelect: React.FC<FormSelectProps>;
 export default FormSelect;

package/dist/index.js

@@ -23,6 +23,40 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -9537,70 +9571,112 @@ function __rest(s, e) {
 }
 
 var IconSize;
+
 (function (IconSize) {
-    IconSize["sm"] = "sm";
-    IconSize["md"] = "md";
-    IconSize["lg"] = "lg";
-    IconSize["xl"] = "xl";
+  IconSize["sm"] = "sm";
+  IconSize["md"] = "md";
+  IconSize["lg"] = "lg";
+  IconSize["xl"] = "xl";
 })(IconSize || (IconSize = {}));
-const getSize = (size) => {
-    switch (size) {
-        case IconSize.sm:
-            return '1em';
-        case IconSize.md:
-            return '1.5em';
-        case IconSize.lg:
-            return '2em';
-        case IconSize.xl:
-            return '3em';
-        default:
-            return '1em';
-    }
+
+var getSize = function getSize(size) {
+  switch (size) {
+    case IconSize.sm:
+      return '1em';
+
+    case IconSize.md:
+      return '1.5em';
+
+    case IconSize.lg:
+      return '2em';
+
+    case IconSize.xl:
+      return '3em';
+
+    default:
+      return '1em';
+  }
 };
-let currentId = 0;
+var currentId = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
-    var _a;
-    return _a = class SVGIcon extends React__namespace.Component {
-            constructor() {
-                super(...arguments);
-                this.id = `icon-title-${currentId++}`;
-            }
-            render() {
-                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
-                const hasTitle = Boolean(title);
-                const heightWidth = getSize(size);
-                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
-                const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React__namespace.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
-                    hasTitle && React__namespace.createElement("title", { id: this.id }, title),
-                    React__namespace.createElement("path", { d: svgPath })));
-            }
-        },
-        _a.displayName = name,
-        _a.defaultProps = {
-            color: 'currentColor',
-            size: IconSize.sm,
-            noVerticalAlign: false
-        },
-        _a;
+
+function createIcon(_ref) {
+  var name = _ref.name,
+      _ref$xOffset = _ref.xOffset,
+      xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
+      _ref$yOffset = _ref.yOffset,
+      yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
+      width = _ref.width,
+      height = _ref.height,
+      svgPath = _ref.svgPath;
+
+  var _a;
+
+  return _a = /*#__PURE__*/function (_React$Component) {
+    _inheritsLoose(SVGIcon, _React$Component);
+
+    function SVGIcon() {
+      var _this;
+
+      _this = _React$Component.apply(this, arguments) || this;
+      _this.id = "icon-title-" + currentId++;
+      return _this;
+    }
+
+    var _proto = SVGIcon.prototype;
+
+    _proto.render = function render() {
+      var _a = this.props,
+          size = _a.size,
+          color = _a.color,
+          title = _a.title,
+          noVerticalAlign = _a.noVerticalAlign,
+          props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+
+      var hasTitle = Boolean(title);
+      var heightWidth = getSize(size);
+      var baseAlign = -0.125 * Number.parseFloat(heightWidth);
+      var style = noVerticalAlign ? null : {
+        verticalAlign: baseAlign + "em"
+      };
+      var viewBox = [xOffset, yOffset, width, height].join(' ');
+      return React__namespace.createElement("svg", Object.assign({
+        style: style,
+        fill: color,
+        height: heightWidth,
+        width: heightWidth,
+        viewBox: viewBox,
+        "aria-labelledby": hasTitle ? this.id : null,
+        "aria-hidden": hasTitle ? null : true,
+        role: "img"
+      }, props), hasTitle && React__namespace.createElement("title", {
+        id: this.id
+      }, title), React__namespace.createElement("path", {
+        d: svgPath
+      }));
+    };
+
+    return SVGIcon;
+  }(React__namespace.Component), _a.displayName = name, _a.defaultProps = {
+    color: 'currentColor',
+    size: IconSize.sm,
+    noVerticalAlign: false
+  }, _a;
 }
 
-const InfoCircleIconConfig = {
+var InfoCircleIconConfig = {
   name: 'InfoCircleIcon',
   height: 512,
   width: 512,
   svgPath: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
+var InfoCircleIcon = createIcon(InfoCircleIconConfig);
 
-const InfoCircleIcon = createIcon(InfoCircleIconConfig);
-
-var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "subLabel", "subInfo"];
+var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "subLabel", "subInfo", "onChange", "extraProps", "selectOptionExtraProps"];
 
 var FormSelect = function FormSelect(_ref) {
   var label = _ref.label,
@@ -9612,6 +9688,9 @@ var FormSelect = function FormSelect(_ref) {
       helperText = _ref.helperText,
       subLabel = _ref.subLabel,
       subInfo = _ref.subInfo,
+      onChange = _ref.onChange,
+      extraProps = _ref.extraProps,
+      selectOptionExtraProps = _ref.selectOptionExtraProps,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useField = formik.useField(rest),
@@ -9637,6 +9716,7 @@ var FormSelect = function FormSelect(_ref) {
   };
 
   var onSelect = function onSelect(_event, selection) {
+    if (onChange) onChange(_event, selection);
     setFieldValue(rest.name, selection);
     validateField(rest.name);
     onToggle();
@@ -9680,7 +9760,7 @@ var FormSelect = function FormSelect(_ref) {
     isOpen: isOpen,
     isDisabled: isSubmitting,
     "aria-label": ariaLabel
-  }, rest), lodash.map(selectOptions, function (option, index) {
+  }, extraProps && _extends({}, extraProps), rest), lodash.map(selectOptions, function (option, index) {
     return React__namespace.createElement(reactCore.SelectOption, Object.assign({
       key: index,
       value: option.value,
@@ -9691,7 +9771,7 @@ var FormSelect = function FormSelect(_ref) {
       isPlaceholder: option.isPlaceholder
     }, option.isDisabled && {
       isDisabled: option.isDisabled
-    }));
+    }, selectOptionExtraProps && _extends({}, selectOptionExtraProps)));
   }))));
 };
 

package/dist/index.modern.js

@@ -3,6 +3,24 @@ import { useField, useFormikContext } from 'formik';
 import { ValidatedOptions, Split, SplitItem, Select, SelectVariant, SelectOption } from '@patternfly/react-core';
 import { FormGroupContainer } from '@rhc-shared-components/form-group-container';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -9515,56 +9533,91 @@ function __rest(s, e) {
 }
 
 var IconSize;
+
 (function (IconSize) {
-    IconSize["sm"] = "sm";
-    IconSize["md"] = "md";
-    IconSize["lg"] = "lg";
-    IconSize["xl"] = "xl";
+  IconSize["sm"] = "sm";
+  IconSize["md"] = "md";
+  IconSize["lg"] = "lg";
+  IconSize["xl"] = "xl";
 })(IconSize || (IconSize = {}));
-const getSize = (size) => {
-    switch (size) {
-        case IconSize.sm:
-            return '1em';
-        case IconSize.md:
-            return '1.5em';
-        case IconSize.lg:
-            return '2em';
-        case IconSize.xl:
-            return '3em';
-        default:
-            return '1em';
-    }
+
+const getSize = size => {
+  switch (size) {
+    case IconSize.sm:
+      return '1em';
+
+    case IconSize.md:
+      return '1.5em';
+
+    case IconSize.lg:
+      return '2em';
+
+    case IconSize.xl:
+      return '3em';
+
+    default:
+      return '1em';
+  }
 };
 let currentId = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
-    var _a;
-    return _a = class SVGIcon extends React.Component {
-            constructor() {
-                super(...arguments);
-                this.id = `icon-title-${currentId++}`;
-            }
-            render() {
-                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
-                const hasTitle = Boolean(title);
-                const heightWidth = getSize(size);
-                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
-                const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
-                    hasTitle && React.createElement("title", { id: this.id }, title),
-                    React.createElement("path", { d: svgPath })));
-            }
-        },
-        _a.displayName = name,
-        _a.defaultProps = {
-            color: 'currentColor',
-            size: IconSize.sm,
-            noVerticalAlign: false
-        },
-        _a;
+
+function createIcon({
+  name,
+  xOffset = 0,
+  yOffset = 0,
+  width,
+  height,
+  svgPath
+}) {
+  var _a;
+
+  return _a = class SVGIcon extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.id = `icon-title-${currentId++}`;
+    }
+
+    render() {
+      const _a = this.props,
+            {
+        size,
+        color,
+        title,
+        noVerticalAlign
+      } = _a,
+            props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+
+      const hasTitle = Boolean(title);
+      const heightWidth = getSize(size);
+      const baseAlign = -0.125 * Number.parseFloat(heightWidth);
+      const style = noVerticalAlign ? null : {
+        verticalAlign: `${baseAlign}em`
+      };
+      const viewBox = [xOffset, yOffset, width, height].join(' ');
+      return React.createElement("svg", Object.assign({
+        style: style,
+        fill: color,
+        height: heightWidth,
+        width: heightWidth,
+        viewBox: viewBox,
+        "aria-labelledby": hasTitle ? this.id : null,
+        "aria-hidden": hasTitle ? null : true,
+        role: "img"
+      }, props), hasTitle && React.createElement("title", {
+        id: this.id
+      }, title), React.createElement("path", {
+        d: svgPath
+      }));
+    }
+
+  }, _a.displayName = name, _a.defaultProps = {
+    color: 'currentColor',
+    size: IconSize.sm,
+    noVerticalAlign: false
+  }, _a;
 }
 
 const InfoCircleIconConfig = {
@@ -9573,12 +9626,11 @@ const InfoCircleIconConfig = {
   width: 512,
   svgPath: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
 const InfoCircleIcon = createIcon(InfoCircleIconConfig);
 
-const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "subLabel", "subInfo"];
+const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "subLabel", "subInfo", "onChange", "extraProps", "selectOptionExtraProps"];
 
 const FormSelect = _ref => {
   let {
@@ -9589,7 +9641,10 @@ const FormSelect = _ref => {
     placeholder,
     helperText,
     subLabel,
-    subInfo
+    subInfo,
+    onChange,
+    extraProps,
+    selectOptionExtraProps
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -9610,6 +9665,7 @@ const FormSelect = _ref => {
   };
 
   const onSelect = (_event, selection) => {
+    if (onChange) onChange(_event, selection);
     setFieldValue(rest.name, selection);
     validateField(rest.name);
     onToggle();
@@ -9653,7 +9709,7 @@ const FormSelect = _ref => {
     isOpen: isOpen,
     isDisabled: isSubmitting,
     "aria-label": ariaLabel
-  }, rest), lodash.map(selectOptions, (option, index) => React.createElement(SelectOption, Object.assign({
+  }, extraProps && _extends({}, extraProps), rest), lodash.map(selectOptions, (option, index) => React.createElement(SelectOption, Object.assign({
     key: index,
     value: option.value,
     "data-testid": option.key
@@ -9663,7 +9719,7 @@ const FormSelect = _ref => {
     isPlaceholder: option.isPlaceholder
   }, option.isDisabled && {
     isDisabled: option.isDisabled
-  }))))));
+  }, selectOptionExtraProps && _extends({}, selectOptionExtraProps)))))));
 };
 
 export { FormSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-select-component",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "project description",
   "author": "redhatofficial",
   "license": "MIT",