@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
54 lines (50 loc) • 2.32 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_list_style = require('./list.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/list/list.tsx
const { PropsContext: ListPropsContext, usePropsContext: useListPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("list", require_list_style.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 = (0, react.useMemo)(() => {
if (children) return children;
return items?.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItem, { ...props }, index));
}, [children, items]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.ul, {
as,
listStylePosition,
listStyleType,
role: "list",
...rest,
children: computedChildren
});
}, "root", { transferProps: ["styleType"] })();
const ListItem = withContext(({ children, icon,...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.li, {
...rest,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemIcon, { children: icon }), children]
}), "item")();
const ListItemIcon = withContext(({ children,...rest }) => {
if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, {
...children.props,
...rest,
role: "presentation"
});
else return null;
}, "icon")({ "data-list-icon": "" });
//#endregion
exports.ListItem = ListItem;
exports.ListItemIcon = ListItemIcon;
exports.ListPropsContext = ListPropsContext;
exports.ListRoot = ListRoot;
exports.useListPropsContext = useListPropsContext;
//# sourceMappingURL=list.cjs.map