Add groups/dividers to PF4 select

[rvsia]

Fixes #1145

Description

Adds support for PF4 select group and divider objects.

TODO:

• tests
• documentation

Schema (if applicable)

                schema={{fields:[
                    {
                        component: 'select',
                        name: 'select-with-categories',
                        label: 'With categories',
                        options: [
                            {
                                label: 'Category 1',
                                options: [
                                    { label: 'value 1', value: '111' },
                                    { label: 'value 2', value: '222' }
                                ]
                            },
                            {divider: true},
                            {label: 'independent 1', value: '1112333'},
                            {divider: true},
                            {
                                label: 'Category 2',
                                options: [
                                    { label: 'value 3', value: '333' },
                                    { label: 'value 4', value: '444' }
                                ]
                            },
                            {divider: true},
                            {label: 'independent 2', value: '11111'}
                        ]
                    }
                ]}}

[DataDrivenFormsBot]

A new version (feat) will be released: v3.15.0 [DataDrivenFormsBot]

[codecov]

Codecov Report

Merging #1148 (9f4ce7b) into master (de36488) will decrease coverage by 0.00%.
The diff coverage is 94.00%.

@@            Coverage Diff             @@
##           master    #1148      +/-   ##
==========================================
- Coverage   94.91%   94.91%   -0.01%     
==========================================
  Files         208      209       +1     
  Lines        3542     3576      +34     
  Branches     1224     1243      +19     
==========================================
+ Hits         3362     3394      +32     
- Misses        180      182       +2     

Impacted Files	Coverage Δ
packages/common/src/select/reducer.js	92.00% <83.33%> (-8.00%)	⬇️
...ges/pf4-component-mapper/src/select/select/menu.js	35.21% <93.33%> (+9.40%)	⬆️
packages/common/src/select/flat-options.js	100.00% <100.00%> (ø)
packages/common/src/select/select.js	97.61% <100.00%> (+0.11%)	⬆️
...s/pf4-component-mapper/src/select/select/select.js	89.36% <100.00%> (+1.26%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 834aaac...9f4ce7b. Read the comment docs.

[Hyperkid123]

@rvsia Looking at the PF4 implementation, they use nested lists in the select options menu. But here we have a flat structure. I think we might hear from QAs that this menu is composed accordingly. I personally don't care that much. Only reason that I can think of why the DOM should be nested is accessibility.

What do you think?

[rvsia]

Fixed.

[Hyperkid123]

🎉 This PR is included in version 3.15.0 🎉

The release is available on

• react-form-renderer (@latest dist-tag)

• ant-component-mapper (@latest dist-tag)

• blueprint-component-mapper (@latest dist-tag)

• carbon-component-mapper (@latest dist-tag)

• mui-component-mapper (@latest dist-tag)

• pf4-component-mapper (@latest dist-tag)

• suir-component-mapper (@latest dist-tag)

Data-Driven-Forms.org!

[steverhoades]

I am seeing this now when building, are you seeing the same by any chance? Only started after upgrading (took me awhile to do this).
v3.15.3

"export 'flatOptions' was not found in '@data-driven-forms/common/select'

Edit:
I see the issue. For some reason I have @data-driven-forms/common@3.12.1 installed. I haven't explicitly defined this package as a dependency which is strange.

[steverhoades]

Strange, force updating the package to 3.15.3 doesn't seem to fix the issue. I can clearly see the export in the package. Any ideas?

WARNING in ../node_modules/@data-driven-forms/pf4-component-mapper/esm/select/select/select.js 343:24-35
"export 'flatOptions' was not found in '@data-driven-forms/common/select'
 @ ../node_modules/@data-driven-forms/pf4-component-mapper/esm/component-mapper/component-mapper.js
 @ ../node_modules/@data-driven-forms/pf4-component-mapper/esm/component-mapper/index.js
 @ ../node_modules/@data-driven-forms/pf4-component-mapper/esm/index.js
 ...
 @ ./src/index.tsx
 @ multi webpack-hot-middleware/client?path=http://localhost:62123/__webpack_hmr&reload=true ./src/index.css ./src/index.tsx

Edit:
Ok, I forgot to look within @data-driven-forms/pf-component-mapper node_modules directory where it still wants 3.12.1. I must have some weird unmet dependencies causing this to fallback to that version. I'll keep digging.

Edit 2:

@data-driven-forms/pf4-component-mapper > @data-driven-forms/common@3.12.1" has unmet peer dependency "react@>=16.13.1".
@data-driven-forms/pf4-component-mapper > @data-driven-forms/common@3.12.1" has unmet peer dependency "react-dom@>=16.13.1".
@data-driven-forms/pf4-component-mapper > @data-driven-forms/common > react-select > @emotion/core@10.1.1" has unmet peer dependency "react@>=16.3.0".
@data-driven-forms/pf4-component-mapper > @data-driven-forms/common > react-select > react-input-autosize@3.0.0" has unmet peer dependency "react@^16.3.0 || ^17.0.0".
@data-driven-forms/pf4-component-mapper > @data-driven-forms/common > react-select > @emotion/core@10.1.1" has unmet peer dependency "react@>=16.3.0".
@data-driven-forms/pf4-component-mapper > @data-driven-forms/common > react-select > react-input-autosize@3.0.0" has unmet peer dependency "react@^16.3.0 || ^17.0.0".

That is interesting because i'm using react@17.0.2

Edit 3:
Alrighty this was due to some weird yarn.lock madness. Removing the @data-driven-forms/pf4-component-mapper package and re-adding it fixed the problem.