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

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

"use client";


import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { listStyle } from "./list.style.js";
import { cloneElement, isValidElement, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/list/list.tsx
const { PropsContext: ListPropsContext, usePropsContext: useListPropsContext, withContext, withProvider } = createSlotComponent("list", listStyle);
/**
* `List` is a component for displaying lists. By default, it renders a `ul` element.
*
* @see https://yamada-ui.com/docs/components/list
*/
const ListRoot = withProvider(({ as: asProp, children, items, stylePosition: listStylePosition, styleType: listStyleType = "none",...rest }) => {
	const as = asProp ?? (listStyleType == "decimal" ? "ol" : void 0);
	const computedChildren = useMemo(() => {
		if (children) return children;
		return items?.map((props, index) => /* @__PURE__ */ jsx(ListItem, { ...props }, index));
	}, [children, items]);
	return /* @__PURE__ */ jsx(styled.ul, {
		as,
		listStylePosition,
		listStyleType,
		role: "list",
		...rest,
		children: computedChildren
	});
}, "root", { transferProps: ["styleType"] })();
const ListItem = withContext(({ children, icon,...rest }) => /* @__PURE__ */ jsxs(styled.li, {
	...rest,
	children: [/* @__PURE__ */ jsx(ListItemIcon, { children: icon }), children]
}), "item")();
const ListItemIcon = withContext(({ children,...rest }) => {
	if (isValidElement(children)) return cloneElement(children, {
		...children.props,
		...rest,
		role: "presentation"
	});
	else return null;
}, "icon")({ "data-list-icon": "" });

//#endregion
export { ListItem, ListItemIcon, ListPropsContext, ListRoot, useListPropsContext };
//# sourceMappingURL=list.js.map