@ariakit/react-core
Version:
Ariakit React core
263 lines (237 loc) • 8.99 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true});
var _YRMXINGZcjs = require('../__chunks/YRMXINGZ.cjs');
var _4R2KFV2Fcjs = require('../__chunks/4R2KFV2F.cjs');
require('../__chunks/KQX7GMU6.cjs');
var _QYV7ZYAGcjs = require('../__chunks/QYV7ZYAG.cjs');
var _A56OFCFAcjs = require('../__chunks/A56OFCFA.cjs');
require('../__chunks/XQNVUUCM.cjs');
require('../__chunks/BLY6TLX4.cjs');
require('../__chunks/HW4NUUUP.cjs');
require('../__chunks/MIBORXQW.cjs');
require('../__chunks/ZVJRPAXY.cjs');
require('../__chunks/YDPERDKF.cjs');
require('../__chunks/KVXNVDJK.cjs');
require('../__chunks/D6FV6EYS.cjs');
require('../__chunks/F4ZQFU26.cjs');
require('../__chunks/DHAXJ5PA.cjs');
require('../__chunks/YUGKYIYY.cjs');
require('../__chunks/T3QB4FR3.cjs');
require('../__chunks/6HKL3JR2.cjs');
var _WULEED4Qcjs = require('../__chunks/WULEED4Q.cjs');
var _OZM4QA2Vcjs = require('../__chunks/OZM4QA2V.cjs');
require('../__chunks/FDRJDQ5Y.cjs');
var _7EQBAZ46cjs = require('../__chunks/7EQBAZ46.cjs');
// src/select/select.tsx
var _array = require('@ariakit/core/utils/array');
var _dom = require('@ariakit/core/utils/dom');
var _events = require('@ariakit/core/utils/events');
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "button";
function getSelectedValues(select) {
return Array.from(select.selectedOptions).map((option) => option.value);
}
function nextWithValue(store, next) {
return () => {
const nextId = next();
if (!nextId) return;
let i = 0;
let nextItem = store.item(nextId);
const firstItem = nextItem;
while (nextItem && nextItem.value == null) {
const nextId2 = next(++i);
if (!nextId2) return;
nextItem = store.item(nextId2);
if (nextItem === firstItem) break;
}
return nextItem == null ? void 0 : nextItem.id;
};
}
var useSelect = _WULEED4Qcjs.createHook.call(void 0, function useSelect2(_a) {
var _b = _a, {
store,
name,
form,
required,
showOnKeyDown = true,
moveOnKeyDown = true,
toggleOnPress = true,
toggleOnClick = toggleOnPress
} = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
"store",
"name",
"form",
"required",
"showOnKeyDown",
"moveOnKeyDown",
"toggleOnPress",
"toggleOnClick"
]);
const context = _4R2KFV2Fcjs.useSelectProviderContext.call(void 0, );
store = store || context;
_misc.invariant.call(void 0,
store,
process.env.NODE_ENV !== "production" && "Select must receive a `store` prop or be wrapped in a SelectProvider component."
);
const onKeyDownProp = props.onKeyDown;
const showOnKeyDownProp = _OZM4QA2Vcjs.useBooleanEvent.call(void 0, showOnKeyDown);
const moveOnKeyDownProp = _OZM4QA2Vcjs.useBooleanEvent.call(void 0, moveOnKeyDown);
const placement = store.useState("placement");
const dir = placement.split("-")[0];
const value = store.useState("value");
const multiSelectable = Array.isArray(value);
const onKeyDown = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
var _a2;
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented) return;
if (!store) return;
const { orientation, items: items2, activeId } = store.getState();
const isVertical = orientation !== "horizontal";
const isHorizontal = orientation !== "vertical";
const isGrid = !!((_a2 = items2.find((item) => !item.disabled && item.value != null)) == null ? void 0 : _a2.rowId);
const moveKeyMap = {
ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up),
ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next),
ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down),
ArrowLeft: (isGrid || isHorizontal) && nextWithValue(store, store.previous)
};
const getId = moveKeyMap[event.key];
if (getId && moveOnKeyDownProp(event)) {
event.preventDefault();
store.move(getId());
}
const isTopOrBottom = dir === "top" || dir === "bottom";
const isLeft = dir === "left";
const isRight = dir === "right";
const canShowKeyMap = {
ArrowDown: isTopOrBottom,
ArrowUp: isTopOrBottom,
ArrowLeft: isLeft,
ArrowRight: isRight
};
const canShow = canShowKeyMap[event.key];
if (canShow && showOnKeyDownProp(event)) {
event.preventDefault();
store.move(activeId);
_events.queueBeforeEvent.call(void 0, event.currentTarget, "keyup", store.show);
}
});
props = _OZM4QA2Vcjs.useWrapElement.call(void 0,
props,
(element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4R2KFV2Fcjs.SelectScopedContextProvider, { value: store, children: element }),
[store]
);
const [autofill, setAutofill] = _react.useState.call(void 0, false);
const nativeSelectChangedRef = _react.useRef.call(void 0, false);
_react.useEffect.call(void 0, () => {
const nativeSelectChanged = nativeSelectChangedRef.current;
nativeSelectChangedRef.current = false;
if (nativeSelectChanged) return;
setAutofill(false);
}, [value]);
const labelId = store.useState((state) => {
var _a2;
return (_a2 = state.labelElement) == null ? void 0 : _a2.id;
});
const label = props["aria-label"];
const labelledBy = props["aria-labelledby"] || labelId;
const items = store.useState((state) => {
if (!name) return;
return state.items;
});
const values = _react.useMemo.call(void 0, () => {
return [...new Set(items == null ? void 0 : items.map((i) => i.value).filter((v) => v != null))];
}, [items]);
props = _OZM4QA2Vcjs.useWrapElement.call(void 0,
props,
(element) => {
if (!name) return element;
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"select",
{
style: {
border: 0,
clip: "rect(0 0 0 0)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: 0,
position: "absolute",
whiteSpace: "nowrap",
width: "1px"
},
tabIndex: -1,
"aria-hidden": true,
"aria-label": label,
"aria-labelledby": labelledBy,
name,
form,
required,
disabled: props.disabled,
value,
multiple: multiSelectable,
onFocus: () => {
var _a2;
return (_a2 = store == null ? void 0 : store.getState().selectElement) == null ? void 0 : _a2.focus();
},
onChange: (event) => {
nativeSelectChangedRef.current = true;
setAutofill(true);
store == null ? void 0 : store.setValue(
multiSelectable ? getSelectedValues(event.target) : event.target.value
);
},
children: [
_array.toArray.call(void 0, value).map((value2) => {
if (value2 == null) return null;
if (values.includes(value2)) return null;
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: value2, children: value2 }, value2);
}),
values.map((value2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: value2, children: value2 }, value2))
]
}
),
element
] });
},
[
store,
label,
labelledBy,
name,
form,
required,
value,
multiSelectable,
values,
props.disabled
]
);
const children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
value,
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _YRMXINGZcjs.SelectArrow, {})
] });
const contentElement = store.useState("contentElement");
props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
role: "combobox",
"aria-autocomplete": "none",
"aria-labelledby": labelId,
"aria-haspopup": _dom.getPopupRole.call(void 0, contentElement, "listbox"),
"data-autofill": autofill || void 0,
"data-name": name,
children
}, props), {
ref: _OZM4QA2Vcjs.useMergeRefs.call(void 0, store.setSelectElement, props.ref),
onKeyDown
});
props = _A56OFCFAcjs.usePopoverDisclosure.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store, toggleOnClick }, props));
props = _QYV7ZYAGcjs.useCompositeTypeahead.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props));
return props;
});
var Select = _WULEED4Qcjs.forwardRef.call(void 0, function Select2(props) {
const htmlProps = useSelect(props);
return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps);
});
exports.Select = Select; exports.useSelect = useSelect;