@ariakit/react-core
Version:
Ariakit React core
208 lines (205 loc) • 6.67 kB
JavaScript
"use client";
import {
useCompositeHover
} from "./IABE5EV2.js";
import {
useCompositeItem
} from "./SBSPVDDI.js";
import {
ComboboxItemCheckedContext,
ComboboxItemValueContext,
ComboboxListRoleContext,
useComboboxScopedContext
} from "./OLVWQA7U.js";
import {
useStoreStateObject
} from "./RTNCFSKZ.js";
import {
createElement,
createHook,
forwardRef,
memo
} from "./VOQWLFSQ.js";
import {
useBooleanEvent,
useEvent,
useWrapElement
} from "./5GGHRIN3.js";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./3YLGPPWQ.js";
// src/combobox/combobox-item.tsx
import { isTextField } from "@ariakit/core/utils/dom";
import { isDownloading, isOpeningInNewTab } from "@ariakit/core/utils/events";
import { hasFocus } from "@ariakit/core/utils/focus";
import { invariant } from "@ariakit/core/utils/misc";
import { useCallback, useContext } from "react";
import { jsx } from "react/jsx-runtime";
var TagName = "div";
function isSelected(storeValue, itemValue) {
if (itemValue == null) return;
if (storeValue == null) return false;
if (Array.isArray(storeValue)) {
return storeValue.includes(itemValue);
}
return storeValue === itemValue;
}
function getItemRole(popupRole) {
var _a;
const itemRoleByPopupRole = {
menu: "menuitem",
listbox: "option",
tree: "treeitem"
};
const key = popupRole;
return (_a = itemRoleByPopupRole[key]) != null ? _a : "option";
}
var useComboboxItem = createHook(
function useComboboxItem2(_a) {
var _b = _a, {
store,
value,
hideOnClick,
setValueOnClick,
selectValueOnClick = true,
resetValueOnSelect,
focusOnHover = false,
moveOnKeyPress = true,
getItem: getItemProp
} = _b, props = __objRest(_b, [
"store",
"value",
"hideOnClick",
"setValueOnClick",
"selectValueOnClick",
"resetValueOnSelect",
"focusOnHover",
"moveOnKeyPress",
"getItem"
]);
var _a2;
const context = useComboboxScopedContext();
store = store || context;
invariant(
store,
process.env.NODE_ENV !== "production" && "ComboboxItem must be wrapped in a ComboboxList or ComboboxPopover component."
);
const { resetValueOnSelectState, multiSelectable, selected } = useStoreStateObject(store, {
resetValueOnSelectState: "resetValueOnSelect",
multiSelectable(state) {
return Array.isArray(state.selectedValue);
},
selected(state) {
return isSelected(state.selectedValue, value);
}
});
const getItem = useCallback(
(item) => {
const nextItem = __spreadProps(__spreadValues({}, item), { value });
if (getItemProp) {
return getItemProp(nextItem);
}
return nextItem;
},
[value, getItemProp]
);
setValueOnClick = setValueOnClick != null ? setValueOnClick : !multiSelectable;
hideOnClick = hideOnClick != null ? hideOnClick : value != null && !multiSelectable;
const onClickProp = props.onClick;
const setValueOnClickProp = useBooleanEvent(setValueOnClick);
const selectValueOnClickProp = useBooleanEvent(selectValueOnClick);
const resetValueOnSelectProp = useBooleanEvent(
(_a2 = resetValueOnSelect != null ? resetValueOnSelect : resetValueOnSelectState) != null ? _a2 : multiSelectable
);
const hideOnClickProp = useBooleanEvent(hideOnClick);
const onClick = useEvent((event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented) return;
if (isDownloading(event)) return;
if (isOpeningInNewTab(event)) return;
if (value != null) {
if (selectValueOnClickProp(event)) {
if (resetValueOnSelectProp(event)) {
store == null ? void 0 : store.resetValue();
}
store == null ? void 0 : store.setSelectedValue((prevValue) => {
if (!Array.isArray(prevValue)) return value;
if (prevValue.includes(value)) {
return prevValue.filter((v) => v !== value);
}
return [...prevValue, value];
});
}
if (setValueOnClickProp(event)) {
store == null ? void 0 : store.setValue(value);
}
}
if (hideOnClickProp(event)) {
store == null ? void 0 : store.hide();
}
});
const onKeyDownProp = props.onKeyDown;
const onKeyDown = useEvent((event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented) return;
const baseElement = store == null ? void 0 : store.getState().baseElement;
if (!baseElement) return;
if (hasFocus(baseElement)) return;
const printable = event.key.length === 1;
if (printable || event.key === "Backspace" || event.key === "Delete") {
queueMicrotask(() => baseElement.focus());
if (isTextField(baseElement)) {
store == null ? void 0 : store.setValue(baseElement.value);
}
}
});
if (multiSelectable && selected != null) {
props = __spreadValues({
"aria-selected": selected
}, props);
}
props = useWrapElement(
props,
(element) => /* @__PURE__ */ jsx(ComboboxItemValueContext.Provider, { value, children: /* @__PURE__ */ jsx(ComboboxItemCheckedContext.Provider, { value: selected != null ? selected : false, children: element }) }),
[value, selected]
);
const popupRole = useContext(ComboboxListRoleContext);
props = __spreadProps(__spreadValues({
role: getItemRole(popupRole),
children: value
}, props), {
onClick,
onKeyDown
});
const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
props = useCompositeItem(__spreadProps(__spreadValues({
store
}, props), {
getItem,
// Dispatch a custom event on the combobox input when moving to an item
// with the keyboard so the Combobox component can enable inline
// autocompletion.
moveOnKeyPress: (event) => {
if (!moveOnKeyPressProp(event)) return false;
const moveEvent = new Event("combobox-item-move");
const baseElement = store == null ? void 0 : store.getState().baseElement;
baseElement == null ? void 0 : baseElement.dispatchEvent(moveEvent);
return true;
}
}));
props = useCompositeHover(__spreadValues({ store, focusOnHover }, props));
return props;
}
);
var ComboboxItem = memo(
forwardRef(function ComboboxItem2(props) {
const htmlProps = useComboboxItem(props);
return createElement(TagName, htmlProps);
})
);
export {
useComboboxItem,
ComboboxItem
};