UNPKG

@atlaskit/dropdown-menu

Version:

A dropdown menu displays a list of actions or options to a user.

75 lines (73 loc) 2.29 kB
import _extends from "@babel/runtime/helpers/extends"; import React, { createContext, useContext, useState } from 'react'; import noop from '@atlaskit/ds-lib/noop'; import { useId } from '@atlaskit/ds-lib/use-id'; import { Section } from '@atlaskit/menu'; import GroupTitle from '../internal/components/group-title'; import { SelectionStoreContext } from '../internal/context/selection-store'; import resetOptionsInGroup from '../internal/utils/reset-options-in-group'; /** * __Radio group context__ * Context provider that wraps each DropdownItemRadioGroup */ export const RadioGroupContext = /*#__PURE__*/createContext({ id: '', radioGroupState: {}, selectRadioItem: noop }); /** * __Dropdown item radio group__ * Store which manages the selection state for each DropdownItemRadio * across mount and unmounts. * */ const DropdownItemRadioGroup = ({ children, hasSeparator, id, isList, isScrollable, testId, title, // DSP-13312 TODO: remove spread props in future major release ...rest }) => { const { setGroupState, getGroupState } = useContext(SelectionStoreContext); const uid = useId(); const titleId = `dropdown-menu-item-radio-group-title-${uid}`; /** * - initially `radioGroupState` is from selection store, so it's safe to update without re-rendering * - we flush a render by updating this local radio group state */ const [radioGroupState, setRadioGroupState] = useState(() => getGroupState(id)); const selectRadioItem = (childId, value) => { const newValue = { ...resetOptionsInGroup(getGroupState(id)), [childId]: value }; setRadioGroupState(newValue); setGroupState(id, newValue); }; return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, { value: { id, radioGroupState, selectRadioItem } }, /*#__PURE__*/React.createElement(Section, _extends({ hasSeparator: hasSeparator, id: id, isList: isList, isScrollable: isScrollable, testId: testId, titleId: title ? titleId : undefined // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props }, rest), title && /*#__PURE__*/React.createElement(GroupTitle, { id: titleId, title: title }), children)); }; export default DropdownItemRadioGroup;