@mskcc/carbon-react/es/components/StructuredList/StructuredList.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { useId } from '../../internal/useId.js';
import deprecate from '../../prop-types/deprecate.js';
import { usePrefix } from '../../internal/usePrefix.js';

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

export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper };