@yamada-ui/react/dist/esm/components/data-list/data-list.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { getValidChildren, omitChildren, pickChildren } from "../../utils/children.js";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { dataListStyle } from "./data-list.style.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/data-list/data-list.tsx
const { ComponentContext, PropsContext: DataListPropsContext, useComponentContext, usePropsContext: useDataListPropsContext, withContext, withProvider } = createSlotComponent("data-list", dataListStyle);
/**
* `DataList` is used to display a list of data items.
*
* @see https://yamada-ui.com/docs/components/data-list
*/
const DataListRoot = withProvider(({ style, children, items = [], descriptionProps, termProps,...rest }) => {
	const col = useMemo(() => {
		let col$1 = 0;
		if (children) pickChildren(getValidChildren(children), DataListItem).forEach(({ props }) => {
			const pickedChildren = pickChildren(getValidChildren(props.children), DataListTerm, DataListDescription);
			col$1 = Math.max(col$1, pickedChildren.length);
		});
		else items.forEach(({ description, term }) => {
			const termCount = !term ? 0 : (0, utils_exports.isArray)(term) ? term.length : 1;
			const descriptionCount = !description ? 0 : (0, utils_exports.isArray)(description) ? description.length : 1;
			col$1 = Math.max(col$1, termCount + descriptionCount);
		});
		return col$1;
	}, [children, items]);
	const computedChildren = useMemo(() => items.map((props, index) => /* @__PURE__ */ jsx(DataListItem, { ...props }, index)), [items]);
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: useMemo(() => ({
			descriptionProps,
			termProps
		}), [descriptionProps, termProps]),
		children: /* @__PURE__ */ jsx(styled.dl, {
			style: {
				"--col": col,
				...style
			},
			...rest,
			children: children ?? computedChildren
		})
	});
}, "root")();
const DataListItem = withContext(({ children, description, term, descriptionProps: customDescriptionProps, termProps: customTermProps,...rest }) => {
	const { descriptionProps, termProps } = useComponentContext();
	const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {
		const validChildren = getValidChildren(children);
		if ((0, utils_exports.isEmpty)(validChildren)) return [children];
		const customTerms$1 = pickChildren(validChildren, DataListTerm);
		const customDescriptions$1 = pickChildren(validChildren, DataListDescription);
		return [
			omitChildren(validChildren, DataListTerm, DataListDescription),
			customTerms$1,
			customDescriptions$1
		];
	}, [children]);
	return /* @__PURE__ */ jsxs(styled.div, {
		...rest,
		children: [
			!(0, utils_exports.isEmpty)(customTerms) ? customTerms : (0, utils_exports.isArray)(term) ? term.map((item, index) => /* @__PURE__ */ jsx(DataListTerm, {
				...termProps,
				...customTermProps,
				children: item
			}, index)) : /* @__PURE__ */ jsx(DataListTerm, {
				...termProps,
				...customTermProps,
				children: term
			}),
			!(0, utils_exports.isEmpty)(customDescriptions) ? customDescriptions : (0, utils_exports.isArray)(description) ? description.map((item, index) => /* @__PURE__ */ jsx(DataListDescription, {
				...descriptionProps,
				...customDescriptionProps,
				children: item
			}, index)) : /* @__PURE__ */ jsx(DataListDescription, {
				...descriptionProps,
				...customDescriptionProps,
				children: description
			}),
			omittedChildren
		]
	});
}, "item")();
const DataListTerm = withContext("dt", "term")();
const DataListDescription = withContext("dd", "description")();

//#endregion
export { DataListDescription, DataListItem, DataListPropsContext, DataListRoot, DataListTerm, useDataListPropsContext };
//# sourceMappingURL=data-list.js.map