@yamada-ui/autocomplete
Version:
Yamada UI autocomplete component
92 lines (90 loc) • 2.52 kB
JavaScript
"use client"
import {
useAutocompleteContext,
useAutocompleteDescendantsContext
} from "./chunk-X5V76SN2.mjs";
// src/use-autocomplete-option-group.ts
import { layoutStyleProperties } from "@yamada-ui/core";
import { isArray, mergeRefs, splitObject } from "@yamada-ui/utils";
import { useCallback, useId, useRef } from "react";
var useAutocompleteOptionGroup = ({
label,
...rest
}) => {
const { omitSelectedValues, value } = useAutocompleteContext();
const descendants = useAutocompleteDescendantsContext();
const labelRef = useRef(null);
const labelId = useId();
const values = descendants.values();
const multi = isArray(value);
const selectedValues = multi && omitSelectedValues ? descendants.values(
({ node }) => {
var _a;
return value.includes((_a = node.dataset.value) != null ? _a : "");
}
) : [];
const selectedIndexes = selectedValues.map(({ index }) => index);
const childValues = values.filter(
({ index, node }) => {
var _a;
return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
}
);
const empty = !childValues.length;
const [containerProps, groupProps] = splitObject(rest, layoutStyleProperties);
const getContainerProps = useCallback(
(props = {}, ref = null) => {
var _a;
const style = {
border: "0px",
clip: "rect(0px, 0px, 0px, 0px)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: "0px",
position: "absolute",
whiteSpace: "nowrap",
width: "1px"
};
return {
ref,
"aria-labelledby": (_a = labelRef.current) == null ? void 0 : _a.id,
role: "group",
...props,
...containerProps,
style: empty ? style : void 0
};
},
[containerProps, empty]
);
const getLabelProps = useCallback(
({ id, ...props } = {}, ref = null) => {
return {
id: id != null ? id : labelId,
ref: mergeRefs(ref, labelRef),
role: "presentation",
...props
};
},
[labelId]
);
const getGroupProps = useCallback(
(props = {}, ref = null) => ({
ref,
...props,
...groupProps,
"data-label": label
}),
[groupProps, label]
);
return {
label,
getContainerProps,
getGroupProps,
getLabelProps
};
};
export {
useAutocompleteOptionGroup
};
//# sourceMappingURL=chunk-W7RGP3HL.mjs.map