@carbon/react 1.103.0 → 1.104.0

package/es/components/StructuredList/StructuredList.js

@@ -1,349 +1,210 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useState, useRef } 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';
-import { Text } from '../Text/Text.js';
-import '../Text/TextDirection.js';
-import { RadioButtonChecked, RadioButton } from '@carbon/icons-react';
-import { useOutsideClick } from '../../internal/useOutsideClick.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Text } from "../Text/Text.js";
+import { useId } from "../../internal/useId.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { useOutsideClick } from "../../internal/useOutsideClick.js";
+import classNames from "classnames";
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RadioButton, RadioButtonChecked } from "@carbon/icons-react";
 
-var _StructuredListCell;
-const GridSelectedRowStateContext = /*#__PURE__*/React.createContext(null);
-const GridSelectedRowDispatchContext = /*#__PURE__*/React.createContext(null);
+//#region src/components/StructuredList/StructuredList.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const GridSelectedRowStateContext = React.createContext(null);
+const GridSelectedRowDispatchContext = React.createContext(null);
 function StructuredListWrapper(props) {
-  const {
-    children,
-    selection,
-    className,
-    ['aria-label']: ariaLabel = 'Structured list section',
-    // @ts-expect-error: Deprecated prop
-    ariaLabel: deprecatedAriaLabel,
-    isCondensed,
-    isFlush,
-    selectedInitialRow,
-    ...other
-  } = props;
-  const prefix = usePrefix();
-  const classes = cx(`${prefix}--structured-list`, {
-    [`${prefix}--structured-list--selection`]: selection,
-    [`${prefix}--structured-list--condensed`]: isCondensed,
-    [`${prefix}--structured-list--flush`]: isFlush && !selection
-  }, className);
-  const [selectedRow, setSelectedRow] = React.useState(selectedInitialRow ?? null);
-  return /*#__PURE__*/React.createElement(GridSelectedRowStateContext.Provider, {
-    value: selectedRow
-  }, /*#__PURE__*/React.createElement(GridSelectedRowDispatchContext.Provider, {
-    value: setSelectedRow
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    role: "table",
-    className: classes
-  }, other, {
-    "aria-label": deprecatedAriaLabel || ariaLabel
-  }), children)));
+	const { children, selection, className, ["aria-label"]: ariaLabel = "Structured list section", ariaLabel: deprecatedAriaLabel, isCondensed, isFlush, selectedInitialRow, ...other } = props;
+	const prefix = usePrefix();
+	const classes = classNames(`${prefix}--structured-list`, {
+		[`${prefix}--structured-list--selection`]: selection,
+		[`${prefix}--structured-list--condensed`]: isCondensed,
+		[`${prefix}--structured-list--flush`]: isFlush && !selection
+	}, className);
+	const [selectedRow, setSelectedRow] = React.useState(selectedInitialRow ?? null);
+	return /* @__PURE__ */ jsx(GridSelectedRowStateContext.Provider, {
+		value: selectedRow,
+		children: /* @__PURE__ */ jsx(GridSelectedRowDispatchContext.Provider, {
+			value: setSelectedRow,
+			children: /* @__PURE__ */ jsx("div", {
+				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,
-  /**
-   * Specify which row will be selected initially
-   */
-  selectedInitialRow: PropTypes.string
+	["aria-label"]: PropTypes.string,
+	ariaLabel: deprecate(PropTypes.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	children: PropTypes.node,
+	className: PropTypes.string,
+	isCondensed: PropTypes.bool,
+	isFlush: PropTypes.bool,
+	selection: PropTypes.bool,
+	selectedInitialRow: PropTypes.string
 };
 function StructuredListHead(props) {
-  const {
-    children,
-    className,
-    ...other
-  } = props;
-  const prefix = usePrefix();
-  const classes = cx(`${prefix}--structured-list-thead`, className);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    role: "rowgroup",
-    className: classes
-  }, other), children);
+	const { children, className, ...other } = props;
+	return /* @__PURE__ */ jsx("div", {
+		role: "rowgroup",
+		className: classNames(`${usePrefix()}--structured-list-thead`, className),
+		...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
+	children: PropTypes.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.createElement("div", _extends({
-    className: classes,
-    role: "rowgroup"
-  }, other), children);
+	const { children, className, ...other } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(`${usePrefix()}--structured-list-tbody`, className),
+		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
+	children: PropTypes.node,
+	className: PropTypes.string,
+	head: PropTypes.bool,
+	onKeyDown: PropTypes.func
 };
-const GridRowContext = /*#__PURE__*/React.createContext(null);
+const GridRowContext = React.createContext(null);
 function StructuredListRow(props) {
-  const {
-    onKeyDown,
-    children,
-    className,
-    head,
-    onClick,
-    selection,
-    id,
-    ...other
-  } = props;
-  const [hasFocusWithin, setHasFocusWithin] = useState(false);
-  const generatedRowId = useId('grid-input');
-  const rowId = id ?? generatedRowId;
-  const selectedRow = React.useContext(GridSelectedRowStateContext);
-  const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
-  const prefix = usePrefix();
-  const value = {
-    id: rowId
-  };
-  const classes = cx(`${prefix}--structured-list-row`, {
-    [`${prefix}--structured-list-row--header-row`]: head,
-    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === rowId || 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 === rowId
-  }, className);
-  const itemRef = useRef(null);
-  const handleClick = () => {
-    setHasFocusWithin(false);
-  };
-  useOutsideClick(itemRef, handleClick);
-  return head ? /*#__PURE__*/React.createElement("div", _extends({
-    role: "row"
-  }, other, {
-    className: classes
-  }), selection && (_StructuredListCell || (_StructuredListCell = /*#__PURE__*/React.createElement(StructuredListCell, {
-    head: true
-  }))), children) :
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-  React.createElement("div", _extends({}, other, {
-    role: "row",
-    className: classes,
-    ref: itemRef,
-    onClick: event => {
-      setSelectedRow?.(rowId);
-      onClick?.(event);
-      if (selection) {
-        // focus items only when selection is enabled
-        setHasFocusWithin(true);
-      }
-    },
-    onFocus: event => {
-      if (selection || event.currentTarget === event.target) {
-        setHasFocusWithin(true);
-      }
-    },
-    onBlur: () => {
-      setHasFocusWithin(false);
-    },
-    onKeyDown: onKeyDown
-  }), /*#__PURE__*/React.createElement(GridRowContext.Provider, {
-    value: value
-  }, selection && /*#__PURE__*/React.createElement(StructuredListCell, null, selectedRow === rowId ? /*#__PURE__*/React.createElement(RadioButtonChecked, {
-    className: `${prefix}--structured-list__icon`
-  }) : /*#__PURE__*/React.createElement(RadioButton, {
-    className: `${prefix}--structured-list__icon`
-  })), children));
+	const { onKeyDown, children, className, head, onClick, selection, id, ...other } = props;
+	const [hasFocusWithin, setHasFocusWithin] = useState(false);
+	const generatedRowId = useId("grid-input");
+	const rowId = id ?? generatedRowId;
+	const selectedRow = React.useContext(GridSelectedRowStateContext);
+	const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
+	const prefix = usePrefix();
+	const value = { id: rowId };
+	const classes = classNames(`${prefix}--structured-list-row`, {
+		[`${prefix}--structured-list-row--header-row`]: head,
+		[`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === rowId || selectedRow === null),
+		[`${prefix}--structured-list-row--selected`]: selectedRow === rowId
+	}, className);
+	const itemRef = useRef(null);
+	const handleClick = () => {
+		setHasFocusWithin(false);
+	};
+	useOutsideClick(itemRef, handleClick);
+	return head ? /* @__PURE__ */ jsxs("div", {
+		role: "row",
+		...other,
+		className: classes,
+		children: [selection && /* @__PURE__ */ jsx(StructuredListCell, { head: true }), children]
+	}) : /* @__PURE__ */ jsx("div", {
+		...other,
+		role: "row",
+		className: classes,
+		ref: itemRef,
+		onClick: (event) => {
+			setSelectedRow?.(rowId);
+			onClick?.(event);
+			if (selection) setHasFocusWithin(true);
+		},
+		onFocus: (event) => {
+			if (selection || event.currentTarget === event.target) setHasFocusWithin(true);
+		},
+		onBlur: () => {
+			setHasFocusWithin(false);
+		},
+		onKeyDown,
+		children: /* @__PURE__ */ jsxs(GridRowContext.Provider, {
+			value,
+			children: [selection && /* @__PURE__ */ jsx(StructuredListCell, { children: selectedRow === rowId ? /* @__PURE__ */ jsx(RadioButtonChecked, { className: `${prefix}--structured-list__icon` }) : /* @__PURE__ */ jsx(RadioButton, { className: `${prefix}--structured-list__icon` }) }), 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 click
-   */
-  onClick: PropTypes.func,
-  /**
-   * Provide a handler that is invoked on the key down event for the control,
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Mark if this row should be selectable
-   */
-  selection: PropTypes.bool,
-  /**
-   * Specify row id so that it can be used for initial selection
-   */
-  id: PropTypes.string
+	children: PropTypes.node,
+	className: PropTypes.string,
+	head: PropTypes.bool,
+	label: deprecate(PropTypes.bool, `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`),
+	onClick: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	selection: PropTypes.bool,
+	id: PropTypes.string
 };
 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.useContext(GridRowContext);
-  const selectedRow = React.useContext(GridSelectedRowStateContext);
-  const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
-  return /*#__PURE__*/React.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
-  }));
+	const defaultId = useId("structureListInput");
+	const { className, name = `structured-list-input-${defaultId}`, title, id, onChange, ...other } = props;
+	const prefix = usePrefix();
+	const classes = classNames(`${prefix}--structured-list-input`, `${prefix}--visually-hidden`, className);
+	const row = React.useContext(GridRowContext);
+	const selectedRow = React.useContext(GridSelectedRowStateContext);
+	const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
+	return /* @__PURE__ */ jsx("input", {
+		...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,
+		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.`)
+	className: PropTypes.string,
+	defaultChecked: deprecate(PropTypes.bool, `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.`),
+	id: PropTypes.string,
+	name: PropTypes.string,
+	onChange: PropTypes.func,
+	title: PropTypes.string,
+	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({
-    [`${prefix}--structured-list-th`]: head,
-    [`${prefix}--structured-list-td`]: !head,
-    [`${prefix}--structured-list-content--nowrap`]: noWrap
-  }, className);
-  if (head) {
-    return /*#__PURE__*/React.createElement(Text, _extends({
-      className: classes,
-      role: "columnheader"
-    }, other), children);
-  }
-  return /*#__PURE__*/React.createElement(Text, _extends({
-    as: "div",
-    className: classes,
-    role: "cell"
-  }, other), children);
+	const { children, className, head, noWrap, ...other } = props;
+	const prefix = usePrefix();
+	const classes = classNames({
+		[`${prefix}--structured-list-th`]: head,
+		[`${prefix}--structured-list-td`]: !head,
+		[`${prefix}--structured-list-content--nowrap`]: noWrap
+	}, className);
+	if (head) return /* @__PURE__ */ jsx(Text, {
+		className: classes,
+		role: "columnheader",
+		...other,
+		children
+	});
+	return /* @__PURE__ */ jsx(Text, {
+		as: "div",
+		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
+	children: PropTypes.node,
+	className: PropTypes.string,
+	head: PropTypes.bool,
+	noWrap: PropTypes.bool
 };
 
-export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper };
+//#endregion
+export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper };