Accept selectedOptionsDisplayFormatter prop

[bhennes2]

Author Checklist

• Add unit test(s)
• Update version in package.json (see the versioning guidelines)
• Update documentation (if necessary)
• Add story to storybook (if necessary)
• Assign dev reviewer

[bhennes2]

@chawes13 Also looking to port over some default styles for this component too from MTC. Ben is working to parse out those styles that I'd like to include in this PR.

[chawes13]

Does it return HTML or JSX?

[chawes13]

Since this has the possibility to return jsx, should we make it a component (a la LabeledField's labelComponent)?

[chawes13]

I typically would interpret a "Formatter" as something that returns a string, but I might just be biased by my experience with date libraries (e.g., date-fns and moment)

[chawes13]

A test for jsx would be nice as well

[chawes13]

@bhennes2 Has your local implementation held up on your client project? Still interested in including this functionality in the library?

[josiasds]

@CodiumAI-Agent /improve --extended

[CodiumAI-Agent]

PR Code Suggestions

💡 Suggestion:

Correct the validator's logic by passing the selectedOptionsDisplayFormatter prop to the DropdownSelect component.

File: src/forms/inputs/dropdown-checkbox-group.js (62-64)

Example code:

---

Existing code:

<DropdownSelect {...props} selectedValues={ value } className="checkboxes">
  <CheckboxGroup { ...props } label={ false } />
</DropdownSelect>

Improved code:

<DropdownSelect {...props} selectedValues={ value } selectedOptionsDisplayFormatter={props.selectedOptionsDisplayFormatter} className="checkboxes">
  <CheckboxGroup { ...props } label={ false } />
</DropdownSelect>

---

💡 Suggestion:

Wrap the PropTypes and defaultProps into a function to improve reusability and maintainability.

File: src/forms/helpers/dropdown-select.js (7-18)

Example code:

---

Existing code:

const propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  selectedValues: PropTypes.arrayOf(PropTypes.string),
  selectedOptionsDisplayFormatter: PropTypes.func,
  ...togglePropTypes('expanded'),
}

const defaultProps = {
  className: '',
  selectedValues: [],
  selectedOptionsDisplayFormatter: getLabel,
}

Improved code:

function getDropdownSelectProps() {
  return {
    propTypes: {
      children: PropTypes.node,
      className: PropTypes.string,
      selectedValues: PropTypes.arrayOf(PropTypes.string),
      selectedOptionsDisplayFormatter: PropTypes.func,
      ...togglePropTypes('expanded'),
    },
    defaultProps: {
      className: '',
      selectedValues: [],
      selectedOptionsDisplayFormatter: getLabel,
    }
  }
}

---