@primer/react/lib-esm/Hidden/Hidden.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { clsx } from 'clsx';
import classes from './Hidden.module.css.js';

/* Normalize the value that is received from the prop `when`.
 * For array types : ['narrow', 'wide'] -> {narrow: true, wide: true}
 * For string types: 'narrow' -> {narrow: true}
 */
function normalize(hiddenViewports) {
  // For array types
  if (Array.isArray(hiddenViewports)) {
    const breakpoints = {};
    // ['narrow', 'wide'] -> {narrow: true, wide: true}
    for (const breakpoint of hiddenViewports) {
      breakpoints[breakpoint] = true;
    }
    return breakpoints;
  }
  // For string types
  // 'narrow' -> {narrow: true}
  return {
    [hiddenViewports]: true
  };
}
const Hidden = ({
  when,
  className,
  style,
  children
}) => {
  const normalizedStyles = normalize(when);
  return /*#__PURE__*/React.createElement("div", {
    className: clsx(className, classes.Hidden),
    style: {
      '--hiddenDisplay-narrow': normalizedStyles.narrow ? 'none' : undefined,
      '--hiddenDisplay-regular': normalizedStyles.regular ? 'none' : undefined,
      '--hiddenDisplay-wide': normalizedStyles.wide ? 'none' : undefined,
      ...style
    }
  }, children);
};
Hidden.displayName = "Hidden";
Hidden.displayName = 'Hidden';

export { Hidden };