TopBarSelect types are broken

Consider following code example

import { BarChartIcon, TableIcon, TopbarSelect } from "@operational/components"

const displayItems = [{ label: "Table", icon: TableIcon }, { label: "Bar Chart", icon: BarChartIcon }]

const [activeDisplay, setActiveDisplay] = React.useState<any>("Table")

;<TopbarSelect
  label="Display:"
  selected={activeDisplay}
  items={displayItems}
  onChange={setActiveDisplay}
/>

It doesn’t work without any in React.useState

[march213]

Hi 👋🏻 Can I take this one too ?

[stereobooster]

@march213 consider following code (standard React)

function App() {
  const [state, setState] = React.useState('mango');
  const onChange = React.useCallback((event) => setState(event.target.value), [])

  return (
    <select value={state} onChange={onChange}>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut">Coconut</option>
      <option value="mango">Mango</option>
    </select>
  );
}

React standard components have to deal with event, because they are building blocks. But in our case we can simplify API and onChange can be called with value directly instead of event. (Does it make sense so far?)

So we should be able to write something like this

const displayItems = [{ label: "Table", icon: TableIcon }, { label: "Bar Chart", icon: BarChartIcon }];
const [activeDisplay, setActiveDisplay] = React.useState("Table");

<TopbarSelect
  label="Display:"
  selected={activeDisplay}
  items={displayItems}
  onChange={setActiveDisplay}
/>

But our type system says that onChange can be called with ReactNode as well. Does it even make sense to have ReactNode provided to onChange? 🤔 How we gonna use ReactNode in state? (I mean generally we can, but we should not unless there is a specific reason for it).

So my idea is that onChange type signature should be (label: string) => void