@carbon/react
Version:
React components for the Carbon Design System
99 lines (97 loc) • 2.8 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { GridSettings, useGridSettings } from "./GridContext.js";
import classNames from "classnames";
import React from "react";
import PropTypes from "prop-types";
import { jsx } from "react/jsx-runtime";
//#region src/components/Grid/CSSGrid.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const CSSGrid = React.forwardRef(({ align, as, children, className: customClassName, condensed = false, fullWidth = false, narrow = false, ...rest }, ref) => {
const prefix = usePrefix();
const { subgrid } = useGridSettings();
let mode = "wide";
if (narrow) mode = "narrow";
else if (condensed) mode = "condensed";
if (subgrid) return /* @__PURE__ */ jsx(GridSettings, {
mode: "css-grid",
subgrid: true,
children: /* @__PURE__ */ jsx(Subgrid, {
ref,
as,
className: customClassName,
mode,
...rest,
children
})
});
const className = classNames(customClassName, {
[`${prefix}--css-grid`]: true,
[`${prefix}--css-grid--condensed`]: mode === "condensed",
[`${prefix}--css-grid--narrow`]: mode === "narrow",
[`${prefix}--css-grid--full-width`]: fullWidth,
[`${prefix}--css-grid--start`]: align === "start",
[`${prefix}--css-grid--end`]: align === "end"
});
return /* @__PURE__ */ jsx(GridSettings, {
mode: "css-grid",
subgrid: true,
children: /* @__PURE__ */ jsx(as || "div", {
className,
ref,
...rest,
children
})
});
});
CSSGrid.propTypes = {
as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
align: PropTypes.oneOf([
"start",
"center",
"end"
]),
children: PropTypes.node,
className: PropTypes.string,
condensed: PropTypes.bool,
fullWidth: PropTypes.bool,
narrow: PropTypes.bool
};
const Subgrid = React.forwardRef(({ as, className: customClassName, children, mode, ...rest }, ref) => {
const prefix = usePrefix();
const className = classNames(customClassName, {
[`${prefix}--subgrid`]: true,
[`${prefix}--subgrid--condensed`]: mode === "condensed",
[`${prefix}--subgrid--narrow`]: mode === "narrow",
[`${prefix}--subgrid--wide`]: mode === "wide"
});
return /* @__PURE__ */ jsx(as || "div", {
...rest,
ref,
className,
children
});
});
Subgrid.propTypes = {
as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
children: PropTypes.node,
className: PropTypes.string,
mode: PropTypes.oneOf([
"wide",
"narrow",
"condensed"
])
};
const CSSGridComponent = CSSGrid;
//#endregion
export { CSSGridComponent };