How do I share state between menubar and menu

[prbxr]

Currently seems that useMenuBar and useMenuState do not share state

[diegohaz]

What's the use case? Can you provide an example or CodeSandbox of what you're trying to do?

[lishine]

Just your example on the menu component page with menu bar and multiple menu items. There is {...menu} everywhere. But how the data of checkbox menu items bubbles to the menuBar, I couldn't find.
On useMenuBar it says - store values of radios and check boxes within the menu. But I couldn't bubble the data from menu item checkbox to the menu bar.
Also each one generates uses it's own hook - useMenuBar and useMenuItem. I couldn't understand if they are connected somehow.

[prbxr]

function Example() {
  const menu = useMenuBarState();
  return (
    <MenuBar {...menu}>
      <MenuItem {...menu} as={FileMenu} />
      <MenuItem {...menu} as={EditMenu} />
      <MenuItem {...menu} as={ViewMenu} />
    </MenuBar>
  );
}

[prbxr]

Another issue is that could not succeed passing another props to As component

/** @jsx h */
import { VNode, h, Fragment } from 'preact'
import styles from './facets.style.scss'
import cs from 'clsx'

import { useMenuBarState, MenuBar, MenuItem } from 'reakit/Menu'
import {
    CheckboxFilter,
    CheckboxFilterData,
    CheckboxFilterDataSelected,
} from '~/components/Filter/CheckboxFilter'

type FacetsData = { id: string; label: string; data: CheckboxFilterData }[]
type FacetsDataSelected = { id: string; data: CheckboxFilterDataSelected }[]

export type FacetsProps = {
    data: FacetsData
    onChange: (data?: FacetsDataSelected) => void
}

export const Facets = ({ data, ...props }: FacetsProps) => {
    const menu = useMenuBarState({ unstable_values: { a: 1 } })

    return (
        <MenuBar {...menu} className={styles.menuBar}>
            {data.map(({ id, label, data }) => {
                return <MenuItem key={id} id={id} label='label' {...menu} as={CheckboxFilter} />
            })}
        </MenuBar>
    )
}

/** @jsx h */
import { VNode, h, Fragment } from 'preact'
import styles from './checkboxFilter.style.scss'
import cs from 'clsx'
import { Button as RKButton, ButtonHTMLProps } from 'reakit/Button'
import { Ref, useRef, FC, forwardRef, Component, useEffect, useState } from 'preact/compat'
import { WithChildren } from '~/utils/typeUtils'

import { useMenuState, Menu, MenuItem, MenuButton, MenuSeparator, MenuItemCheckbox } from 'reakit/Menu'
import { ReactComponent as Svg } from '~/assets/arrowdown15.svg'
import { Button } from '~/components/Button/Button'

export type CheckboxFilterData = { id: string; value: string }[]
export type CheckboxFilterDataSelected = string[]

export type CheckboxFilterProps = ButtonHTMLProps & {
    data: CheckboxFilterData
    onChange?: (data?: CheckboxFilterDataSelected) => void
    label: string
}

export const CheckboxFilter = forwardRef(
    ({ label, data, onChange, ...props }: CheckboxFilterProps, _ref: Ref<HTMLButtonElement>) => {
        const menu = useMenuState()
        let { unstable_setValue, unstable_values } = menu
        useEffect(() => {
            onChange?.(unstable_values.values)
        }, [unstable_values, onChange])

        let ref = useRef<HTMLButtonElement>(null)
        useEffect(() => {
            if (menu.visible) {
                ref.current?.focus()
            }
        }, [menu.visible, ref])

        return (
            <div class={styles.select}>
                <MenuButton {...menu} {...props}>
                    {(props) => {
                        return (
                            <Button {...props} RightIcon={Svg}>
                                {label}
                            </Button>
                        )
                    }}
                </MenuButton>
                <Menu className={styles.menu} {...menu} aria-label={`filter ${label}`}>
                    {data.map(({ id, value }, index) => {
                        return (
                            <MenuItemCheckbox
                                ref={index === 0 ? ref : undefined}
                                key={id}
                                id={id}
                                className={cs(styles.checkbox_item)}
                                name='values'
                                {...menu}
                                value={id}
                            >
                                {value}
                            </MenuItemCheckbox>
                        )
                    })}
                </Menu>
            </div>
        )
    }
)

That label gives gives error
I guess I have to do some composition, I have yet to understand.

So I tried passing everything through unstable_values...

[diegohaz]

I don't really recommend using unstable_values right now. If you do, make sure you follow the instructions on https://reakit.io/docs/experimental/

Different state hooks don't share state by default, but you can bubble state changes up the same way you would do with any React local state: https://codesandbox.io/s/reakit-menu-sharing-values-4c3iu

[prbxr]

Thanks.
What about question - can you give me a clue why I can't pass parameters to the component?

[diegohaz]

I didn't understand the question. Could you elaborate? A CodeSandbox with the error would be really helpful.

[prbxr]

Turns our this is a typescript error with Preact. with CRA works fine.

[prbxr]

I notice @Diegohas that passing {...menu} creates needless rerenders.
I mean checking checkbox in a menu causes the menubar to rerender and causes the other menus to rerender
It is needless