@carbon/react
Version:
React components for the Carbon Design System
219 lines (217 loc) • 7.27 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_GridContext = require("./GridContext.js");
let _carbon_feature_flags = require("@carbon/feature-flags");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/Grid/Column.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 Column = react.default.forwardRef(({ as, children, className: customClassName, sm, md, lg, xlg, max, ...rest }, ref) => {
const { mode } = require_GridContext.useGridSettings();
const prefix = require_usePrefix.usePrefix();
const BaseComponent = as || "div";
if (mode === "css-grid") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CSSGridColumn, {
as: BaseComponent,
className: customClassName,
sm,
md,
ref,
lg,
xlg,
max,
...rest,
children
});
const columnClassName = getClassNameForFlexGridBreakpoints([
sm,
md,
lg,
xlg,
max
], prefix);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseComponent, {
className: (0, classnames.default)(customClassName, columnClassName, { [`${prefix}--col`]: columnClassName.length === 0 }),
ref,
...rest,
children
});
});
const percentSpanType = prop_types.default.oneOf([
"25%",
"50%",
"75%",
"100%"
]);
const spanPropType = (0, _carbon_feature_flags.enabled)("enable-css-grid") ? prop_types.default.oneOfType([
prop_types.default.bool,
prop_types.default.number,
prop_types.default.shape({
span: prop_types.default.oneOfType([prop_types.default.number, percentSpanType]),
offset: prop_types.default.number,
start: prop_types.default.number,
end: prop_types.default.number
}),
percentSpanType
]) : prop_types.default.oneOfType([
prop_types.default.bool,
prop_types.default.number,
prop_types.default.shape({
span: prop_types.default.number,
offset: prop_types.default.number
})
]);
Column.propTypes = {
as: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
children: prop_types.default.node,
className: prop_types.default.string,
lg: spanPropType,
max: spanPropType,
md: spanPropType,
sm: spanPropType,
span: prop_types.default.oneOfType([prop_types.default.number, percentSpanType]),
xlg: spanPropType
};
const CSSGridColumn = react.default.forwardRef(({ as: BaseComponent = "div", children, className: containerClassName, sm, md, lg, xlg, max, span, ...rest }, ref) => {
const prefix = require_usePrefix.usePrefix();
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseComponent, {
className: (0, classnames.default)(containerClassName, getClassNameForBreakpoints([
sm,
md,
lg,
xlg,
max
], prefix), getClassNameForSpan(span, prefix), { [`${prefix}--css-grid-column`]: true }),
ref,
...rest,
children
});
});
CSSGridColumn.propTypes = {
as: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
children: prop_types.default.node,
className: prop_types.default.string,
lg: spanPropType,
max: spanPropType,
md: spanPropType,
sm: spanPropType,
span: prop_types.default.oneOfType([
prop_types.default.number,
percentSpanType,
prop_types.default.shape({
span: prop_types.default.oneOfType([prop_types.default.number, percentSpanType]),
start: prop_types.default.number,
end: prop_types.default.number
})
]),
xlg: spanPropType
};
const breakpointNames = [
"sm",
"md",
"lg",
"xlg",
"max"
];
/**
* @typedef {object} Breakpoint
* @property {boolean|number} [span]
* @property {number} [offset]
*/
/**
* Build the appropriate className for the given set of breakpoints.
* @param {Array<boolean|number|Breakpoint>} breakpoints
* @returns {string}
*/
function getClassNameForBreakpoints(breakpoints, prefix) {
const classNames = [];
for (let i = 0; i < breakpoints.length; i++) {
const breakpoint = breakpoints[i];
if (breakpoint === void 0 || breakpoint === null) continue;
const name = breakpointNames[i];
if (breakpoint === true) {
classNames.push(`${prefix}--${name}:col-span-auto`);
continue;
}
if (typeof breakpoint === "string") {
classNames.push(`${prefix}--${name}:col-span-${breakpoint.replace("%", "")}`);
continue;
}
if (typeof breakpoint === "number") {
classNames.push(`${prefix}--${name}:col-span-${breakpoint}`);
continue;
}
if (typeof breakpoint === "object") {
const { span, offset, start, end } = breakpoint;
if (typeof offset === "number") classNames.push(`${prefix}--${name}:col-start-${offset > 0 ? offset + 1 : "auto"}`);
if (typeof start === "number") classNames.push(`${prefix}--${name}:col-start-${start ? start : "auto"}`);
if (typeof end === "number") classNames.push(`${prefix}--${name}:col-end-${end}`);
if (typeof span === "number") classNames.push(`${prefix}--${name}:col-span-${span}`);
else if (typeof span === "string") {
classNames.push(`${prefix}--${name}:col-span-${span.slice(0, -1)}`);
continue;
}
}
}
return classNames.join(" ");
}
/**
* Build the appropriate className for the given set of breakpoints.
* @param {Array<boolean|number|Breakpoint>} breakpoints
* @returns {string}
*/
function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
const classNames = [];
for (let i = 0; i < breakpoints.length; i++) {
const breakpoint = breakpoints[i];
if (breakpoint === void 0 || breakpoint === null) continue;
const name = breakpointNames[i];
if (breakpoint === true) {
classNames.push(`${prefix}--col-${name}`);
continue;
}
if (typeof breakpoint === "number") {
classNames.push(`${prefix}--col-${name}-${breakpoint}`);
continue;
}
if (typeof breakpoint === "object") {
const { span, offset } = breakpoint;
if (typeof span === "number") classNames.push(`${prefix}--col-${name}-${span}`);
if (span === true) classNames.push(`${prefix}--col-${name}`);
if (typeof offset === "number") classNames.push(`${prefix}--offset-${name}-${offset}`);
}
}
return classNames.join(" ");
}
/**
* Build the appropriate className for a span value
*/
function getClassNameForSpan(value, prefix) {
const classNames = [];
if (typeof value === "number") classNames.push(`${prefix}--col-span-${value}`);
else if (typeof value === "string") classNames.push(`${prefix}--col-span-${value.slice(0, -1)}`);
else if (typeof value === "object") {
const { span, start, end } = value;
if (span !== void 0 && span !== null) classNames.push(`${prefix}--col-span-${span}`);
if (start !== void 0 && start !== null) classNames.push(`${prefix}--col-start-${start}`);
if (end !== void 0 && end !== null) classNames.push(`${prefix}--col-end-${end}`);
}
return classNames.join("");
}
//#endregion
exports.default = Column;