feat(pf4): add group and divider to select options

Author: rvsia

packages/pf4-component-mapper/src/select/select.js

@@ -19,7 +19,7 @@ const Select = (props) => {
       id={id || input.name}
       FormGroupProps={FormGroupProps}
     >
-      <DataDrivenSelect {...input} {...rest} isDisabled={isDisabled || isReadOnly} />
+      <DataDrivenSelect {...input} {...rest} isDisabled={isDisabled || isReadOnly} useFlatOptions />
     </FormGroup>
   );
 };

packages/pf4-component-mapper/src/select/select/menu.js

@@ -131,6 +131,18 @@ const Menu = ({
         />
       )}
       {filteredOptions.map((item, index) => {
+        if (item.group) {
+          return (
+            <div className="pf-c-select__menu-group" key={`group-${index}`}>
+              <div className="pf-c-select__menu-group-title">{item.group}</div>
+            </div>
+          );
+        }
+
+        if (item.divider) {
+          return <hr className="pf-c-divider" key={`divider-${index}`} />;
+        }
+
         const itemProps = getItemProps({
           item,
           index,

packages/pf4-component-mapper/src/select/select/select.js

@@ -238,6 +238,7 @@ InternalSelect.propTypes = {
     PropTypes.shape({
       value: PropTypes.any,
       label: PropTypes.any,
+      divider: PropTypes.bool,
     })
   ).isRequired,
   value: PropTypes.any,