feat(core): add support for <optgroup> tag

[nagaozen]

Reasons for making this change

HTML Select Element offers a native way to organize options in option groups. This update extends rjsf SelectWidget to support <optgroup> as well.

If this is related to existing tickets, include links to them as well. Use the syntax fixes #[issue number] (ex: fixes #123).

fixes #1813, #580

If your PR is non-trivial and you'd like to schedule a synchronous review, please add it to the weekly meeting agenda: https://docs.google.com/document/d/12PjTvv21k6LIky6bNQVnsplMLLnmEuypTLQF8a-8Wss/edit

Checklist

• I'm updating documentation
  • I've checked the rendering of the Markdown text I've added
• I'm adding or updating code
  • I've added and/or updated tests. I've run npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:update to update snapshots, if needed.
  • I've updated docs if needed
  • I've updated the changelog with a description of the PR
• I'm adding a new feature
  • I've updated the playground with an example use of the feature

[heath-freenome]

@nagaozen Thanks for the new feature... Can you update the CHANGELOG.md to add a new minor release with notes on this feature. Also please update the tests to validate these changes. Thanks

[nagaozen]

@nagaozen Thanks for the new feature... Can you update the CHANGELOG.md to add a new minor release with notes on this feature. Also please update the tests to validate these changes. Thanks

Sure, must update the CHANGELOG and place some tests.

[nagaozen]

Alright, checklist completed!

[heath-freenome]

@nagaozen Consider doing a npm run cs-format to fix your lint errors and then making sure using npm run lint

[heath-freenome]

I still do not see any tests to verify that these changes work properly. You can update uiSchema.test.jsx to add them there

[heath-freenome]

This is duplicate code to what is above. Consider creating a new component at the top of the file to render it and use it here and above

[heath-freenome]

Something like a helper component in the file:

interface OptionProps {
  enumDisabled?: UIOptionsType['enumDisabled'];
  value: EnumOptionsType['value'];
  label: EnumOptionsType['label'];
  index: number;
}

function Option(props: OptionProps) {
  const { enumDisabled, index, label, value } = props;
  const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
  return (
    <option value={String(index)} disabled={disabled}>
      {label}
    </option>
  );
}

Then this would look like:

Array.isArray(enumOptions) && enumOptions.map(({ value, label }, i) => {
      return <Option key={i} enumDisabled={enumDisabled} index={i} value={value} label={label} />;

[heath-freenome]

Duplicate code here, minus the let line, which really should be const since you don't change anything

[heath-freenome]

Using the suggestion below, this would look like:

          if (!enumOptionFromValue.has(value)) {
            return null;
          }
          const [{ label }, i] = enumOptionFromValue.get(value);
          return <Option key={i} enumDisabled={enumDisabled} index={i} value={value} label={label} />;

[heath-freenome]

@nagaozen Also, since the bootstrap-4 code has nearly the same implementation, can you also add this feature to it?

[nagaozen]

@nagaozen Also, since the bootstrap-4 code has nearly the same implementation, can you also add this feature to it?

Mmm, its a core widget, shouldn't it work as is in bootstrap 4? I've never played with the bs4 version, but will take a look into it.

[heath-freenome]

This will now be 5.24.0 since we just released 5.23.0