@mskcc/carbon-react/lib/components/StructuredList/StructuredList.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 React = require('react');
var PropTypes = require('prop-types');
var cx = require('classnames');
var useId = require('../../internal/useId.js');
var deprecate = require('../../prop-types/deprecate.js');
var usePrefix = require('../../internal/usePrefix.js');

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

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

const GridSelectedRowStateContext = /*#__PURE__*/React__default["default"].createContext(null);
const GridSelectedRowDispatchContext = /*#__PURE__*/React__default["default"].createContext(null);
function StructuredListWrapper(props) {
  const {
    children,
    selection,
    className,
    ['aria-label']: ariaLabel,
    ariaLabel: deprecatedAriaLabel,
    isCondensed,
    isFlush,
    ...other
  } = props;
  const prefix = usePrefix.usePrefix();
  const classes = cx__default["default"](`${prefix}--structured-list`, className, {
    [`${prefix}--structured-list--selection`]: selection,
    [`${prefix}--structured-list--condensed`]: isCondensed,
    [`${prefix}--structured-list--flush`]: isFlush && !selection
  });
  const [selectedRow, setSelectedRow] = React__default["default"].useState(null);
  return /*#__PURE__*/React__default["default"].createElement(GridSelectedRowStateContext.Provider, {
    value: selectedRow
  }, /*#__PURE__*/React__default["default"].createElement(GridSelectedRowDispatchContext.Provider, {
    value: setSelectedRow
  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
    role: "table",
    className: classes
  }, other, {
    "aria-label": deprecatedAriaLabel || ariaLabel
  }), children)));
}
StructuredListWrapper.propTypes = {
  /**
   * Specify a label to be read by screen readers on the container node
   */
  ['aria-label']: PropTypes__default["default"].string,
  /**
   * Deprecated, please use `aria-label` instead.
   * Specify a label to be read by screen readers on the container note.
   */
  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
  /**
   * Provide the contents of your StructuredListWrapper
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify if structured list is condensed, default is false
   */
  isCondensed: PropTypes__default["default"].bool,
  /**
   * Specify if structured list is flush, not valid for selection variant, default is false
   */
  isFlush: PropTypes__default["default"].bool,
  /**
   * Specify whether your StructuredListWrapper should have selections
   */
  selection: PropTypes__default["default"].bool
};
StructuredListWrapper.defaultProps = {
  selection: false,
  isCondensed: false,
  isFlush: false,
  ['aria-label']: 'Structured list section'
};
function StructuredListHead(props) {
  const {
    children,
    className,
    ...other
  } = props;
  const prefix = usePrefix.usePrefix();
  const classes = cx__default["default"](`${prefix}--structured-list-thead`, className);
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
    role: "rowgroup",
    className: classes
  }, other), children);
}
StructuredListHead.propTypes = {
  /**
   * Provide the contents of your StructuredListHead
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be applied to the node
   */
  className: PropTypes__default["default"].string
};
function StructuredListBody(props) {
  const {
    children,
    className,
    ...other
  } = props;
  const prefix = usePrefix.usePrefix();
  const classes = cx__default["default"](`${prefix}--structured-list-tbody`, className);
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
    className: classes,
    role: "rowgroup"
  }, other), children);
}
StructuredListBody.propTypes = {
  /**
   * Provide the contents of your StructuredListBody
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes__default["default"].string,
  head: PropTypes__default["default"].bool,
  /**
   * Provide a handler that is invoked on the key down event for the control
   */
  onKeyDown: PropTypes__default["default"].func
};
StructuredListBody.defaultProps = {
  onKeyDown: () => {}
};
const GridRowContext = /*#__PURE__*/React__default["default"].createContext(null);
function StructuredListRow(props) {
  const {
    onKeyDown,
    children,
    className,
    head,
    ...other
  } = props;
  const [hasFocusWithin, setHasFocusWithin] = React.useState(false);
  const id = useId.useId('grid-input');
  const selectedRow = React__default["default"].useContext(GridSelectedRowStateContext);
  const setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
  const prefix = usePrefix.usePrefix();
  const value = {
    id
  };
  const classes = cx__default["default"](`${prefix}--structured-list-row`, className, {
    [`${prefix}--structured-list-row--header-row`]: head,
    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
    [`${prefix}--structured-list-row--selected`]: selectedRow === id
  });
  return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
    role: "row"
  }, other, {
    className: classes
  }), children) :
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
  React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
    role: "row",
    className: classes,
    onClick: () => setSelectedRow(id),
    onFocus: () => {
      setHasFocusWithin(true);
    },
    onBlur: () => {
      setHasFocusWithin(false);
    },
    onKeyDown: onKeyDown
  }), /*#__PURE__*/React__default["default"].createElement(GridRowContext.Provider, {
    value: value
  }, children));
}
StructuredListRow.propTypes = {
  /**
   * Provide the contents of your StructuredListRow
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify whether your StructuredListRow should be used as a header row
   */
  head: PropTypes__default["default"].bool,
  /**
   * Specify whether a `<label>` should be used
   */
  label: deprecate["default"](PropTypes__default["default"].bool, `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`),
  /**
   * Provide a handler that is invoked on the key down event for the control,
   */
  onKeyDown: PropTypes__default["default"].func
};
StructuredListRow.defaultProps = {
  head: false,
  onKeyDown: () => {}
};
function StructuredListInput(props) {
  const defaultId = useId.useId('structureListInput');
  const {
    className,
    name = `structured-list-input-${defaultId}`,
    title,
    id,
    onChange,
    ...other
  } = props;
  const prefix = usePrefix.usePrefix();
  const classes = cx__default["default"](`${prefix}--structured-list-input`, `${prefix}--visually-hidden`, className);
  const row = React__default["default"].useContext(GridRowContext);
  const selectedRow = React__default["default"].useContext(GridSelectedRowStateContext);
  const setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
  return /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
    type: "radio",
    tabIndex: 0,
    checked: row && row.id === selectedRow,
    value: row?.id ?? '',
    onChange: event => {
      setSelectedRow(event.target.value);
      onChange(event);
    },
    id: id ?? defaultId,
    className: classes,
    name: name,
    title: title
  }));
}
StructuredListInput.propTypes = {
  /**
   * Specify an optional className to be applied to the input
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify whether the underlying input should be checked by default
   */
  defaultChecked: deprecate["default"](PropTypes__default["default"].bool, `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.`),
  /**
   * Specify a custom `id` for the input
   */
  id: PropTypes__default["default"].string,
  /**
   * Provide a `name` for the input
   */
  name: PropTypes__default["default"].string,
  /**
   * Provide an optional hook that is called each time the input is updated
   */
  onChange: PropTypes__default["default"].func,
  /**
   * Provide a `title` for the input
   */
  title: PropTypes__default["default"].string,
  /**
   * Specify the value of the input
   */
  value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired, `\nThe prop \`value\` will be removed in the next major version of Carbon.`)
};
StructuredListInput.defaultProps = {
  title: 'title'
};
function StructuredListCell(props) {
  const {
    children,
    className,
    head,
    noWrap,
    ...other
  } = props;
  const prefix = usePrefix.usePrefix();
  const classes = cx__default["default"](className, {
    [`${prefix}--structured-list-th`]: head,
    [`${prefix}--structured-list-td`]: !head,
    [`${prefix}--structured-list-content--nowrap`]: noWrap
  });
  if (head) {
    return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
      className: classes,
      role: "columnheader"
    }, other), children);
  }
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
    className: classes,
    role: "cell"
  }, other), children);
}
StructuredListCell.propTypes = {
  /**
   * Provide the contents of your StructuredListCell
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify whether your StructuredListCell should be used as a header cell
   */
  head: PropTypes__default["default"].bool,
  /**
   * Specify whether your StructuredListCell should have text wrapping
   */
  noWrap: PropTypes__default["default"].bool
};
StructuredListCell.defaultProps = {
  head: false,
  noWrap: false
};

exports.StructuredListBody = StructuredListBody;
exports.StructuredListCell = StructuredListCell;
exports.StructuredListHead = StructuredListHead;
exports.StructuredListInput = StructuredListInput;
exports.StructuredListRow = StructuredListRow;
exports.StructuredListWrapper = StructuredListWrapper;