@carbon/react 1.17.0-rc.2 → 1.17.0

package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+var iconsReact = require('@carbon/icons-react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "datePickerType"];
+
+function FluidDatePickerSkeleton(_ref) {
+  var className = _ref.className,
+      _ref$datePickerType = _ref.datePickerType,
+      datePickerType = _ref$datePickerType === void 0 ? 'single' : _ref$datePickerType,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"](className, "".concat(prefix, "--form-item ").concat(prefix, "--date-picker--fluid__skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--date-picker--fluid__skeleton--range"), datePickerType === 'range'));
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }), datePickerType !== 'simple' && /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    role: "img",
+    "aria-hidden": "true"
+  })), datePickerType === 'range' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }), /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    role: "img",
+    "aria-hidden": "true"
+  }))));
+}
+
+FluidDatePickerSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify which variant of the DatePicker the skeleton should mimic
+   */
+  datePickerType: PropTypes__default["default"].oneOf(['simple', 'single', 'range'])
+};
+
+exports["default"] = FluidDatePickerSkeleton;

package/lib/components/ListBox/ListBoxSelection.js

@@ -38,14 +38,15 @@ function ListBoxSelection(_ref) {
       selectionCount = _ref.selectionCount,
       t = _ref.translateWithId,
       disabled = _ref.disabled,
-      onClearSelection = _ref.onClearSelection;
+      onClearSelection = _ref.onClearSelection,
+      readOnly = _ref.readOnly;
   var prefix = usePrefix.usePrefix();
   var className = cx__default["default"]("".concat(prefix, "--list-box__selection"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
 
   var handleOnClick = function handleOnClick(event) {
     event.stopPropagation();
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
 
@@ -59,7 +60,7 @@ function ListBoxSelection(_ref) {
   var handleOnKeyDown = function handleOnKeyDown(event) {
     event.stopPropagation();
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     } // When a user hits ENTER, we'll clear the selection
 
@@ -88,7 +89,8 @@ function ListBoxSelection(_ref) {
     onKeyDown: handleOnKeyDown,
     disabled: disabled,
     "aria-label": t('clear.all'),
-    title: description
+    title: description,
+    "aria-disabled": readOnly ? true : undefined
   }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))) : /*#__PURE__*/React__default["default"].createElement("div", {
     role: "button",
     className: className,
@@ -135,6 +137,11 @@ ListBoxSelection.propTypes = {
    */
   onKeyDown: PropTypes__default["default"].func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.

package/lib/components/MultiSelect/MultiSelect.js

@@ -85,7 +85,8 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
       onChange = _ref.onChange,
       onMenuChange = _ref.onMenuChange,
       direction = _ref.direction,
-      selected = _ref.selectedItems;
+      selected = _ref.selectedItems,
+      readOnly = _ref.readOnly;
   var prefix = usePrefix.usePrefix();
 
   var _useContext = React.useContext(FormContext.FormContext),
@@ -176,7 +177,7 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var className = cx__default["default"]("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx4)); // needs to be capitalized for react to render it correctly
+  var className = cx__default["default"]("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   var sortOptions = {
@@ -241,6 +242,21 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
     evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var readOnlyEventHandlers = readOnly ? {
+    onClick: function onClick(evt) {
+      // NOTE: does not prevent click
+      evt.preventDefault(); // focus on the element as per readonly input behavior
+
+      evt.target.focus();
+    },
+    onKeyDown: function onKeyDown(evt) {
+      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
+
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -254,6 +270,7 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
     size: size,
     className: className,
     disabled: disabled,
+    readOnly: readOnly,
     light: light,
     invalid: invalid,
     invalidText: invalidText,
@@ -269,12 +286,13 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled
+    "aria-disabled": disabled || readOnly
   }, toggleButtonProps, {
     ref: mergeRefs["default"](toggleButtonProps.ref, ref),
     onKeyDown: onKeyDown
-  }), selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBox["default"].Selection, {
-    clearSelection: !disabled ? clearSelection : noop,
+  }, readOnlyEventHandlers), selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBox["default"].Selection, {
+    readOnly: readOnly,
+    clearSelection: !disabled && !readOnly ? clearSelection : noop,
     selectionCount: selectedItems.length,
     translateWithId: translateWithId,
     disabled: disabled
@@ -425,6 +443,11 @@ MultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
    */
   open: PropTypes__default["default"].bool,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * For full control of the selected items
    */

package/lib/components/OverflowMenu/index.js

@@ -9,30 +9,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FeatureFlags = require('@carbon/feature-flags');
 var OverflowMenu$1 = require('./OverflowMenu.js');
 var createClassWrapper = require('../../internal/createClassWrapper.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
-
-var OverflowMenu = FeatureFlags__namespace.enabled('enable-v11-release') ? createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu) : OverflowMenu$1.OverflowMenu;
+var OverflowMenu = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
 
 exports["default"] = OverflowMenu;

package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -38,7 +38,8 @@ var SkeletonPlaceholder = function SkeletonPlaceholder(_ref) {
 
 SkeletonPlaceholder.propTypes = {
   /**
-   * the class to be applied to the component
+   * Add a custom class to the component
+   * to set the height and width
    */
   className: PropTypes__default["default"].string
 };

package/lib/components/SkeletonText/SkeletonText.js

@@ -99,7 +99,7 @@ SkeletonText.propTypes = {
   heading: PropTypes__default["default"].bool,
 
   /**
-   * the number of lines in a paragraph
+   * the number of lines shown if paragraph is true
    */
   lineCount: PropTypes__default["default"].number,
 

package/lib/components/StructuredList/StructuredList.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
@@ -23,13 +23,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush", "border"],
+var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush"],
     _excluded2 = ["children", "className"],
     _excluded3 = ["children", "className"],
-    _excluded4 = ["onKeyDown", "tabIndex", "children", "className", "head", "label"],
-    _excluded5 = ["className", "value", "name", "title", "id"],
+    _excluded4 = ["onKeyDown", "children", "className", "head"],
+    _excluded5 = ["className", "name", "title", "id"],
     _excluded6 = ["children", "className", "head", "noWrap"];
-var getInstanceId = setupGetInstanceId["default"]();
+var GridSelectedRowStateContext = /*#__PURE__*/React__default["default"].createContext(null);
+var GridSelectedRowDispatchContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListWrapper(props) {
   var _classNames;
 
@@ -38,18 +39,27 @@ function StructuredListWrapper(props) {
       className = props.className,
       ariaLabel = props.ariaLabel,
       isCondensed = props.isCondensed,
-      isFlush = props.isFlush;
-      props.border;
-      var other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+      isFlush = props.isFlush,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
   var classes = cx__default["default"]("".concat(prefix, "--structured-list"), className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--structured-list--selection"), selection), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--structured-list--condensed"), isCondensed), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--structured-list--flush"), isFlush), _classNames));
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+
+  var _React$useState = React__default["default"].useState(null),
+      _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+      selectedRow = _React$useState2[0],
+      setSelectedRow = _React$useState2[1];
+
+  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": ariaLabel
-  }), children);
+  }), children)));
 }
 StructuredListWrapper.propTypes = {
   /**
@@ -57,11 +67,6 @@ StructuredListWrapper.propTypes = {
    */
   ariaLabel: PropTypes__default["default"].string,
 
-  /**
-   * Specify whether a border should be added to your StructuredListWrapper
-   */
-  border: deprecate["default"](PropTypes__default["default"].bool, "\nThe prop `border` will be removed in the next major version of Carbon."),
-
   /**
    * Provide the contents of your StructuredListWrapper
    */
@@ -89,9 +94,9 @@ StructuredListWrapper.propTypes = {
 };
 StructuredListWrapper.defaultProps = {
   selection: false,
-  ariaLabel: 'Structured list section',
   isCondensed: false,
-  isFlush: false
+  isFlush: false,
+  ariaLabel: 'Structured list section'
 };
 function StructuredListHead(props) {
   var children = props.children,
@@ -148,29 +153,51 @@ StructuredListBody.propTypes = {
 StructuredListBody.defaultProps = {
   onKeyDown: function onKeyDown() {}
 };
+var GridRowContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListRow(props) {
+  var _classNames2;
+
   var onKeyDown = props.onKeyDown,
-      tabIndex = props.tabIndex,
       children = props.children,
       className = props.className,
       head = props.head,
-      label = props.label,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded4);
 
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      hasFocusWithin = _useState2[0],
+      setHasFocusWithin = _useState2[1];
+
+  var id = useId.useId('grid-input');
+  var setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
   var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list-row"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--structured-list-row--header-row"), head));
-  return label ?
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-  React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, other, {
-    tabIndex: tabIndex,
-    className: classes,
-    onKeyDown: onKeyDown
-  }), children) : /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  var value = {
+    id: id
+  };
+  var classes = cx__default["default"]("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _classNames2));
+  return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "row"
   }, other, {
     className: classes
-  }), children);
+  }), children) :
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+  React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
+    role: "row",
+    className: classes,
+    onClick: function onClick() {
+      return setSelectedRow(id);
+    },
+    onFocus: function onFocus() {
+      setHasFocusWithin(true);
+    },
+    onBlur: function onBlur() {
+      setHasFocusWithin(false);
+    },
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React__default["default"].createElement(GridRowContext.Provider, {
+    value: value
+  }, children));
 }
 StructuredListRow.propTypes = {
   /**
@@ -191,42 +218,44 @@ StructuredListRow.propTypes = {
   /**
    * Specify whether a `<label>` should be used
    */
-  label: PropTypes__default["default"].bool,
+  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,
-   * if `<label>` is in use
-   */
-  onKeyDown: PropTypes__default["default"].func,
-
-  /**
-   * Specify the tab index of the container node, if `<label>` is in use
    */
-  tabIndex: PropTypes__default["default"].number
+  onKeyDown: PropTypes__default["default"].func
 };
 StructuredListRow.defaultProps = {
   head: false,
-  label: false,
-  tabIndex: 0,
   onKeyDown: function onKeyDown() {}
 };
 function StructuredListInput(props) {
+  var _row$id;
+
+  var defaultId = useId.useId('structureListInput');
+
   var className = props.className,
-      value = props.value,
-      name = props.name,
+      _props$name = props.name,
+      name = _props$name === void 0 ? "structured-list-input-".concat(defaultId) : _props$name,
       title = props.title,
       id = props.id,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded5);
 
   var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list-input"), className);
-  var instanceId = id || getInstanceId();
+  var classes = cx__default["default"]("".concat(prefix, "--structured-list-input"), "".concat(prefix, "--visually-hidden"), className);
+  var row = React__default["default"].useContext(GridRowContext);
+  var selectedRow = React__default["default"].useContext(GridSelectedRowStateContext);
+  var setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
   return /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
     type: "radio",
-    tabIndex: -1,
-    id: instanceId,
+    tabIndex: 0,
+    checked: row && row.id === selectedRow,
+    value: (_row$id = row === null || row === void 0 ? void 0 : row.id) !== null && _row$id !== void 0 ? _row$id : '',
+    onChange: function onChange(event) {
+      setSelectedRow(event.target.value);
+    },
+    id: id !== null && id !== void 0 ? id : defaultId,
     className: classes,
-    value: value,
     name: name,
     title: title
   }));
@@ -240,7 +269,7 @@ StructuredListInput.propTypes = {
   /**
    * Specify whether the underlying input should be checked by default
    */
-  defaultChecked: PropTypes__default["default"].bool,
+  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
@@ -255,7 +284,7 @@ StructuredListInput.propTypes = {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange: PropTypes__default["default"].func,
+  onChange: deprecate["default"](PropTypes__default["default"].func, "\nThe prop `onChange` will be removed in the next major version of Carbon."),
 
   /**
    * Provide a `title` for the input
@@ -265,11 +294,9 @@ StructuredListInput.propTypes = {
   /**
    * Specify the value of the input
    */
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired
+  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 = {
-  onChange: function onChange() {},
-  value: 'value',
   title: 'title'
 };
 function StructuredListCell(props) {
@@ -283,9 +310,17 @@ function StructuredListCell(props) {
 
   var prefix = usePrefix.usePrefix();
   var classes = cx__default["default"](className, (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--structured-list-th"), head), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--structured-list-td"), !head), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--structured-list-content--nowrap"), noWrap), _classNames3));
+
+  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: head ? 'columnheader' : 'cell'
+    role: "cell"
   }, other), children);
 }
 StructuredListCell.propTypes = {