@carbon/react 1.5.0 → 1.7.0-rc.0

package/es/components/UIShell/SideNavMenu.js

@@ -5,119 +5,84 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import SideNavIcon from './SideNavIcon.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
 var _ChevronDown;
-var SideNavMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(SideNavMenu, _React$Component);
-
-  var _super = _createSuper(SideNavMenu);
-
-  function SideNavMenu(props) {
-    var _this;
-
-    _classCallCheck(this, SideNavMenu);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "handleToggleExpand", function () {
-      _this.setState(function (state) {
-        return {
-          isExpanded: !state.isExpanded
-        };
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      if (match(event, Escape)) {
-        _this.setState(function () {
-          return {
-            isExpanded: false
-          };
-        });
-      }
-    });
-
-    _this.state = {
-      isExpanded: props.defaultExpanded || false,
-      wasPreviouslyExpanded: props.defaultExpanded || false
-    };
-    return _this;
+var SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(props, ref) {
+  var _cx;
+
+  var customClassName = props.className,
+      children = props.children,
+      _props$defaultExpande = props.defaultExpanded,
+      defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
+      _props$isActive = props.isActive,
+      isActive = _props$isActive === void 0 ? false : _props$isActive,
+      _props$large = props.large,
+      large = _props$large === void 0 ? false : _props$large,
+      IconElement = props.renderIcon,
+      isSideNavExpanded = props.isSideNavExpanded,
+      title = props.title;
+  var prefix = usePrefix();
+
+  var _useState = useState(defaultExpanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      isExpanded = _useState2[0],
+      setIsExpanded = _useState2[1];
+
+  var _useState3 = useState(defaultExpanded),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevExpanded = _useState4[0],
+      setPrevExpanded = _useState4[1];
+
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild(children) && !isExpanded), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+
+  if (isSideNavExpanded === false && isExpanded === true) {
+    setIsExpanded(false);
+    setPrevExpanded(true);
+  } else if (isSideNavExpanded === true && prevExpanded === true) {
+    setIsExpanded(true);
+    setPrevExpanded(false);
   }
 
-  _createClass(SideNavMenu, [{
-    key: "render",
-    value: function render() {
-      var _cx;
-
-      var prefix = this.context;
-      var _this$props = this.props,
-          buttonRef = _this$props.buttonRef,
-          customClassName = _this$props.className,
-          children = _this$props.children,
-          IconElement = _this$props.renderIcon,
-          isActive = _this$props.isActive,
-          title = _this$props.title,
-          large = _this$props.large;
-      var isExpanded = this.state.isExpanded;
-      var hasActiveChild;
-
-      if (children) {
-        // if we have children, either a single or multiple, find if it is active
-        hasActiveChild = Array.isArray(children) ? children.some(function (child) {
-          if (child.props && (child.props.isActive === true || child.props['aria-current'])) {
-            return true;
-          }
-
-          return false;
-        }) : children.props && (children.props.isActive === true || children.props['aria-current']);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React__default.createElement("li", {
+      className: className,
+      onKeyDown: function onKeyDown(event) {
+        if (match(event, Escape)) {
+          setIsExpanded(false);
+        }
       }
-
-      var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild && !isExpanded), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _defineProperty(_cx, customClassName, !!customClassName), _cx));
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        React__default.createElement("li", {
-          className: className,
-          onKeyDown: this.handleKeyDown
-        }, /*#__PURE__*/React__default.createElement("button", {
-          "aria-expanded": isExpanded,
-          className: "".concat(prefix, "--side-nav__submenu"),
-          onClick: this.handleToggleExpand,
-          ref: buttonRef,
-          type: "button"
-        }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("span", {
-          className: "".concat(prefix, "--side-nav__submenu-title")
-        }, title), /*#__PURE__*/React__default.createElement(SideNavIcon, {
-          className: "".concat(prefix, "--side-nav__submenu-chevron"),
-          small: true
-        }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, {
-          size: 20
-        })))), /*#__PURE__*/React__default.createElement("ul", {
-          className: "".concat(prefix, "--side-nav__menu")
-        }, children))
-      );
-    }
-  }]);
-
-  return SideNavMenu;
-}(React__default.Component);
-
-_defineProperty(SideNavMenu, "contextType", PrefixContext);
-
-_defineProperty(SideNavMenu, "propTypes", {
-  buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-
+    }, /*#__PURE__*/React__default.createElement("button", {
+      "aria-expanded": isExpanded,
+      className: "".concat(prefix, "--side-nav__submenu"),
+      onClick: function onClick() {
+        setIsExpanded(!isExpanded);
+      },
+      ref: ref,
+      type: "button"
+    }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(prefix, "--side-nav__submenu-title")
+    }, title), /*#__PURE__*/React__default.createElement(SideNavIcon, {
+      className: "".concat(prefix, "--side-nav__submenu-chevron"),
+      small: true
+    }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, {
+      size: 20
+    })))), /*#__PURE__*/React__default.createElement("ul", {
+      className: "".concat(prefix, "--side-nav__menu")
+    }, children))
+  );
+});
+SideNavMenu.propTypes = {
   /**
    * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
    */
@@ -161,38 +126,35 @@ _defineProperty(SideNavMenu, "propTypes", {
    * Provide the text for the overall menu name
    */
   title: PropTypes.string.isRequired
-});
+};
+
+function hasActiveChild(children) {
+  // if we have children, either a single or multiple, find if it is active
+  if (Array.isArray(children)) {
+    return children.some(function (child) {
+      if (!child.props) {
+        return false;
+      }
 
-_defineProperty(SideNavMenu, "defaultProps", {
-  defaultExpanded: false,
-  isActive: false,
-  large: false
-});
+      if (child.props.isActive === true) {
+        return true;
+      }
 
-_defineProperty(SideNavMenu, "getDerivedStateFromProps", function (props, state) {
-  var derivedState = null;
-
-  if (props.isSideNavExpanded === false && state.isExpanded === true) {
-    derivedState = {
-      isExpanded: props.isSideNavExpanded,
-      wasPreviouslyExpanded: true
-    };
-  } else if (props.isSideNavExpanded === true && state.wasPreviouslyExpanded === true) {
-    derivedState = {
-      isExpanded: props.isSideNavExpanded,
-      wasPreviouslyExpanded: false
-    };
+      if (child.props['aria-current']) {
+        return true;
+      }
+
+      return false;
+    });
   }
 
-  return derivedState;
-});
+  if (children.props) {
+    if (children.props.isActive === true || children.props['aria-current']) {
+      return true;
+    }
+  }
 
-var SideNavMenuForwardRef = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(SideNavMenu, _extends({}, props, {
-    buttonRef: ref
-  }));
-});
-SideNavMenuForwardRef.displayName = 'SideNavMenu';
-var SideNavMenuClassic = SideNavMenuForwardRef;
+  return false;
+}
 
-export { SideNavMenu, SideNavMenuClassic as default };
+export { SideNavMenu };

package/es/components/UIShell/SideNavSwitcher.js

@@ -10,9 +10,11 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useId } from '../../internal/useId.js';
 
 var _ChevronDown;
 var SideNavSwitcher = /*#__PURE__*/React__default.forwardRef(function SideNavSwitcher(props, ref) {
+  var id = useId('side-nav-switcher');
   var prefix = usePrefix();
   var customClassName = props.className,
       labelText = props.labelText,
@@ -23,10 +25,10 @@ var SideNavSwitcher = /*#__PURE__*/React__default.forwardRef(function SideNavSwi
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
   }, /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: "side-nav-switcher",
+    htmlFor: id,
     className: "".concat(prefix, "--assistive-text")
   }, labelText), /*#__PURE__*/React__default.createElement("select", {
-    id: "carbon-side-nav-switcher",
+    id: id,
     className: "".concat(prefix, "--side-nav__select"),
     defaultValue: "",
     onBlur: onChange,

package/es/components/UIShell/SkipToContent.js

@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _excluded = ["children", "className", "href", "tabIndex"];
 
-var SkipToContent = function SkipToContent(_ref) {
+function SkipToContent(_ref) {
   var children = _ref.children,
       customClassName = _ref.className,
       href = _ref.href,
@@ -27,7 +27,7 @@ var SkipToContent = function SkipToContent(_ref) {
     href: href,
     tabIndex: tabIndex
   }), children);
-};
+}
 
 SkipToContent.propTypes = {
   /**
@@ -52,6 +52,5 @@ SkipToContent.defaultProps = {
   href: '#main-content',
   tabIndex: '0'
 };
-var SkipToContent$1 = SkipToContent;
 
-export { SkipToContent$1 as default };
+export { SkipToContent as default };

package/es/index.js

@@ -79,7 +79,8 @@ export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as TileGroup } from './components/TileGroup/index.js';
 export { default as TimePicker } from './components/TimePicker/index.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/index.js';
-export { default as Toggle } from './components/Toggle/index.js';
+export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
+export { Toggle } from './components/Toggle/Toggle.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
@@ -95,14 +96,12 @@ export { default as SearchSkeleton } from './components/Search/Search.Skeleton.j
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
-export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
-export { HeaderNavigation, SideNavMenu } from './components/UIShell/index.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';
 export { IconButton } from './components/IconButton/index.js';
-export { Layer } from './components/Layer/index.js';
+export { Layer, useLayer } from './components/Layer/index.js';
 import './components/Menu/index.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
 export { Popover, PopoverContent } from './components/Popover/index.js';
@@ -110,6 +109,7 @@ export { HStack, VStack } from './components/Stack/index.js';
 export { DefinitionTooltip } from './components/Tooltip/next/DefinitionTooltip.js';
 import './components/TreeView/index.js';
 export { GlobalTheme, Theme, useTheme } from './components/Theme/index.js';
+export { usePrefix } from './internal/usePrefix.js';
 export { default as AspectRatio } from './components/AspectRatio/AspectRatio.js';
 export { default as Filename } from './components/FileUploader/Filename.js';
 export { default as FileUploaderButton } from './components/FileUploader/FileUploaderButton.js';
@@ -117,7 +117,14 @@ export { default as FileUploaderDropContainer } from './components/FileUploader/
 export { default as FileUploaderItem } from './components/FileUploader/FileUploaderItem.js';
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
+export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
+export { default as HeaderName } from './components/UIShell/HeaderName.js';
+export { default as SkipToContent } from './components/UIShell/SkipToContent.js';
 export { default as SideNavDivider } from './components/UIShell/SideNavDivider.js';
+export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js';
+export { default as SideNavIcon } from './components/UIShell/SideNavIcon.js';
+export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
+export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
 export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as unstable_MenuDivider } from './components/Menu/MenuDivider.js';
 export { default as unstable_MenuGroup } from './components/Menu/MenuGroup.js';
@@ -170,24 +177,19 @@ export { default as HeaderContainer } from './components/UIShell/HeaderContainer
 export { default as HeaderGlobalAction } from './components/UIShell/HeaderGlobalAction.js';
 export { default as HeaderGlobalBar } from './components/UIShell/HeaderGlobalBar.js';
 export { default as HeaderMenu } from './components/UIShell/HeaderMenu.js';
-export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
 export { default as HeaderMenuItem } from './components/UIShell/HeaderMenuItem.js';
-export { default as HeaderName } from './components/UIShell/HeaderName.js';
+export { HeaderNavigation } from './components/UIShell/HeaderNavigation.js';
 export { default as HeaderPanel } from './components/UIShell/HeaderPanel.js';
 export { default as HeaderSideNavItems } from './components/UIShell/HeaderSideNavItems.js';
 export { default as Switcher } from './components/UIShell/Switcher.js';
 export { default as SwitcherItem } from './components/UIShell/SwitcherItem.js';
 export { default as SwitcherDivider } from './components/UIShell/SwitcherDivider.js';
-export { default as SkipToContent } from './components/UIShell/SkipToContent.js';
 export { default as SideNav } from './components/UIShell/SideNav.js';
 export { default as SideNavDetails } from './components/UIShell/SideNavDetails.js';
-export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js';
 export { default as SideNavHeader } from './components/UIShell/SideNavHeader.js';
-export { default as SideNavIcon } from './components/UIShell/SideNavIcon.js';
-export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
 export { default as SideNavItems } from './components/UIShell/SideNavItems.js';
 export { default as SideNavLink } from './components/UIShell/SideNavLink.js';
-export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
+export { SideNavMenu } from './components/UIShell/SideNavMenu.js';
 export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem.js';
 export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
 export { Stack } from './components/Stack/Stack.js';

package/lib/components/ComposedModal/ComposedModal.js

@@ -233,7 +233,8 @@ var ComposedModal = /*#__PURE__*/function (_Component) {
         onClick: this.handleClick,
         onKeyDown: this.handleKeyDown,
         onTransitionEnd: open ? this.handleTransitionEnd : undefined,
-        className: modalClass
+        className: modalClass,
+        tabIndex: "-1"
       }), /*#__PURE__*/React__default["default"].createElement("span", {
         ref: this.startSentinel,
         tabIndex: "0",

package/lib/components/ComposedModal/next/ComposedModal.js

@@ -204,7 +204,8 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     onBlur: handleBlur,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    className: modalClass
+    className: modalClass,
+    tabIndex: "-1"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: containerClass,
     role: "dialog",

package/lib/components/DataTable/TableToolbarSearch.js

@@ -23,7 +23,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "placeholder", "labelText", "expanded", "defaultExpanded", "defaultValue", "disabled", "onExpand", "persistent", "id", "onBlur", "onFocus"];
+var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "placeholder", "labelText", "expanded", "defaultExpanded", "defaultValue", "disabled", "onExpand", "persistent", "id", "onBlur", "onFocus", "size"];
 var getInstanceId = instanceId["default"]();
 var translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
@@ -53,6 +53,8 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
       id = _ref.id,
       onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'lg' : _ref$size,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var _useRef = React.useRef(expandedProp !== undefined),
@@ -136,7 +138,8 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
     } : handleOnFocus,
     onBlur: onBlur ? function (event) {
       return onBlur(event, handleExpand);
-    } : handleOnBlur
+    } : handleOnBlur,
+    size: size
   }, rest));
 };
 
@@ -222,6 +225,11 @@ TableToolbarSearch.propTypes = {
    */
   searchContainerClass: PropTypes__default["default"].string,
 
+  /**
+   * Specify the size of the Search
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
   /**
    * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
    */

package/lib/components/DatePicker/DatePicker.js

@@ -31,7 +31,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
 
-var _excluded = ["allowInput", "appendTo", "children", "className", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
+var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
 
 index["default"].en.weekdays.shorthand.forEach(function (_day, index$1) {
   var currentDay = index["default"].en.weekdays.shorthand;
@@ -163,6 +163,8 @@ function DatePicker(_ref) {
       appendTo = _ref.appendTo,
       children = _ref.children,
       className = _ref.className,
+      _ref$closeOnSelect = _ref.closeOnSelect,
+      closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
       _ref$dateFormat = _ref.dateFormat,
       dateFormat = _ref$dateFormat === void 0 ? 'm/d/Y' : _ref$dateFormat,
       datePickerType = _ref.datePickerType,
@@ -262,6 +264,7 @@ function DatePicker(_ref) {
       inline: inline !== null && inline !== void 0 ? inline : false,
       disableMobile: true,
       defaultDate: value,
+      closeOnSelect: closeOnSelect,
       mode: datePickerType,
       allowInput: allowInput !== null && allowInput !== void 0 ? allowInput : true,
       dateFormat: dateFormat,
@@ -322,7 +325,7 @@ function DatePicker(_ref) {
       // error with IBM Equal Access Accessibility Checker so we add an aria
       // role to the container div.
 
-      calendar.calendarContainer.setAttribute('role', 'region'); // IBM EAAC requires an aria-label on a role='region'
+      calendar.calendarContainer.setAttribute('role', 'application'); // IBM EAAC requires an aria-label on a role='region'
 
       calendar.calendarContainer.setAttribute('aria-label', 'calendar-container');
     }
@@ -386,9 +389,10 @@ function DatePicker(_ref) {
   }, [inline]);
   React.useEffect(function () {
     if (calendarRef.current) {
-      calendarRef.current.set({
-        value: value
-      });
+      if (value !== undefined) {
+        calendarRef.current.setDate(value);
+      }
+
       updateClassNames(calendarRef.current, prefix); //for simple date picker w/o calendar; initial mount may not have value
     } else if (!calendarRef.current && value) {
       startInputField.current.value = value;
@@ -423,6 +427,11 @@ DatePicker.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
+  /**
+   * flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
+   */
+  closeOnSelect: PropTypes__default["default"].bool,
+
   /**
    * The date format.
    */

package/lib/components/FileUploader/FileUploader.js

@@ -253,7 +253,7 @@ _rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
   iconDescription: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].string.isRequired : PropTypes__default["default"].string,
 
   /**
-   * Specify the description text of this <FileUploader>
+   * Specify the description text of this `<FileUploader>`
    */
   labelDescription: PropTypes__default["default"].string,
 

package/lib/components/FileUploader/FileUploaderButton.js

@@ -175,7 +175,7 @@ FileUploaderButton.propTypes = {
   disabled: PropTypes__default["default"].bool,
 
   /**
-   * Provide a unique id for the underlying <input> node
+   * Provide a unique id for the underlying `<input>` node
    */
   id: PropTypes__default["default"].string,
 

package/lib/components/FileUploader/Filename.js

@@ -78,7 +78,7 @@ Filename.propTypes = {
   status: PropTypes__default["default"].oneOf(['edit', 'complete', 'uploading']),
 
   /**
-   * Provide a custom tabIndex value for the <Filename>
+   * Provide a custom tabIndex value for the `<Filename>`
    */
   tabIndex: PropTypes__default["default"].string
 };

package/lib/components/Form/Form.js

@@ -32,7 +32,7 @@ var Form = function Form(_ref) {
   var classNames = cx__default["default"]("".concat(prefix, "--form"), className);
   return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
     className: classNames
-  }, other), ' ', children, ' ');
+  }, other), children);
 };
 
 Form.propTypes = {

package/lib/components/FormGroup/FormGroup.js

@@ -31,7 +31,7 @@ var FormGroup = function FormGroup(_ref) {
       className = _ref.className,
       message = _ref.message,
       messageText = _ref.messageText,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
   var classNamesFieldset = cx__default["default"]("".concat(prefix, "--fieldset"), className);
@@ -39,11 +39,11 @@ var FormGroup = function FormGroup(_ref) {
     'data-invalid': ''
   }, {
     className: classNamesFieldset
-  }, other, {
-    "aria-labelledby": other['aria-labelledby'] || legendId
+  }, rest, {
+    "aria-labelledby": rest['aria-labelledby'] || legendId
   }), /*#__PURE__*/React__default["default"].createElement("legend", {
     className: "".concat(prefix, "--label"),
-    id: legendId || other['aria-labelledby']
+    id: legendId || rest['aria-labelledby']
   }, legendText), children, message ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--form__requirements")
   }, messageText) : null);

package/lib/components/FormItem/FormItem.js

@@ -23,17 +23,17 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "children"];
 
-var FormItem = function FormItem(_ref) {
+function FormItem(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
   var classNames = cx__default["default"]("".concat(prefix, "--form-item"), className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames
-  }, other), children);
-};
+  }, rest), children);
+}
 
 FormItem.propTypes = {
   /**
@@ -46,6 +46,5 @@ FormItem.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var FormItem$1 = FormItem;
 
-exports["default"] = FormItem$1;
+exports["default"] = FormItem;

package/lib/components/Layer/index.js

@@ -25,6 +25,18 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _excluded = ["as", "className", "children", "level"];
 var levels = ['one', 'two', 'three'];
 var MAX_LEVEL = levels.length - 1;
+/**
+ * A custom hook that will return information about the current layer. A common
+ * field to pull from this is the `level` for the layer that the component that
+ * calls this hook is currently in
+ */
+
+function useLayer() {
+  var level = React__default["default"].useContext(LayerContext.LayerContext);
+  return {
+    level: level
+  };
+}
 function Layer(_ref) {
   var _ref$as = _ref.as,
       BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
@@ -70,3 +82,4 @@ Layer.propTypes = {
 };
 
 exports.Layer = Layer;
+exports.useLayer = useLayer;

package/lib/components/Link/Link.js

@@ -28,9 +28,12 @@ var Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_ref,
   var children = _ref.children,
       customClassName = _ref.className,
       href = _ref.href,
-      disabled = _ref.disabled,
-      inline = _ref.inline,
-      visited = _ref.visited,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      _ref$visited = _ref.visited,
+      visited = _ref$visited === void 0 ? false : _ref$visited,
       Icon = _ref.renderIcon,
       size = _ref.size,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);