@rhc-shared-components/form-select-component 0.2.0 → 0.2.2

package/dist/FormSelectComponent.d.ts

@@ -22,6 +22,8 @@ export interface FormSelectProps {
     onChange?: (_event: any, selection: any) => void;
     extraProps?: any;
     selectOptionExtraProps?: any;
+    isFullWidth?: boolean;
+    isFullHeight?: boolean;
 }
 declare const FormSelect: React.FC<FormSelectProps>;
 export default FormSelect;

package/dist/index.js

@@ -41,22 +41,6 @@ function _extends() {
   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 = {};
@@ -9543,140 +9527,75 @@ if(freeModule){// Export for Node.js.
 freeExports._=_;}else {// Export to the global object.
 root._=_;}}).call(commonjsGlobal);});
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+
 function __rest(s, e) {
   var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
   return t;
 }
 
-var IconSize;
-
-(function (IconSize) {
-  IconSize["sm"] = "sm";
-  IconSize["md"] = "md";
-  IconSize["lg"] = "lg";
-  IconSize["xl"] = "xl";
-})(IconSize || (IconSize = {}));
-
-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';
-  }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
-var currentId = 0;
+
+let currentId = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-
-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;
+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, { title, className } = _a, props = __rest(_a, ["title", "className"]);
+                const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
+                const hasTitle = Boolean(title);
+                const viewBox = [xOffset, yOffset, width, height].join(' ');
+                return (React__namespace.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
+                    hasTitle && React__namespace.createElement("title", { id: this.id }, title),
+                    React__namespace.createElement("path", { d: svgPath })));
+            }
+        },
+        _a.displayName = name,
+        _a;
 }
 
-var InfoCircleIconConfig = {
+const 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);
 
-var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "subLabel", "subInfo", "onChange", "extraProps", "selectOptionExtraProps"];
+const InfoCircleIcon = createIcon(InfoCircleIconConfig);
+
+var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "subLabel", "subInfo", "onChange", "extraProps", "selectOptionExtraProps", "isFullWidth", "isFullHeight"];
 
 var FormSelect = function FormSelect(_ref) {
   var label = _ref.label,
@@ -9684,13 +9603,16 @@ var FormSelect = function FormSelect(_ref) {
       selectOptions = _ref.selectOptions,
       _ref$ariaLabel = _ref.ariaLabel,
       ariaLabel = _ref$ariaLabel === void 0 ? 'Select Input' : _ref$ariaLabel,
-      placeholder = _ref.placeholder,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'Select a value' : _ref$placeholder,
       helperText = _ref.helperText,
       subLabel = _ref.subLabel,
       subInfo = _ref.subInfo,
       onChange = _ref.onChange,
       extraProps = _ref.extraProps,
       selectOptionExtraProps = _ref.selectOptionExtraProps,
+      isFullWidth = _ref.isFullWidth,
+      isFullHeight = _ref.isFullHeight,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useField = formik.useField(rest),
@@ -9707,7 +9629,7 @@ var FormSelect = function FormSelect(_ref) {
       isOpen = _React$useState[0],
       setIsOpen = _React$useState[1];
 
-  var _React$useState2 = React__namespace.useState(''),
+  var _React$useState2 = React__namespace.useState(placeholder),
       selected = _React$useState2[0],
       setSelected = _React$useState2[1];
 
@@ -9722,17 +9644,20 @@ var FormSelect = function FormSelect(_ref) {
     onToggle();
   };
 
+  var toggle = function toggle(toggleRef) {
+    return React__namespace.createElement(reactCore.MenuToggle, {
+      ref: toggleRef,
+      onClick: onToggle,
+      isExpanded: isOpen,
+      isFullWidth: isFullWidth,
+      isFullHeight: isFullHeight,
+      isDisabled: isSubmitting
+    }, selected);
+  };
+
   React__namespace.useEffect(function () {
     setSelected(value);
-  }, [value]); // React.useEffect(() => {
-  //   // Code to reset check mark when the options are changed
-  //   if (value) {
-  //     setFieldValue(rest.name, '');
-  //     validateField(rest.name);
-  //   }
-  //   // eslint-disable-next-line
-  // }, [selectOptions]);
-
+  }, [value]);
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(formGroupContainer.FormGroupContainer, {
     validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
     helperTextInvalid: meta.error,
@@ -9750,17 +9675,19 @@ var FormSelect = function FormSelect(_ref) {
   })), React__namespace.createElement(reactCore.SplitItem, {
     isFilled: true
   }, subInfo))), React__namespace.createElement(reactCore.Select, Object.assign({
-    variant: reactCore.SelectVariant.single,
     "aria-labelledby": rest.name,
-    typeAheadAriaLabel: placeholder || 'Select an option',
-    placeholderText: placeholder || 'Select an option',
-    onToggle: onToggle,
+    toggle: toggle,
     onSelect: onSelect,
-    selections: selected,
+    selected: selected,
     isOpen: isOpen,
-    isDisabled: isSubmitting,
-    "aria-label": ariaLabel
-  }, extraProps && _extends({}, extraProps), rest), lodash.map(selectOptions, function (option, index) {
+    popperProps: {
+      enableFlip: false
+    },
+    "aria-label": ariaLabel,
+    onOpenChange: function onOpenChange() {
+      return setIsOpen(!isOpen);
+    }
+  }, extraProps && _extends({}, extraProps), rest), React__namespace.createElement(reactCore.SelectList, null, lodash.map(selectOptions, function (option, index) {
     return React__namespace.createElement(reactCore.SelectOption, Object.assign({
       key: index,
       value: option.value,
@@ -9771,8 +9698,8 @@ var FormSelect = function FormSelect(_ref) {
       isPlaceholder: option.isPlaceholder
     }, option.isDisabled && {
       isDisabled: option.isDisabled
-    }, selectOptionExtraProps && _extends({}, selectOptionExtraProps)));
-  }))));
+    }, selectOptionExtraProps && _extends({}, selectOptionExtraProps)), option.value);
+  })))));
 };
 
 exports.FormSelect = FormSelect;

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useField, useFormikContext } from 'formik';
-import { ValidatedOptions, Split, SplitItem, Select, SelectVariant, SelectOption } from '@patternfly/react-core';
+import { ValidatedOptions, Split, SplitItem, Select, SelectList, SelectOption, MenuToggle } from '@patternfly/react-core';
 import { FormGroupContainer } from '@rhc-shared-components/form-group-container';
 
 function _extends() {
@@ -9507,117 +9507,61 @@ if(freeModule){// Export for Node.js.
 freeExports._=_;}else {// Export to the global object.
 root._=_;}}).call(commonjsGlobal);});
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+
 function __rest(s, e) {
   var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
   return t;
 }
 
-var IconSize;
-
-(function (IconSize) {
-  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';
-  }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
+
 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, { title, className } = _a, props = __rest(_a, ["title", "className"]);
+                const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
+                const hasTitle = Boolean(title);
+                const viewBox = [xOffset, yOffset, width, height].join(' ');
+                return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
+                    hasTitle && React.createElement("title", { id: this.id }, title),
+                    React.createElement("path", { d: svgPath })));
+            }
+        },
+        _a.displayName = name,
+        _a;
 }
 
 const InfoCircleIconConfig = {
@@ -9626,11 +9570,12 @@ 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", "onChange", "extraProps", "selectOptionExtraProps"];
+const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "subLabel", "subInfo", "onChange", "extraProps", "selectOptionExtraProps", "isFullWidth", "isFullHeight"];
 
 const FormSelect = _ref => {
   let {
@@ -9638,13 +9583,15 @@ const FormSelect = _ref => {
     isRequired,
     selectOptions,
     ariaLabel = 'Select Input',
-    placeholder,
+    placeholder = 'Select a value',
     helperText,
     subLabel,
     subInfo,
     onChange,
     extraProps,
-    selectOptionExtraProps
+    selectOptionExtraProps,
+    isFullWidth,
+    isFullHeight
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -9658,7 +9605,7 @@ const FormSelect = _ref => {
     validateField
   } = useFormikContext();
   const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState('');
+  const [selected, setSelected] = React.useState(placeholder);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
@@ -9671,17 +9618,18 @@ const FormSelect = _ref => {
     onToggle();
   };
 
+  const toggle = toggleRef => React.createElement(MenuToggle, {
+    ref: toggleRef,
+    onClick: onToggle,
+    isExpanded: isOpen,
+    isFullWidth: isFullWidth,
+    isFullHeight: isFullHeight,
+    isDisabled: isSubmitting
+  }, selected);
+
   React.useEffect(() => {
     setSelected(value);
-  }, [value]); // React.useEffect(() => {
-  //   // Code to reset check mark when the options are changed
-  //   if (value) {
-  //     setFieldValue(rest.name, '');
-  //     validateField(rest.name);
-  //   }
-  //   // eslint-disable-next-line
-  // }, [selectOptions]);
-
+  }, [value]);
   return React.createElement(React.Fragment, null, React.createElement(FormGroupContainer, {
     validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
     helperTextInvalid: meta.error,
@@ -9699,17 +9647,17 @@ const FormSelect = _ref => {
   })), React.createElement(SplitItem, {
     isFilled: true
   }, subInfo))), React.createElement(Select, Object.assign({
-    variant: SelectVariant.single,
     "aria-labelledby": rest.name,
-    typeAheadAriaLabel: placeholder || 'Select an option',
-    placeholderText: placeholder || 'Select an option',
-    onToggle: onToggle,
+    toggle: toggle,
     onSelect: onSelect,
-    selections: selected,
+    selected: selected,
     isOpen: isOpen,
-    isDisabled: isSubmitting,
-    "aria-label": ariaLabel
-  }, extraProps && _extends({}, extraProps), rest), lodash.map(selectOptions, (option, index) => React.createElement(SelectOption, Object.assign({
+    popperProps: {
+      enableFlip: false
+    },
+    "aria-label": ariaLabel,
+    onOpenChange: () => setIsOpen(!isOpen)
+  }, extraProps && _extends({}, extraProps), rest), React.createElement(SelectList, null, lodash.map(selectOptions, (option, index) => React.createElement(SelectOption, Object.assign({
     key: index,
     value: option.value,
     "data-testid": option.key
@@ -9719,7 +9667,7 @@ const FormSelect = _ref => {
     isPlaceholder: option.isPlaceholder
   }, option.isDisabled && {
     isDisabled: option.isDisabled
-  }, selectOptionExtraProps && _extends({}, selectOptionExtraProps)))))));
+  }, selectOptionExtraProps && _extends({}, selectOptionExtraProps)), option.value))))));
 };
 
 export { FormSelect };

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@rhc-shared-components/form-select-component",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "project description",
   "author": "redhatofficial",
   "license": "MIT",
   "repository": "https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
-  "source": "src/index.tsx",
   "engines": {
     "node": ">=10"
   },
@@ -24,7 +23,7 @@
     "predeploy": "cd example && yarn install && yarn run build"
   },
   "peerDependencies": {
-    "@patternfly/react-core": ">=4.101.3",
+    "@patternfly/react-core": ">=5.3.4",
     "formik": ">=2.1.4",
     "react": ">=16.13.1",
     "react-dom": ">=16.13.1"
@@ -62,7 +61,7 @@
     "typescript": "^3.7.5"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-core": "5.3.4",
     "@rhc-shared-components/form-group-container": "^1.0.1",
     "formik": "^2.1.4",
     "react": "^16.13.1",