@kiwicom/orbit-components/lib/Stack/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _tailwind = require("../common/tailwind");
var _consts = require("../utils/mediaQuery/consts");
var _direction = require("../common/tailwind/direction");
var _spacing = require("../common/tailwind/spacing");
var _alignItems = require("../common/tailwind/alignItems");
var _justify = require("../common/tailwind/justify");
const shouldUseFlex = props => props.flex || Object.keys(props).map(prop => ["spacing", "spaceAfter", "dataTest", "children"].includes(prop)).includes(false);

// use margins instead of gap, works with block
const shouldUseLegacy = props => {
  if (props.legacy) return true;
  if (!shouldUseFlex(props) && Boolean(props.spacing)) return true;
  return false;
};
const Stack = props => {
  const {
    children,
    as: ComponentTag = "div",
    dataTest,
    basis,
    mediumMobile,
    largeMobile,
    tablet,
    desktop,
    largeDesktop
  } = props;
  const viewportProps = {
    mediumMobile,
    largeMobile,
    tablet,
    desktop,
    largeDesktop
  };
  const defaultMediaProps = _react.default.useMemo(() => {
    const isFlex = shouldUseFlex(props);
    const {
      spacing = _spacing.SPACING.medium,
      spaceAfter,
      direction = isFlex ? _direction.DIRECTION.ROW : _direction.DIRECTION.COLUMN,
      grow = true,
      justify = _justify.JUSTIFY.START,
      shrink = false,
      wrap = false,
      flex,
      legacy = shouldUseLegacy({
        ...props,
        spacing
      }),
      align = _alignItems.ALIGN.START,
      inline = false
    } = props;
    return {
      flex: flex || isFlex,
      legacy,
      direction,
      spacing,
      grow,
      inline,
      justify,
      align,
      shrink,
      wrap,
      spaceAfter
    };
  }, [props]);
  const vars = {
    "--basis": basis,
    "--mm-basis": mediumMobile?.basis,
    "--lm-basis": largeMobile?.basis,
    "--tb-basis": tablet?.basis,
    "--de-basis": desktop?.basis,
    "--ld-basis": largeDesktop?.basis
  };
  const varClasses = [vars["--basis"] != null && "basis-[var(--basis)]", vars["--mm-basis"] != null && "mm:basis-[var(--mm-basis)]", vars["--lm-basis"] != null && "lm:basis-[var(--lm-basis)]", vars["--tb-basis"] != null && "tb:basis-[var(--tb-basis)]", vars["--de:basis"] != null && "de:basis-[var(--de-basis)]", vars["--ld:basis"] != null && "ld:basis-[var(--ld-basis)]"];
  const getProperty = _react.default.useCallback((property, viewports, index) => {
    const viewport = viewports[index];
    const found = props[viewport]?.[property];
    if (typeof found !== "undefined") return found;
    if (index > 0) return getProperty(property, viewports, index - 1);
    return defaultMediaProps[property];
  }, [props, defaultMediaProps]);
  const getTailwindTokensForMedia = (opts, viewport) => {
    if (!opts) return "";
    const {
      spaceAfter,
      align,
      wrap,
      grow,
      shrink,
      justify,
      direction,
      spacing,
      inline,
      flex,
      legacy
    } = opts;
    return (0, _clsx.default)(typeof spaceAfter !== "undefined" && (0, _tailwind.getSpaceAfterClasses)(spaceAfter, viewport), typeof align !== "undefined" && (0, _tailwind.getAlignItemsClasses)(align, viewport), typeof align !== "undefined" && (0, _tailwind.getAlignContentClasses)(align, viewport), typeof wrap !== "undefined" && (0, _tailwind.getWrapClasses)(wrap, viewport), typeof grow !== "undefined" && (0, _tailwind.getGrowClasses)(grow, viewport), typeof shrink !== "undefined" && (0, _tailwind.getShrinkClasses)(shrink, viewport), typeof justify !== "undefined" && (0, _tailwind.getJustifyClasses)(justify, viewport), (0, _tailwind.getDirectionClasses)(direction, viewport), flex || inline ? (0, _tailwind.getDisplayClasses)(inline ? "inline-flex" : "flex", viewport) : "block", (0, _tailwind.getSpacingClasses)(spacing, viewport, direction, legacy), inline === false && "w-full");
  };
  return (
    /*#__PURE__*/
    // @ts-expect-error orbit string as
    _react.default.createElement(ComponentTag, {
      "data-test": dataTest,
      style: vars,
      className: (0, _clsx.default)(getTailwindTokensForMedia(defaultMediaProps), ...varClasses, Object.values(_consts.QUERIES).map((viewport, index, viewports) => {
        if (!viewportProps[viewport]) return null;
        return getTailwindTokensForMedia({
          ...props[viewport],
          direction: getProperty("direction", viewports, index),
          spacing: getProperty("spacing", viewports, index),
          legacy: getProperty("legacy", viewports, index)
        }, viewport);
      }))
    }, children)
  );
};
var _default = Stack;
exports.default = _default;