@carbon/react
Version:
React components for the Carbon Design System
352 lines (344 loc) • 12.7 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
'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');
require('../Text/index.js');
var iconsReact = require('@carbon/icons-react');
var useOutsideClick = require('../../internal/useOutsideClick.js');
var Text = require('../Text/Text.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);
var _StructuredListCell;
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 = 'Structured list section',
// @ts-expect-error: Deprecated prop
ariaLabel: deprecatedAriaLabel,
isCondensed,
isFlush,
...other
} = props;
const prefix = usePrefix.usePrefix();
const classes = cx__default["default"](`${prefix}--structured-list`, {
[`${prefix}--structured-list--selection`]: selection,
[`${prefix}--structured-list--condensed`]: isCondensed,
[`${prefix}--structured-list--flush`]: isFlush && !selection
}, className);
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
};
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
};
const GridRowContext = /*#__PURE__*/React__default["default"].createContext(null);
function StructuredListRow(props) {
const {
onKeyDown,
children,
className,
head,
onClick,
selection,
...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`, {
[`${prefix}--structured-list-row--header-row`]: head,
[`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === id || selectedRow === null),
// Ensure focus on the first item when navigating through Tab keys and no row is selected (selectedRow === null)
[`${prefix}--structured-list-row--selected`]: selectedRow === id
}, className);
const itemRef = React.useRef(null);
const handleClick = () => {
setHasFocusWithin(false);
};
useOutsideClick.useOutsideClick(itemRef, handleClick);
return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
role: "row"
}, other, {
className: classes
}), selection && (_StructuredListCell || (_StructuredListCell = /*#__PURE__*/React__default["default"].createElement(StructuredListCell, {
head: true
}))), children) :
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/interactive-supports-focus
React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
role: "row",
className: classes,
ref: itemRef,
onClick: event => {
setSelectedRow?.(id);
onClick && onClick(event);
if (selection) {
// focus items only when selection is enabled
setHasFocusWithin(true);
}
},
onFocus: () => {
setHasFocusWithin(true);
},
onBlur: () => {
setHasFocusWithin(false);
},
onKeyDown: onKeyDown
}), /*#__PURE__*/React__default["default"].createElement(GridRowContext.Provider, {
value: value
}, selection && /*#__PURE__*/React__default["default"].createElement(StructuredListCell, null, selectedRow === id ? /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButtonChecked, {
className: `${prefix}--structured-list__icon`
}) : /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButton, {
className: `${prefix}--structured-list__icon`
})), 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 click
*/
onClick: PropTypes__default["default"].func,
/**
* Provide a handler that is invoked on the key down event for the control,
*/
onKeyDown: PropTypes__default["default"].func,
/**
* Mark if this row should be selectable
*/
selection: PropTypes__default["default"].bool
};
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 && 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.`)
};
function StructuredListCell(props) {
const {
children,
className,
head,
noWrap,
...other
} = props;
const prefix = usePrefix.usePrefix();
const classes = cx__default["default"]({
[`${prefix}--structured-list-th`]: head,
[`${prefix}--structured-list-td`]: !head,
[`${prefix}--structured-list-content--nowrap`]: noWrap
}, className);
if (head) {
return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
className: classes,
role: "columnheader"
}, other), children);
}
return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
as: "div",
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
};
exports.StructuredListBody = StructuredListBody;
exports.StructuredListCell = StructuredListCell;
exports.StructuredListHead = StructuredListHead;
exports.StructuredListInput = StructuredListInput;
exports.StructuredListRow = StructuredListRow;
exports.StructuredListWrapper = StructuredListWrapper;