@carbon/react 1.3.0 → 1.4.0-rc.0

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -10,157 +10,99 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var deprecate = require('../../prop-types/deprecate.js');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-var _excluded = ["id", "labelText", "disabled", "invalid", "invalidText", "helperText", "hideLabel", "onChange", "onClick", "placeholder", "type", "datePickerType", "pattern", "iconDescription", "openCalendar", "size", "warn", "warnText"];
 
-var DatePickerInput = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers.inherits(DatePickerInput, _Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(DatePickerInput);
-
-  function DatePickerInput() {
-    _rollupPluginBabelHelpers.classCallCheck(this, DatePickerInput);
-
-    return _super.apply(this, arguments);
-  }
-
-  _rollupPluginBabelHelpers.createClass(DatePickerInput, [{
-    key: "render",
-    value: function render() {
-      var _this = this,
-          _title;
-
-      var _this$props = this.props,
-          id = _this$props.id,
-          labelText = _this$props.labelText,
-          disabled = _this$props.disabled,
-          invalid = _this$props.invalid,
-          invalidText = _this$props.invalidText,
-          helperText = _this$props.helperText,
-          hideLabel = _this$props.hideLabel,
-          _onChange = _this$props.onChange,
-          _onClick = _this$props.onClick,
-          placeholder = _this$props.placeholder,
-          type = _this$props.type,
-          datePickerType = _this$props.datePickerType,
-          pattern = _this$props.pattern,
-          iconDescription = _this$props.iconDescription,
-          openCalendar = _this$props.openCalendar,
-          size = _this$props.size,
-          warn = _this$props.warn,
-          warnText = _this$props.warnText,
-          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      var datePickerInputProps = {
-        id: id,
-        onChange: function onChange(evt) {
-          if (!disabled) {
-            _onChange(evt);
-          }
-        },
-        onClick: function onClick(evt) {
-          if (!disabled) {
-            _onClick(evt);
-          }
-        },
-        placeholder: placeholder,
-        type: type,
-        pattern: pattern
-      };
-      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        var _classNames, _classNames2, _classNames4;
-
-        var wrapperClasses = cx__default["default"]("".concat(prefix, "--date-picker-input__wrapper"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _classNames));
-        var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
-        var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-        var inputClasses = cx__default["default"]("".concat(prefix, "--date-picker__input"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--date-picker__input--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _classNames4));
-
-        var datePickerIcon = function () {
-          if (datePickerType === 'simple' && !invalid && !warn) {
-            return;
-          }
-
-          if (invalid) {
-            return /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-              className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
-            });
-          }
-
-          if (!invalid && warn) {
-            return /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
-              className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
-            });
-          }
-
-          return /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
-            className: "".concat(prefix, "--date-picker__icon"),
-            "aria-label": iconDescription,
-            onClick: openCalendar,
-            role: "img",
-            "aria-hidden": "true"
-          }, iconDescription && (_title || (_title = /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription))));
-        }();
-
-        var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
-          htmlFor: id,
-          className: labelClasses
-        }, labelText) : null;
-        var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
-          className: helperTextClasses
-        }, helperText) : null;
-        var error = null;
-
-        if (invalid) {
-          error = /*#__PURE__*/React__default["default"].createElement("div", {
-            className: "".concat(prefix, "--form-requirement")
-          }, invalidText);
-        } else if (warn) {
-          error = /*#__PURE__*/React__default["default"].createElement("div", {
-            className: "".concat(prefix, "--form-requirement")
-          }, warnText);
-        }
-
-        var containerClasses = cx__default["default"]("".concat(prefix, "--date-picker-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !label));
-        var input = invalid ? /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, datePickerInputProps, {
-          disabled: disabled,
-          ref: function ref(input) {
-            _this.input = input;
-          },
-          "data-invalid": true,
-          className: inputClasses
-        })) : /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
-          ref: function ref(input) {
-            _this.input = input;
-          }
-        }, other, datePickerInputProps, {
-          disabled: disabled,
-          className: inputClasses
-        }));
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: containerClasses
-        }, label, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: wrapperClasses
-        }, input, datePickerIcon), error, helper);
-      });
-    }
-  }]);
-
-  return DatePickerInput;
-}(React.Component);
-
-_rollupPluginBabelHelpers.defineProperty(DatePickerInput, "propTypes", {
+var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"];
+var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function DatePickerInput(props, ref) {
+  var _cx, _cx2, _cx4;
+
+  var datePickerType = props.datePickerType,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      helperText = props.helperText,
+      hideLabel = props.hideLabel,
+      id = props.id,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      invalidText = props.invalidText,
+      labelText = props.labelText,
+      _props$onClick = props.onClick,
+      _onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+      _props$onChange = props.onChange,
+      _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$pattern = props.pattern,
+      pattern = _props$pattern === void 0 ? '\\d{1,2}\\/\\d{1,2}\\/\\d{4}' : _props$pattern,
+      placeholder = props.placeholder,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      warn = props.warn,
+      warnText = props.warnText,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var datePickerInputProps = {
+    id: id,
+    onChange: function onChange(event) {
+      if (!disabled) {
+        _onChange(event);
+      }
+    },
+    onClick: function onClick(event) {
+      if (!disabled) {
+        _onClick(event);
+      }
+    },
+    pattern: pattern,
+    placeholder: placeholder,
+    type: type
+  };
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--date-picker-input__wrapper"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _cx));
+  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _cx2));
+  var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var inputClasses = cx__default["default"]("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _cx4));
+  var containerClasses = cx__default["default"]("".concat(prefix, "--date-picker-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !labelText));
+  var input = invalid ? /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, datePickerInputProps, {
+    disabled: disabled,
+    ref: ref,
+    "data-invalid": true,
+    className: inputClasses
+  })) : /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, datePickerInputProps, {
+    disabled: disabled,
+    className: inputClasses,
+    ref: ref
+  }));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: containerClasses
+  }, labelText && /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, input, /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
+    datePickerType: datePickerType,
+    invalid: invalid,
+    warn: warn
+  })), invalid && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, invalidText), warn && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: helperTextClasses
+  }, helperText));
+});
+DatePickerInput.propTypes = {
   /**
    * The type of the date picker:
    *
@@ -185,11 +127,6 @@ _rollupPluginBabelHelpers.defineProperty(DatePickerInput, "propTypes", {
    */
   hideLabel: PropTypes__default["default"].bool,
 
-  /**
-   * The description of the calendar icon.
-   */
-  iconDescription: deprecate["default"](PropTypes__default["default"].string, "\nThe prop `iconDescriptionInput` for DatePickerInput has been deprecated and is no longer used"),
-
   /**
    * Specify an id that uniquely identifies the `<input>`
    */
@@ -222,11 +159,6 @@ _rollupPluginBabelHelpers.defineProperty(DatePickerInput, "propTypes", {
    */
   onClick: PropTypes__default["default"].func,
 
-  /**
-   * Provide a function to be called when the input field is clicked
-   */
-  openCalendar: deprecate["default"](PropTypes__default["default"].func, "\nThe prop `openCalendar` for DatePickerInput has been deprecated and is no longer used"),
-
   /**
    * Provide a regular expression that the input value must match
    */
@@ -248,10 +180,9 @@ _rollupPluginBabelHelpers.defineProperty(DatePickerInput, "propTypes", {
   placeholder: PropTypes__default["default"].string,
 
   /**
-   * Specify the size of the Date Picker Input. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
-   * TODO V11: remove `xl` (replaced with lg)
+   * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl']),
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
 
   /**
    * Specify the type of the `<input>`
@@ -267,15 +198,57 @@ _rollupPluginBabelHelpers.defineProperty(DatePickerInput, "propTypes", {
    * Provide the text that is displayed when the control is in warning state
    */
   warnText: PropTypes__default["default"].node
-});
+};
 
-_rollupPluginBabelHelpers.defineProperty(DatePickerInput, "defaultProps", {
-  pattern: '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
-  type: 'text',
-  disabled: false,
-  invalid: false,
-  onClick: function onClick() {},
-  onChange: function onChange() {}
-});
+function DatePickerIcon(_ref) {
+  var datePickerType = _ref.datePickerType,
+      invalid = _ref.invalid,
+      warn = _ref.warn;
+  var prefix = usePrefix.usePrefix();
+
+  if (datePickerType === 'simple' && !invalid && !warn) {
+    return null;
+  }
+
+  if (invalid) {
+    return /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+      className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
+    });
+  }
+
+  if (!invalid && warn) {
+    return /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+      className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    role: "img",
+    "aria-hidden": "true"
+  });
+}
+
+DatePickerIcon.propTypes = {
+  /**
+   * The type of the date picker:
+   *
+   * * `simple` - Without calendar dropdown.
+   * * `single` - With calendar dropdown and single date.
+   * * `range` - With calendar dropdown and a date range.
+   */
+  datePickerType: PropTypes__default["default"].oneOf(['simple', 'single', 'range']),
+
+  /**
+   * Specify whether or not the input should be invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool
+};
+var DatePickerInput$1 = DatePickerInput;
 
-exports["default"] = DatePickerInput;
+exports["default"] = DatePickerInput$1;

package/lib/components/FileUploader/FileUploader.js

@@ -222,13 +222,13 @@ _rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
   accept: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
 
   /**
-   * Specify the type of the <FileUploaderButton>
+   * Specify the type of the `<FileUploaderButton>`
    */
   buttonKind: PropTypes__default["default"].oneOf(types.ButtonKinds),
 
   /**
    * Provide the label text to be read by screen readers when interacting with
-   * the <FileUploaderButton>
+   * the `<FileUploaderButton>`
    */
   buttonLabel: PropTypes__default["default"].string,
 
@@ -258,7 +258,7 @@ _rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
   labelDescription: PropTypes__default["default"].string,
 
   /**
-   * Specify the title text of this <FileUploader>
+   * Specify the title text of this `<FileUploader>`
    */
   labelTitle: PropTypes__default["default"].string,
 

package/lib/components/FileUploader/FileUploaderButton.js

@@ -191,12 +191,12 @@ FileUploaderButton.propTypes = {
   multiple: PropTypes__default["default"].bool,
 
   /**
-   * Provide a name for the underlying <input> node
+   * Provide a name for the underlying `<input>` node
    */
   name: PropTypes__default["default"].string,
 
   /**
-   * Provide an optional `onChange` hook that is called each time the <input>
+   * Provide an optional `onChange` hook that is called each time the `<input>`
    * value changes
    */
   onChange: PropTypes__default["default"].func,
@@ -208,7 +208,7 @@ FileUploaderButton.propTypes = {
   onClick: PropTypes__default["default"].func,
 
   /**
-   * Provide an accessibility role for the <FileUploaderButton>
+   * Provide an accessibility role for the `<FileUploaderButton>`
    */
   role: PropTypes__default["default"].string,
 
@@ -219,7 +219,7 @@ FileUploaderButton.propTypes = {
   size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
 
   /**
-   * Provide a custom tabIndex value for the <FileUploaderButton>
+   * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
   tabIndex: PropTypes__default["default"].number
 };

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -83,7 +83,7 @@ function FileUploaderDropContainer(_ref) {
           _name$match2 = _rollupPluginBabelHelpers.slicedToArray(_name$match, 1),
           fileExtension = _name$match2[0];
 
-      if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension)) {
+      if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension.toLowerCase())) {
         return acc.concat([curr]);
       }
 
@@ -212,12 +212,12 @@ FileUploaderDropContainer.propTypes = {
   pattern: PropTypes__default["default"].string,
 
   /**
-   * Provide an accessibility role for the <FileUploaderButton>
+   * Provide an accessibility role for the `<FileUploaderButton>`
    */
   role: PropTypes__default["default"].string,
 
   /**
-   * Provide a custom tabIndex value for the <FileUploaderButton>
+   * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
   tabIndex: PropTypes__default["default"].number
 };

package/lib/components/IconButton/index.js

@@ -50,7 +50,7 @@ var IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Icon
     kind: kind,
     ref: ref,
     size: size,
-    className: cx__default["default"]("".concat(prefix, "--btn--icon-only"), _rollupPluginBabelHelpers.defineProperty({}, className, className))
+    className: cx__default["default"]("".concat(prefix, "--btn--icon-only"), className)
   }), children));
 });
 IconButton.propTypes = {

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -116,6 +116,10 @@ var FilterableMultiSelect = /*#__PURE__*/function (_React$Component) {
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnInputValueChange", function (inputValue, _ref) {
       var type = _ref.type;
 
+      if (_this.props.onInputValueChange) {
+        _this.props.onInputValueChange(inputValue);
+      }
+
       if (type !== Downshift__default["default"].stateChangeTypes.changeInput) {
         return;
       }
@@ -516,6 +520,12 @@ _rollupPluginBabelHelpers.defineProperty(FilterableMultiSelect, "propTypes", _ro
    */
   onChange: PropTypes__default["default"].func,
 
+  /**
+   * `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
+   */
+  onInputValueChange: PropTypes__default["default"].func,
+
   /**
    * `onMenuChange` is a utility for this controlled component to communicate to a
    * consuming component that the menu was opened(`true`)/closed(`false`).

package/lib/components/MultiSelect/next/FilterableMultiSelect.js

@@ -62,6 +62,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
       itemToString = _ref.itemToString,
       light = _ref.light,
       locale = _ref.locale,
+      onInputValueChange = _ref.onInputValueChange,
       open = _ref.open,
       onChange = _ref.onChange,
       onMenuChange = _ref.onMenuChange,
@@ -180,6 +181,10 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
   function handleOnInputValueChange(inputValue, _ref2) {
     var type = _ref2.type;
 
+    if (onInputValueChange) {
+      onInputValueChange(inputValue);
+    }
+
     if (type !== Downshift__default["default"].stateChangeTypes.changeInput) {
       return;
     }
@@ -474,6 +479,12 @@ FilterableMultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollu
    */
   onChange: PropTypes__default["default"].func,
 
+  /**
+   * `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
+   */
+  onInputValueChange: PropTypes__default["default"].func,
+
   /**
    * `onMenuChange` is a utility for this controlled component to communicate to a
    * consuming component that the menu was opened(`true`)/closed(`false`).

package/lib/components/Slider/Slider.js

@@ -250,10 +250,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
 
       var validity = evt.target.checkValidity();
+      var value = evt.target.value;
 
       _this.setState({
         isValid: validity
       });
+
+      _this.props.onBlur({
+        value: value
+      });
     });
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "calcValue", function (_ref) {
@@ -622,6 +627,12 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
    */
   name: PropTypes__default["default"].string,
 
+  /**
+   * Provide an optional function to be called when the input element
+   * loses focus
+   */
+  onBlur: PropTypes__default["default"].func,
+
   /**
    * The callback to get notified of change in value.
    */

package/lib/components/StructuredList/next/StructuredList.js

@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "selection", "className", "ariaLabel"],
+var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush"],
     _excluded2 = ["children", "className"],
     _excluded3 = ["children", "className"],
     _excluded4 = ["onKeyDown", "children", "className", "head"],
@@ -32,14 +32,18 @@ var _excluded = ["children", "selection", "className", "ariaLabel"],
 var GridSelectedRowStateContext = /*#__PURE__*/React__default["default"].createContext(null);
 var GridSelectedRowDispatchContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListWrapper(props) {
+  var _classNames;
+
   var children = props.children,
       selection = props.selection,
       className = props.className,
       ariaLabel = props.ariaLabel,
+      isCondensed = props.isCondensed,
+      isFlush = props.isFlush,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--structured-list--selection"), selection));
+  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));
 
   var _React$useState = React__default["default"].useState(null),
       _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
@@ -51,7 +55,7 @@ function StructuredListWrapper(props) {
   }, /*#__PURE__*/React__default["default"].createElement(GridSelectedRowDispatchContext.Provider, {
     value: setSelectedRow
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    role: "grid",
+    role: "table",
     className: classes
   }, other, {
     "aria-label": ariaLabel
@@ -73,6 +77,16 @@ StructuredListWrapper.propTypes = {
    */
   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, default is false
+   */
+  isFlush: PropTypes__default["default"].bool,
+
   /**
    * Specify whether your StructuredListWrapper should have selections
    */
@@ -80,6 +94,8 @@ StructuredListWrapper.propTypes = {
 };
 StructuredListWrapper.defaultProps = {
   selection: false,
+  isCondensed: false,
+  isFlush: false,
   ariaLabel: 'Structured list section'
 };
 function StructuredListHead(props) {

package/lib/components/UIShell/SideNav.js

@@ -131,7 +131,7 @@ var SideNav = /*#__PURE__*/React__default["default"].forwardRef(function SideNav
   }
 
   var isSideNavCollapsed = useMatchMedia.useMatchMedia("(max-width: 1055px)");
-  var ariaHidden = expanded === false && isSideNavCollapsed;
+  var ariaHidden = isRail ? false : expanded === false && isSideNavCollapsed;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isFixedNav ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions