@greensight/gds/emotion/esm/useCSSProperty-CIA5Kp6U.js

Greensight Design System

import { a as _objectSpread2, b as _defineProperty, f as _typeof } from './_rollupPluginBabelHelpers-D0Wa2C7U.js';
import { useMemo } from 'react';
import { baseTheme } from './baseTheme.js';
import { useTheme } from './useTheme.js';
import { B as BREAKPOINTS_NAMES } from './scale-CeLrnuzO.js';
import './cjs-C-GfJT3o.js';
import './emotion-element-c16c303e.esm-CnTrGsmj.js';

/**
 * Strict check on object type.
 */
var isObject = function isObject(item) {
  return _typeof(item) === 'object' && !Array.isArray(item) && item !== null;
};

var BREAKPOINT_INDICES = new Map();
BREAKPOINTS_NAMES.forEach(function (e, i) {
  return BREAKPOINT_INDICES.set(e, i);
});

/**
 * Calculate CSS Object from component props with `AllowMedia` type (user can pass object with breakpoints through prop). CSS property can be calculated based on multiple props.
 */
var useCSSProperty = function useCSSProperty(_ref) {
  var name = _ref.name,
    props = _ref.props,
    condition = _ref.condition,
    transform = _ref.transform;
  var _useTheme = useTheme(),
    layout = _useTheme.layout;
  var layoutTheme = layout || baseTheme.layout;
  var breakpoints = layoutTheme.breakpoints;
  return useMemo(function () {
    if (condition !== undefined && !condition) return;
    var propsValues = Object.values(props);
    var isUndefined = propsValues.every(function (value) {
      return value === undefined;
    });
    if (isUndefined) return;
    var mediaProp = propsValues.find(function (value) {
      return isObject(value);
    });
    if (!mediaProp) return setValue(name, props, transform);
    return Object.keys(mediaProp).sort(function (a, b) {
      return BREAKPOINT_INDICES.get(a) - BREAKPOINT_INDICES.get(b);
    }).reduce(function (acc, bp) {
      var nameIndex = BREAKPOINT_INDICES.get(bp);
      var nextBp = nameIndex !== -1 && BREAKPOINTS_NAMES[nameIndex - 1];
      var breakpointProps = {};
      for (var key in props) {
        var value = props[key];
        breakpointProps[key] = !isObject(value) ? value : value[bp];
      }
      var rule = setValue(name, breakpointProps, transform);
      return _objectSpread2(_objectSpread2({}, acc), nextBp ? _defineProperty({}, "@media (max-width: ".concat(breakpoints[nextBp] - 1, "px)"), rule) : rule);
    }, {});
  }, [breakpoints, condition, name, props, transform]);
};
var setValue = function setValue(name, props, transform) {
  return _defineProperty({}, name, transform ? transform(props) : Object.values(props)[0]);
};

export { useCSSProperty as u };