@carbon/react 1.14.0 → 1.15.0-rc.0

package/es/components/ContainedList/ContainedList.js

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useId } from '../../internal/useId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var variants = ['on-page', 'disclosed'];
+
+function ContainedList(_ref) {
+  var action = _ref.action,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? variants[0] : _ref$kind,
+      label = _ref.label;
+  var labelId = "".concat(useId('contained-list'), "-header");
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--contained-list"), "".concat(prefix, "--contained-list--").concat(kind), className);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classes
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--contained-list__header")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    id: labelId,
+    className: "".concat(prefix, "--contained-list__label")
+  }, label), action && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--contained-list__action")
+  }, action)), /*#__PURE__*/React__default.createElement("ul", {
+    "aria-labelledby": labelId
+  }, children));
+}
+
+ContainedList.propTypes = {
+  /**
+   * A slot for a possible interactive element to render.
+   */
+  action: PropTypes.node,
+
+  /**
+   * A collection of ContainedListItems to be rendered in the ContainedList
+   */
+  children: PropTypes.node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The kind of ContainedList you want to display
+   */
+  kind: PropTypes.oneOf(variants),
+
+  /**
+   * A label describing the contained list.
+   */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+};
+
+export { ContainedList as default };

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -0,0 +1,76 @@
+/**
+ * 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.
+ */
+
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { usePrefix } from '../../../internal/usePrefix.js';
+
+function ContainedListItem(_ref) {
+  var _classNames;
+
+  var action = _ref.action,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onClick = _ref.onClick,
+      IconElement = _ref.renderIcon;
+  var prefix = usePrefix();
+  var isClickable = onClick !== undefined;
+  var classes = cx("".concat(prefix, "--contained-list-item"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--contained-list-item--clickable"), isClickable), _defineProperty(_classNames, "".concat(prefix, "--contained-list-item--with-icon"), IconElement), _defineProperty(_classNames, "".concat(prefix, "--contained-list-item--with-action"), action), _classNames));
+  var content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, IconElement && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__icon")
+  }, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("div", null, children));
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classes
+  }, isClickable ? /*#__PURE__*/React__default.createElement("button", {
+    className: "".concat(prefix, "--contained-list-item__content"),
+    type: "button",
+    disabled: disabled,
+    onClick: onClick
+  }, content) : /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__content")
+  }, content), action && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--contained-list-item__action")
+  }, action));
+}
+
+ContainedListItem.propTypes = {
+  /**
+   * A slot for a possible interactive element to render within the item.
+   */
+  action: PropTypes.node,
+
+  /**
+   * The content of this item. Must not contain any interactive elements. Use props.action to include those.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Whether this item is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide an optional function to be called when the item is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide an optional icon to render in front of the item's content.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+
+export { ContainedListItem as default };

package/es/components/ContainedList/index.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+import ContainedList from './ContainedList.js';
+export { default } from './ContainedList.js';
+import ContainedListItem from './ContainedListItem/ContainedListItem.js';
+export { default as ContainedListItem } from './ContainedListItem/ContainedListItem.js';
+
+ContainedList.ContainedListItem = ContainedListItem;

package/es/components/DataTable/DataTable.js

@@ -19,7 +19,7 @@ import { defaultSortRow } from './tools/sorting.js';
 import setupGetInstanceId from './tools/instanceId.js';
 
 var _excluded = ["header", "onClick", "isSortable"],
-    _excluded2 = ["onClick"],
+    _excluded2 = ["onClick", "onExpand"],
     _excluded3 = ["row", "onClick"],
     _excluded4 = ["onClick", "row"];
 
@@ -97,6 +97,7 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getExpandHeaderProps", function () {
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           onClick = _ref2.onClick,
+          onExpand = _ref2.onExpand,
           rest = _objectWithoutProperties(_ref2, _excluded2);
 
       var t = _this.props.translateWithId;
@@ -113,7 +114,7 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
         isExpanded: isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
-        onExpand: composeEventHandlers([_this.handleOnExpandAll, onClick ? _this.handleOnExpandHeaderClick(onClick, {
+        onExpand: composeEventHandlers([_this.handleOnExpandAll, onExpand, onClick ? _this.handleOnExpandHeaderClick(onClick, {
           isExpanded: isExpanded
         }) : null])
       });

package/es/components/DataTable/state/getDerivedStateFromProps.js

@@ -44,6 +44,9 @@ var getDerivedStateFromProps = function getDerivedStateFromProps(props, prevStat
     state.rowIds = _rowIds;
   }
 
+  state.isExpandedAll = state.rowIds.every(function (id) {
+    return state.rowsById[id].isExpanded === true;
+  });
   return state;
 };
 

package/es/components/Dropdown/Dropdown.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useState, useRef } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -15,6 +15,7 @@ import '../ListBox/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
@@ -60,6 +61,9 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
 
   var prefix = usePrefix();
 
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var selectProps = _objectSpread2(_objectSpread2({}, downshiftProps), {}, {
     items: items,
     itemToString: itemToString,
@@ -85,19 +89,26 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
   var enabled = useFeatureFlag('enable-v11-release');
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
   var className = cx("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
   var titleClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var wrapperClasses = cx("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _cx4)); // needs to be Capitalized for react to render it correctly
+  var wrapperClasses = cx("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused && !isOpen), _cx4)); // needs to be Capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   var toggleButtonProps = getToggleButtonProps();
-  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  var helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
     className: helperClasses
   }, helperText) : null;
 
   function onSelectedItemChange(_ref2) {
     var selectedItem = _ref2.selectedItem;
+    setIsFocused(false);
 
     if (onChange) {
       onChange({
@@ -109,11 +120,18 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
   var menuItemOptionRefs = useRef(items.map(function (_) {
     return /*#__PURE__*/React__default.createRef();
   }));
+
+  var handleFocus = function handleFocus(evt) {
+    setIsFocused(evt.type === 'focus' ? true : false);
+  };
+
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
     className: titleClasses
   }, getLabelProps()), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
+    onFocus: handleFocus,
+    onBlur: handleFocus,
     "aria-label": ariaLabel,
     size: size,
     className: className,

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -5,13 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef } from 'react';
 import cx from 'classnames';
 import Search from '../Search/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { composeEventHandlers } from '../../tools/events.js';
+
+var _excluded = ["onBlur", "onChange", "onExpand", "onFocus"];
+
+function ExpandableSearch(_ref) {
+  var onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onExpand = _ref.onExpand,
+      onFocus = _ref.onFocus,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-function ExpandableSearch(props) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       expanded = _useState2[0],
@@ -39,20 +48,24 @@ function ExpandableSearch(props) {
     }
   }
 
+  function handleChange(evt) {
+    setHasContent(evt.target.value !== '');
+  }
+
+  function handleExpand() {
+    var _searchRef$current$fo, _searchRef$current;
+
+    (_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
+  }
+
   var classes = cx("".concat(prefix, "--search--expandable"), _defineProperty({}, "".concat(prefix, "--search--expanded"), expanded), props.className);
   return /*#__PURE__*/React__default.createElement(Search, _extends({}, props, {
     ref: searchRef,
     className: classes,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onChange: function onChange(event) {
-      setHasContent(event.target.value !== '');
-    },
-    onExpand: function onExpand() {
-      var _searchRef$current$fo, _searchRef$current;
-
-      (_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
-    }
+    onFocus: composeEventHandlers([onFocus, handleFocus]),
+    onBlur: composeEventHandlers([onBlur, handleBlur]),
+    onChange: composeEventHandlers([onChange, handleChange]),
+    onExpand: composeEventHandlers([onExpand, handleExpand])
   }));
 }
 

package/es/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className"];
+
+var FluidDropdownSkeleton = function FluidDropdownSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var wrapperClasses = cx(className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__wrapper--fluid")
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  })));
+};
+
+FluidDropdownSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+var FluidDropdownSkeleton$1 = FluidDropdownSkeleton;
+
+export { FluidDropdownSkeleton$1 as default };

package/es/components/FluidDropdown/FluidDropdown.js

@@ -0,0 +1,140 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import Dropdown from '../Dropdown/Dropdown.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className", "isCondensed"];
+var FluidDropdown = /*#__PURE__*/React__default.forwardRef(function FluidDropdown(_ref, ref) {
+  var className = _ref.className,
+      isCondensed = _ref.isCondensed,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--list-box__wrapper--fluid"), className, _defineProperty({}, "".concat(prefix, "--list-box__wrapper--fluid--condensed"), isCondensed));
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(Dropdown, _extends({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidDropdown.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+   * from their collection that are pre-selected
+   */
+  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Specify if the `FluidDropdown` should render its menu items in condensed mode
+   */
+  isCondensed: PropTypes.bool,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes.func,
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list.
+   */
+  itemToString: PropTypes.func,
+
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: PropTypes.array.isRequired,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occurring.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem: PropTypes.func,
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: PropTypes.node,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+var FluidDropdown$1 = FluidDropdown;
+
+export { FluidDropdown$1 as default };

package/es/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className"];
+
+function FluidTextAreaSkeleton(_ref) {
+  var className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--form-item ").concat(prefix, "--text-area--fluid__skeleton"), className)
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-area")
+  })));
+}
+
+FluidTextAreaSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string
+};
+
+export { FluidTextAreaSkeleton as default };

package/es/components/FluidTextInput/FluidTextInput.Skeleton.js

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className"];
+
+function FluidTextInputSkeleton(_ref) {
+  var className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--form-item ").concat(prefix, "--text-input--fluid__skeleton"), className)
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  })));
+}
+
+FluidTextInputSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string
+};
+
+export { FluidTextInputSkeleton as default };

package/es/components/ListBox/ListBox.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,6 +16,7 @@ import ListBoxMenu from './ListBoxMenu.js';
 import ListBoxMenuIcon from './ListBoxMenuIcon.js';
 import ListBoxMenuItem from './ListBoxMenuItem.js';
 import ListBoxSelection from './ListBoxSelection.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["children", "className", "disabled", "type", "size", "invalid", "invalidText", "warn", "warnText", "light", "isOpen"];
 
@@ -52,15 +53,21 @@ var ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref)
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var showWarning = !invalid && warn;
-  var className = cx((_cx = {}, _defineProperty(_cx, containerClassName, !!containerClassName), _defineProperty(_cx, "".concat(prefix, "--list-box"), true), _defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
+  var className = cx((_cx = {}, _defineProperty(_cx, containerClassName, !!containerClassName), _defineProperty(_cx, "".concat(prefix, "--list-box"), true), _defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _defineProperty(_cx, "".concat(prefix, "--list-box--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: className,
     ref: ref,
     onKeyDown: handleOnKeyDown,
     onClick: handleClick,
     "data-invalid": invalid || undefined
-  }), children), invalid ? /*#__PURE__*/React__default.createElement("div", {
+  }), children), isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--list-box__divider")
+  }), invalid ? /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--form-requirement")
   }, invalidText) : null, showWarning ? /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--form-requirement")