213 lines
9.7 KiB
JavaScript
213 lines
9.7 KiB
JavaScript
'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, {
|
|
useComboboxBase_unstable: function() {
|
|
return useComboboxBase_unstable;
|
|
},
|
|
useCombobox_unstable: function() {
|
|
return useCombobox_unstable;
|
|
}
|
|
});
|
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
const _reactaria = require("@fluentui/react-aria");
|
|
const _reactfield = require("@fluentui/react-field");
|
|
const _reacticons = require("@fluentui/react-icons");
|
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
|
|
const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
|
|
const _Listbox = require("../Listbox/Listbox");
|
|
const _useListboxSlot = require("../../utils/useListboxSlot");
|
|
const _useInputTriggerSlot = require("./useInputTriggerSlot");
|
|
const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
|
|
const useComboboxBase_unstable = (props, ref)=>{
|
|
'use no memo';
|
|
var _state_clearIcon, _state_clearIcon1;
|
|
// Merge props from surrounding <Field>, if any
|
|
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
|
|
supportsLabelFor: true,
|
|
supportsRequired: true
|
|
});
|
|
const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
|
|
matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
|
|
});
|
|
const comboboxInternalState = (0, _useComboboxBaseState.useComboboxBaseState)({
|
|
...props,
|
|
editable: true,
|
|
activeDescendantController
|
|
});
|
|
const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;
|
|
const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } = baseState;
|
|
const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
|
|
const { disableAutoFocus = false, freeform, inlinePopup } = props;
|
|
const comboId = (0, _reactutilities.useId)('combobox-');
|
|
const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
|
|
props,
|
|
primarySlotTagName: 'input',
|
|
excludedPropNames: [
|
|
'children'
|
|
]
|
|
});
|
|
const triggerRef = _react.useRef(null);
|
|
const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef), {
|
|
state: comboboxInternalState,
|
|
triggerRef,
|
|
defaultProps: {
|
|
children: props.children,
|
|
disableAutoFocus
|
|
}
|
|
});
|
|
var _props_input;
|
|
const triggerSlot = (0, _useInputTriggerSlot.useInputTriggerSlot)((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, (0, _reactutilities.useMergedRefs)(triggerRef, activeParentRef, ref), {
|
|
state: comboboxInternalState,
|
|
freeform,
|
|
defaultProps: {
|
|
type: 'text',
|
|
value: value !== null && value !== void 0 ? value : '',
|
|
'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
|
|
...triggerNativeProps
|
|
},
|
|
activeDescendantController
|
|
});
|
|
const rootSlot = _reactutilities.slot.always(props.root, {
|
|
defaultProps: {
|
|
'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
|
|
...rootNativeProps
|
|
},
|
|
elementType: 'div'
|
|
});
|
|
rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
|
|
const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
|
|
const state = {
|
|
components: {
|
|
root: 'div',
|
|
input: 'input',
|
|
expandIcon: 'span',
|
|
listbox: _Listbox.Listbox,
|
|
clearIcon: 'span'
|
|
},
|
|
root: rootSlot,
|
|
input: triggerSlot,
|
|
listbox: open || hasFocus ? listbox : undefined,
|
|
clearIcon: _reactutilities.slot.optional(props.clearIcon, {
|
|
defaultProps: {
|
|
'aria-hidden': 'true'
|
|
},
|
|
elementType: 'span',
|
|
renderByDefault: true
|
|
}),
|
|
expandIcon: _reactutilities.slot.optional(props.expandIcon, {
|
|
renderByDefault: true,
|
|
defaultProps: {
|
|
'aria-disabled': disabled ? 'true' : undefined,
|
|
'aria-expanded': open,
|
|
role: 'button'
|
|
},
|
|
elementType: 'span'
|
|
}),
|
|
showClearIcon,
|
|
activeDescendantController,
|
|
...baseState
|
|
};
|
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
(0, _reactutilities.useOnClickOutside)({
|
|
element: targetDocument,
|
|
callback: (event)=>setOpen(event, false),
|
|
refs: [
|
|
triggerRef,
|
|
comboboxPopupRef,
|
|
comboboxTargetRef
|
|
],
|
|
disabled: !open
|
|
});
|
|
/* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
|
|
const onExpandIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconMouseDown, (event)=>{
|
|
var _triggerRef_current;
|
|
event.preventDefault();
|
|
state.setOpen(event, !state.open);
|
|
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
}));
|
|
if (state.expandIcon) {
|
|
state.expandIcon.onMouseDown = onExpandIconMouseDown;
|
|
// If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
|
|
// using the following steps:
|
|
// 1. If there is an aria-label, it is "Open [aria-label]"
|
|
// 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
|
|
// 3. If there is no aria-label/ledby attr, it falls back to "Open"
|
|
// We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
|
|
const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];
|
|
const defaultOpenString = 'Open'; // this is english-only since it is the fallback
|
|
if (!hasExpandLabel) {
|
|
if (props['aria-labelledby']) {
|
|
var _state_expandIcon_id;
|
|
const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;
|
|
const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
|
|
state.expandIcon['aria-label'] = defaultOpenString;
|
|
state.expandIcon.id = chevronId;
|
|
state.expandIcon['aria-labelledby'] = chevronLabelledBy;
|
|
} else if (props['aria-label']) {
|
|
state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;
|
|
} else {
|
|
state.expandIcon['aria-label'] = defaultOpenString;
|
|
}
|
|
}
|
|
}
|
|
const onClearIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{
|
|
ev.preventDefault();
|
|
}));
|
|
const onClearIconClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{
|
|
clearSelection(ev);
|
|
}));
|
|
if (state.clearIcon) {
|
|
state.clearIcon.onMouseDown = onClearIconMouseDown;
|
|
state.clearIcon.onClick = onClearIconClick;
|
|
}
|
|
// Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
|
|
if (multiselect) {
|
|
state.clearIcon = undefined;
|
|
}
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks -- "process.env" does not change in runtime
|
|
_react.useEffect(()=>{
|
|
if (clearable && multiselect) {
|
|
// eslint-disable-next-line no-console
|
|
console.error(`[@fluentui/react-combobox] "clearable" prop is not supported in multiselect mode.`);
|
|
}
|
|
}, [
|
|
clearable,
|
|
multiselect
|
|
]);
|
|
}
|
|
return state;
|
|
};
|
|
const useCombobox_unstable = (props, ref)=>{
|
|
'use no memo';
|
|
const { appearance = 'outline', size = 'medium', ...baseProps } = props;
|
|
const baseState = useComboboxBase_unstable(baseProps, ref);
|
|
if (baseState.clearIcon) {
|
|
var _baseState_clearIcon;
|
|
var _children;
|
|
(_children = (_baseState_clearIcon = baseState.clearIcon).children) !== null && _children !== void 0 ? _children : _baseState_clearIcon.children = /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null);
|
|
}
|
|
if (baseState.expandIcon) {
|
|
var _baseState_expandIcon;
|
|
var _children1;
|
|
(_children1 = (_baseState_expandIcon = baseState.expandIcon).children) !== null && _children1 !== void 0 ? _children1 : _baseState_expandIcon.children = /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null);
|
|
}
|
|
return {
|
|
...baseState,
|
|
appearance,
|
|
size
|
|
};
|
|
};
|