braid-design-system/dist/lib/utils/collapsibleAlignmentProps.cjs

Themeable design system for the SEEK Group

"use strict";
const lib_utils_align_cjs = require("./align.cjs");
const lib_utils_optimizeResponsiveArray_cjs = require("./optimizeResponsiveArray.cjs");
const lib_utils_resolveResponsiveRangeProps_cjs = require("./resolveResponsiveRangeProps.cjs");
const lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
function invertAlignment(alignment) {
  if (alignment === "flexStart") {
    return "flexEnd";
  }
  if (alignment === "flexEnd") {
    return "flexStart";
  }
  return alignment;
}
function resolveCollapsibleAlignmentProps({
  align,
  alignY,
  collapseBelow,
  reverse,
  inlineItems = false
}) {
  const [collapseMobile, collapseTablet, collapseDesktop] = lib_utils_resolveResponsiveRangeProps_cjs.resolveResponsiveRangeProps({
    below: collapseBelow
  });
  const defaultAlignItems = inlineItems ? "flexStart" : void 0;
  const rowDirection = collapseBelow && reverse ? "rowReverse" : "row";
  const flexDirection = [
    collapseMobile ? "column" : "row",
    collapseTablet ? "column" : rowDirection,
    collapseDesktop ? "column" : rowDirection,
    rowDirection
  ];
  const nonCollapsedAlignItems = lib_utils_align_cjs.alignYToFlexAlign(alignY) || defaultAlignItems;
  const normalizedAlignY = lib_css_atoms_sprinkles_css_cjs.normalizeResponsiveValue(
    nonCollapsedAlignItems || {}
  );
  const {
    mobile: alignYMobile = defaultAlignItems || null,
    tablet: alignYTablet = alignYMobile,
    desktop: alignYDesktop = alignYTablet,
    wide: alignYWide = alignYDesktop
  } = normalizedAlignY;
  const normalizedAlign = lib_css_atoms_sprinkles_css_cjs.normalizeResponsiveValue(
    lib_utils_align_cjs.alignToFlexAlign(align) || "flexStart"
  );
  const {
    mobile: alignMobile = "flexStart",
    tablet: alignTablet = alignMobile,
    desktop: alignDesktop = alignTablet,
    wide: alignWide = alignDesktop
  } = normalizedAlign;
  const collapsedAlignItems = [
    collapseMobile && alignMobile === "flexStart" ? null : alignMobile,
    collapseTablet && alignTablet === "flexStart" ? null : alignTablet,
    collapseDesktop && alignDesktop === "flexStart" ? null : alignDesktop
    // wide doesnt collapse, no check needed here
  ];
  return {
    collapseMobile,
    collapseTablet,
    collapseDesktop,
    collapsibleAlignmentProps: {
      display: "flex",
      flexDirection: lib_utils_optimizeResponsiveArray_cjs.optimizeResponsiveArray(flexDirection),
      justifyContent: align ? lib_utils_optimizeResponsiveArray_cjs.optimizeResponsiveArray([
        alignMobile,
        // mobile doesnt reverse, no check needed here
        reverse ? invertAlignment(alignTablet) : alignTablet,
        reverse ? invertAlignment(alignDesktop) : alignDesktop,
        reverse ? invertAlignment(alignWide) : alignWide
      ]) : void 0,
      alignItems: collapseBelow ? lib_utils_optimizeResponsiveArray_cjs.optimizeResponsiveArray([
        collapseMobile ? collapsedAlignItems[0] : alignYMobile,
        collapseTablet ? collapsedAlignItems[1] : alignYTablet,
        collapseDesktop ? collapsedAlignItems[2] : alignYDesktop,
        alignYWide
        // wide doesnt collapse, no check needed here
      ]) : nonCollapsedAlignItems
    }
  };
}
exports.resolveCollapsibleAlignmentProps = resolveCollapsibleAlignmentProps;