@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
33 lines (29 loc) • 1.22 kB
JavaScript
"use client";
import { utils_exports } from "../../utils/index.js";
import { createComponent } from "../../core/components/create-component.js";
import { useValue } from "../../hooks/use-value/index.js";
import { groupStyle } from "./group.style.js";
import { Flex } from "../flex/flex.js";
import { useGroup } from "./use-group.js";
//#region src/components/group/group.tsx
const { PropsContext: GroupPropsContext, usePropsContext: useGroupPropsContext, withContext } = createComponent("group", groupStyle);
/**
* `Group` is a component that groups and attaches multiple elements together.
*
* @see https://yamada-ui.com/docs/components/group
*/
const Group = withContext(Flex, { transferProps: ["attached", "orientation"] })(void 0, ({ attached: attachedProp, children, orientation: orientationProp,...rest }) => {
const orientation = useValue(orientationProp);
const attached = useValue(attachedProp);
const cloneChildren = useGroup(children);
return {
"data-attached": (0, utils_exports.dataAttr)(attached),
"data-orientation": orientation,
children: cloneChildren,
role: "group",
...rest
};
});
//#endregion
export { Group, GroupPropsContext, useGroupPropsContext };
//# sourceMappingURL=group.js.map