braid-design-system/dist/lib/components/Column/Column.mjs

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import { useContext } from "react";
import { alignToFlexAlign } from "../../utils/align.mjs";
import { optimizeResponsiveArray } from "../../utils/optimizeResponsiveArray.mjs";
import { resolveResponsiveRangeProps } from "../../utils/resolveResponsiveRangeProps.mjs";
import { Box } from "../Box/Box.mjs";
import { ColumnsContext } from "../Columns/ColumnsContext.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { noSpaceBeforeFirstWhenCollapsed, width } from "./Column.css.mjs";
import { normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
const componentForParent = (columnComponent) => {
  if (columnComponent === "span") {
    return "span";
  }
  if (columnComponent === "ol" || columnComponent === "ul") {
    return "li";
  }
  return "div";
};
const Column = ({
  component,
  children,
  data,
  width: width$1,
  hideBelow,
  hideAbove,
  ...restProps
}) => {
  const {
    collapseMobile,
    collapseTablet,
    collapseDesktop,
    mobileSpace,
    tabletSpace,
    desktopSpace,
    wideSpace,
    align,
    component: columnsComponent
  } = useContext(ColumnsContext);
  const [hideOnMobile, hideOnTablet, hideOnDesktop, hideOnWide] = resolveResponsiveRangeProps({
    below: hideBelow,
    above: hideAbove
  });
  const collapsible = collapseMobile || collapseTablet || collapseDesktop;
  const normalizedAlign = normalizeResponsiveValue(
    alignToFlexAlign(align) || "flexStart"
  );
  const {
    mobile: justifyContentMobile = "flexStart",
    tablet: justifyContentTablet = justifyContentMobile,
    desktop: justifyContentDesktop = justifyContentTablet
  } = normalizedAlign;
  const collapseToFlexContainer = {
    mobile: collapseMobile && justifyContentMobile !== "flexStart",
    tablet: collapseTablet && justifyContentTablet !== "flexStart",
    desktop: collapseDesktop && justifyContentDesktop !== "flexStart"
  };
  const display = {
    mobile: collapseToFlexContainer.mobile ? "flex" : "block",
    tablet: collapseToFlexContainer.tablet ? "flex" : "block",
    desktop: collapseToFlexContainer.desktop ? "flex" : "block",
    wide: "block"
  };
  return /* @__PURE__ */ jsx(
    Box,
    {
      component: component || componentForParent(columnsComponent),
      display: optimizeResponsiveArray([
        hideOnMobile ? "none" : display.mobile,
        hideOnTablet ? "none" : display.tablet,
        hideOnDesktop ? "none" : display.desktop,
        hideOnWide ? "none" : display.wide
      ]),
      minWidth: 0,
      width: width$1 !== "content" ? "full" : void 0,
      flexShrink: width$1 ? 0 : void 0,
      flexGrow: width$1 ? 0 : 1,
      className: [
        collapsible ? noSpaceBeforeFirstWhenCollapsed : null,
        width$1 !== "content" ? width[width$1] : null
      ],
      paddingLeft: optimizeResponsiveArray([
        collapseMobile ? "none" : mobileSpace,
        collapseTablet ? "none" : tabletSpace,
        collapseDesktop ? "none" : desktopSpace,
        wideSpace
      ]),
      paddingTop: collapsible ? optimizeResponsiveArray([
        collapseMobile ? mobileSpace : "none",
        collapseTablet ? tabletSpace : "none",
        collapseDesktop ? desktopSpace : "none",
        "none"
      ]) : void 0,
      justifyContent: collapsible ? optimizeResponsiveArray([
        collapseToFlexContainer.mobile ? justifyContentMobile : null,
        collapseToFlexContainer.tablet ? justifyContentTablet : null,
        collapseToFlexContainer.desktop ? justifyContentDesktop : null,
        null
      ]) : void 0,
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children
    }
  );
};
export {
  Column
};