@dnb/eufemia/cjs/components/flex/Container.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.pickFlexContainerProps = pickFlexContainerProps;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Space = _interopRequireDefault(require("../space/Space.js"));
var _index = require("../../elements/index.js");
var _useMedia = _interopRequireDefault(require("../../shared/useMedia.js"));
var _utils = require("./utils.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const propNames = ['direction', 'wrap', 'wrapChildrenInSpace', 'justify', 'align', 'divider', 'spacing', 'gap'];
function pickFlexContainerProps(props, defaults = {}, skip = []) {
  return {
    ...defaults,
    ...Object.fromEntries(Object.entries(props !== null && props !== void 0 ? props : {}).filter(([key]) => propNames.includes(key) && !skip.includes(key)))
  };
}
function handleDeprecatedProps({
  spacing,
  gap,
  rowGap,
  ...rest
}) {
  return {
    ...rest,
    rowGap: rowGap === true ? undefined : rowGap,
    gap: spacing !== null && spacing !== void 0 ? spacing : gap
  };
}
function FlexContainer(props) {
  const {
    className,
    style,
    children,
    element = 'div',
    direction = 'horizontal',
    wrap = true,
    wrapChildrenInSpace = true,
    sizeCount = 12,
    rowGap,
    justify = 'flex-start',
    align = 'flex-start',
    alignSelf,
    divider = 'space',
    gap = 'small',
    breakpoints,
    queries,
    ...rest
  } = handleDeprecatedProps(props);
  const spacing = (0, _react.useMemo)(() => {
    var _ref;
    return (_ref = direction === 'vertical' ? rowGap : undefined) !== null && _ref !== void 0 ? _ref : gap;
  }, [direction, gap, rowGap]);
  const childrenArray = replaceRootFragment(wrapChildren(props, children));
  const hasHeading = childrenArray.some((child, i) => {
    const previousChild = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[i - 1];
    return (0, _utils.isHeadingElement)(child) || i > 0 && (0, _utils.isHeadingElement)(previousChild);
  });
  const hasSizeProp = !hasHeading && direction === 'horizontal' && childrenArray.some(child => {
    var _child$props;
    return (_child$props = child['props']) === null || _child$props === void 0 ? void 0 : _child$props.size;
  });
  const {
    key: mediaKey
  } = (0, _useMedia.default)({
    disabled: !hasSizeProp,
    breakpoints,
    queries
  });
  const content = childrenArray.map((child, i) => {
    var _previousChild$type;
    const isFirst = i === 0;
    const isLast = i >= childrenArray.length - 1;
    const previousChild = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[i - 1];
    const isHeading = hasHeading && (0, _utils.isHeadingElement)(previousChild);
    const start = direction === 'horizontal' ? 'left' : 'top';
    const end = direction === 'horizontal' ? 'right' : 'bottom';
    const endSpacing = 0;
    let startSpacing = null;
    if (!isHeading && (divider === 'line' && !isFirst || divider === 'line-framed')) {
      var _getSpaceValue, _getSpaceValue2;
      const spaceAboveLine = (_getSpaceValue = (0, _utils.getSpaceValue)(end, previousChild)) !== null && _getSpaceValue !== void 0 ? _getSpaceValue : spacing;
      startSpacing = (_getSpaceValue2 = (0, _utils.getSpaceValue)(start, child)) !== null && _getSpaceValue2 !== void 0 ? _getSpaceValue2 : spacing;
      return _react.default.createElement(_react.default.Fragment, {
        key: `element-${i}`
      }, _react.default.createElement(_index.Hr, {
        top: !isFirst ? spaceAboveLine : 0,
        space: 0,
        className: "dnb-flex-container__hr"
      }), (0, _utils.renderWithSpacing)(child, {
        space: {
          [start]: startSpacing,
          [end]: endSpacing
        },
        wrapInSpace: wrapChildrenInSpace
      }), divider === 'line-framed' && isLast && _react.default.createElement(_index.Hr, {
        top: spaceAboveLine,
        space: 0,
        className: "dnb-flex-container__hr"
      }));
    }
    if (isFirst && direction !== 'horizontal') {
      startSpacing = 0;
    } else {
      var _ref2, _getSpaceValue3;
      startSpacing = (_ref2 = (_getSpaceValue3 = (0, _utils.getSpaceValue)(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : (0, _utils.getSpaceValue)(end, previousChild)) !== null && _ref2 !== void 0 ? _ref2 : spacing;
    }
    if (_react.default.isValidElement(previousChild) && (previousChild === null || previousChild === void 0 || (_previousChild$type = previousChild.type) === null || _previousChild$type === void 0 ? void 0 : _previousChild$type['_supportsSpacingProps']) === false) {
      startSpacing = 0;
    }
    const space = direction === 'horizontal' ? {
      [start]: endSpacing,
      [end]: startSpacing
    } : {
      [start]: startSpacing,
      [end]: endSpacing
    };
    return (0, _utils.renderWithSpacing)(child, {
      key: (child === null || child === void 0 ? void 0 : child['key']) || `element-${i}`,
      space,
      wrapInSpace: wrapChildrenInSpace
    });
  });
  const n = 'dnb-flex-container';
  const rowGapClass = (0, _react.useMemo)(() => {
    if (rowGap !== false && direction === 'horizontal') {
      return `${n}--row-gap-${rowGap !== null && rowGap !== void 0 ? rowGap : 'small'}`;
    }
    return undefined;
  }, [direction, rowGap]);
  const cn = (0, _classnames.default)('dnb-flex-container', rowGapClass, className, direction && `${n}--direction-${direction}`, justify && `${n}--justify-${justify}`, align && `${n}--align-${align}`, alignSelf && `${n}--align-self-${alignSelf}`, spacing && `${n}--spacing-${spacing}`, wrap && `${n}--wrap`, hasSizeProp && `${n}--has-size`, divider && `${n}--divider-${divider}`);
  return _react.default.createElement(_Space.default, _extends({
    element: element,
    className: cn,
    "data-media-key": mediaKey,
    style: hasSizeProp ? {
      '--sizeCount': sizeCount,
      ...style
    } : style
  }, rest), content);
}
function wrapChildren(props, children) {
  return _react.default.Children.toArray(children).map(child => {
    if (_react.default.isValidElement(child) && child.type['_supportsSpacingProps'] === 'children') {
      return _react.default.cloneElement(child, child.props, _react.default.createElement(FlexContainer, props, child.props.children));
    }
    return child;
  });
}
function replaceRootFragment(children) {
  const firstChild = children[0];
  if (_react.default.Children.count(children) === 1 && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.type) === _react.Fragment) {
    var _firstChild$props;
    return _react.default.Children.toArray(firstChild === null || firstChild === void 0 || (_firstChild$props = firstChild.props) === null || _firstChild$props === void 0 ? void 0 : _firstChild$props.children);
  }
  return children;
}
FlexContainer._supportsSpacingProps = true;
var _default = exports.default = FlexContainer;
//# sourceMappingURL=Container.js.map