@mskcc/carbon-react/lib/components/Stack/Stack.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var layout = require('@carbon/layout');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var usePrefix = require('../../internal/usePrefix.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

/**
 * The steps in the spacing scale
 * @type {Array<number>}
 */
const SPACING_STEPS = Array.from({
  length: layout.spacing.length - 1
}).map((_, step) => {
  return step + 1;
});

/**
 * The Stack component is a useful layout utility in a component-based model.
 * This allows components to not use margin and instead delegate the
 * responsibility of positioning and layout to parent components.
 *
 * In the case of the Stack component, it uses the spacing scale from the
 * Design Language in order to determine how much space there should be between
 * items rendered by the Stack component. It also supports a custom `gap` prop
 * which will allow a user to provide a custom value for the gap of the layout.
 *
 * This component supports both horizontal and vertical orientations.
 *
 * Inspiration for this component:
 *
 * - https://paste.twilio.design/layout/stack/
 * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
 */

const Stack = /*#__PURE__*/React__default["default"].forwardRef(function Stack(_ref, ref) {
  let {
    as: BaseComponent = 'div',
    children,
    className: customClassName,
    gap,
    orientation = 'vertical',
    ...rest
  } = _ref;
  const prefix = usePrefix.usePrefix();
  const className = cx__default["default"](customClassName, {
    [`${prefix}--stack-${orientation}`]: true,
    [`${prefix}--stack-scale-${gap}`]: typeof gap === 'number'
  });
  const style = {};
  if (typeof gap === 'string') {
    style[`--${prefix}-stack-gap`] = gap;
  }
  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
    ref: ref,
    className: className,
    style: style
  }), children);
});
Stack.propTypes = {
  /**
   * Provide a custom element type to render as the outermost element in
   * the Stack component. By default, this component will render a `div`.
   */
  as: PropTypes__default["default"].elementType,
  /**
   * Provide the elements that will be rendered as children inside of the Stack
   * component. These elements will have having spacing between them according
   * to the `step` and `orientation` prop
   */
  children: PropTypes__default["default"].node,
  /**
   * Provide a custom class name to be used by the outermost element rendered by
   * Stack
   */
  className: PropTypes__default["default"].string,
  /**
   * Provide either a custom value or a step from the spacing scale to be used
   * as the gap in the layout
   */
  gap: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].oneOf(SPACING_STEPS)]),
  /**
   * Specify the orientation of them items in the Stack
   */
  orientation: PropTypes__default["default"].oneOf(['horizontal', 'vertical'])
};

exports.Stack = Stack;