@yamada-ui/autocomplete
Version:
Yamada UI autocomplete component
185 lines (181 loc) • 6.09 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/autocomplete-option-group.tsx
var autocomplete_option_group_exports = {};
__export(autocomplete_option_group_exports, {
AutocompleteOptionGroup: () => AutocompleteOptionGroup
});
module.exports = __toCommonJS(autocomplete_option_group_exports);
var import_core2 = require("@yamada-ui/core");
var import_utils3 = require("@yamada-ui/utils");
// src/autocomplete-context.ts
var import_use_descendant = require("@yamada-ui/use-descendant");
var import_utils = require("@yamada-ui/utils");
var {
DescendantsContextProvider: AutocompleteDescendantsContextProvider,
useDescendant: useAutocompleteDescendant,
useDescendants: useAutocompleteDescendants,
useDescendantsContext: useAutocompleteDescendantsContext
} = (0, import_use_descendant.createDescendant)();
var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
name: "AutocompleteContext",
errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
});
// src/use-autocomplete-option-group.ts
var import_core = require("@yamada-ui/core");
var import_utils2 = require("@yamada-ui/utils");
var import_react = require("react");
var useAutocompleteOptionGroup = ({
label,
...rest
}) => {
const { omitSelectedValues, value } = useAutocompleteContext();
const descendants = useAutocompleteDescendantsContext();
const labelRef = (0, import_react.useRef)(null);
const labelId = (0, import_react.useId)();
const values = descendants.values();
const multi = (0, import_utils2.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] = (0, import_utils2.splitObject)(rest, import_core.layoutStyleProperties);
const getContainerProps = (0, import_react.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 = (0, import_react.useCallback)(
({ id, ...props } = {}, ref = null) => {
return {
id: id != null ? id : labelId,
ref: (0, import_utils2.mergeRefs)(ref, labelRef),
role: "presentation",
...props
};
},
[labelId]
);
const getGroupProps = (0, import_react.useCallback)(
(props = {}, ref = null) => ({
ref,
...props,
...groupProps,
"data-label": label
}),
[groupProps, label]
);
return {
label,
getContainerProps,
getGroupProps,
getLabelProps
};
};
// src/autocomplete-option-group.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var AutocompleteOptionGroup = (0, import_core2.forwardRef)(
({
className,
children,
color,
h,
height = h,
minH,
minHeight = minH,
labelProps,
...rest
}, ref) => {
const { styles } = useAutocompleteContext();
const { label, getContainerProps, getGroupProps, getLabelProps } = useAutocompleteOptionGroup(rest);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_core2.ui.section,
{
className: (0, import_utils3.cx)(
"ui-autocomplete__item",
"ui-autocomplete__item--group",
className
),
__css: { color, h: "fit-content", w: "100%" },
...getContainerProps(),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core2.ui.header,
{
className: "ui-autocomplete__item__group-label",
lineClamp: 1,
__css: styles.groupLabel,
...getLabelProps(labelProps),
children: label
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core2.ui.div,
{
...getGroupProps({}, ref),
className: "ui-autocomplete__item__group",
height,
minHeight,
__css: styles.group,
children
}
)
]
}
);
}
);
AutocompleteOptionGroup.displayName = "AutocompleteOptionGroup";
AutocompleteOptionGroup.__ui__ = "AutocompleteOptionGroup";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AutocompleteOptionGroup
});
//# sourceMappingURL=autocomplete-option-group.js.map