'use client'; "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function _export(target, all) { for(var name in all)Object.defineProperty(target, name, { enumerable: true, get: all[name] }); } _export(exports, { useOptionBase_unstable: function() { return useOptionBase_unstable; }, useOption_unstable: function() { return useOption_unstable; } }); const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard"); const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react")); const _reactutilities = require("@fluentui/react-utilities"); const _reactaria = require("@fluentui/react-aria"); const _reacticons = require("@fluentui/react-icons"); const _ListboxContext = require("../../contexts/ListboxContext"); function getTextString(text, children) { if (text !== undefined) { return text; } let textString = ''; let hasNonStringChild = false; _react.Children.forEach(children, (child)=>{ if (typeof child === 'string') { textString += child; } else { hasNonStringChild = true; } }); // warn if an Option has non-string children and no text prop if (hasNonStringChild) { // eslint-disable-next-line no-console console.warn('Provide a `text` prop to Option components when they contain non-string children.'); } return textString; } const useOption_unstable = (props, ref)=>{ 'use no memo'; const state = useOptionBase_unstable(props, ref); // check icon let CheckIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkFilled, null); if (state.multiselect) { CheckIcon = state.selected ? /*#__PURE__*/ _react.createElement(_reacticons.Checkmark12Filled, null) : ''; } if (state.checkIcon) { var _state_checkIcon; var _children; (_children = (_state_checkIcon = state.checkIcon).children) !== null && _children !== void 0 ? _children : _state_checkIcon.children = CheckIcon; } return state; }; const useOptionBase_unstable = (props, ref)=>{ const { children, disabled, text, value } = props; const optionRef = _react.useRef(null); const optionText = getTextString(text, children); const optionValue = value !== null && value !== void 0 ? value : optionText; // use the id if provided, otherwise use a generated id const id = (0, _reactutilities.useId)('fluent-option', props.id); // data used for context registration & events const optionData = _react.useMemo(()=>({ id, disabled, text: optionText, value: optionValue }), [ id, disabled, optionText, optionValue ]); // context values const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)(); const multiselect = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.multiselect); const registerOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption); const selected = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>{ const selectedOptions = ctx.selectedOptions; return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined; }); const selectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption); const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick); const onClick = (event)=>{ var _props_onClick; if (disabled) { event.preventDefault(); return; } activeDescendantController.focus(id); // handle selection change selectOption(event, optionData); onOptionClick(event); (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event); }; // register option data with context _react.useEffect(()=>{ if (id && optionRef.current) { return registerOption(optionData, optionRef.current); } }, [ id, optionData, registerOption ]); const semanticProps = multiselect ? { role: 'menuitemcheckbox', 'aria-checked': selected } : { role: 'option', 'aria-selected': selected }; return { components: { root: 'div', checkIcon: 'span' }, root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', { // FIXME: // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement` // but since it would be a breaking change to fix it, we are casting ref to it's proper type ref: (0, _reactutilities.useMergedRefs)(ref, optionRef), 'aria-disabled': disabled ? 'true' : undefined, id, ...semanticProps, ...props, onClick }), { elementType: 'div' }), checkIcon: _reactutilities.slot.optional(props.checkIcon, { renderByDefault: true, defaultProps: { 'aria-hidden': 'true' }, elementType: 'span' }), disabled, multiselect, selected, // no longer used focusVisible: false, active: false }; };