@carbon/react 1.6.0-rc.0 → 1.6.0

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

@@ -98,11 +98,10 @@ export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.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';
@@ -118,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';
@@ -171,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/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/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/OverflowMenu/OverflowMenu.js

@@ -539,7 +539,6 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
   onOpen: function onOpen() {},
   menuOffset: getMenuOffset,
   menuOffsetFlip: getMenuOffset,
-  light: false,
   selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
 });
 

package/lib/components/UIShell/HeaderMenu.js

@@ -173,7 +173,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy
       };
-      var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _cx)); // Notes on eslint comments and based on the examples in:
+      var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx)); // Notes on eslint comments and based on the examples in:
       // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
       // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
       // users

package/lib/components/UIShell/HeaderMenuButton.js

@@ -27,7 +27,7 @@ var _Menu, _Close;
 
 var _excluded = ["aria-label", "aria-labelledby", "className", "renderMenuIcon", "renderCloseIcon", "onClick", "isActive", "isCollapsible"];
 
-var HeaderMenuButton = function HeaderMenuButton(_ref) {
+function HeaderMenuButton(_ref) {
   var _cx;
 
   var ariaLabel = _ref['aria-label'],
@@ -58,7 +58,7 @@ var HeaderMenuButton = function HeaderMenuButton(_ref) {
     type: "button",
     onClick: onClick
   }), isActive ? closeIcon : menuIcon);
-};
+}
 
 HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
   /**
@@ -74,6 +74,5 @@ HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPlug
    */
   onClick: PropTypes__default["default"].func
 });
-var HeaderMenuButton$1 = HeaderMenuButton;
 
-exports["default"] = HeaderMenuButton$1;
+exports["default"] = HeaderMenuButton;

package/lib/components/UIShell/HeaderName.js

@@ -24,7 +24,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _excluded = ["children", "className", "prefix", "href"];
 
-var HeaderName = function HeaderName(_ref) {
+function HeaderName(_ref) {
   var children = _ref.children,
       customClassName = _ref.className,
       prefix = _ref.prefix,
@@ -39,7 +39,7 @@ var HeaderName = function HeaderName(_ref) {
   }), prefix && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(selectorPrefix, "--header__name--prefix")
   }, prefix), "\xA0"), children);
-};
+}
 
 HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
   /**
@@ -67,6 +67,5 @@ HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabe
 HeaderName.defaultProps = {
   prefix: 'IBM'
 };
-var HeaderName$1 = HeaderName;
 
-exports["default"] = HeaderName$1;
+exports["default"] = HeaderName;

package/lib/components/UIShell/HeaderNavigation.js

@@ -24,75 +24,29 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
 
-var HeaderNavigation = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(HeaderNavigation, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(HeaderNavigation);
-
-  function HeaderNavigation(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, HeaderNavigation);
-
-    _this = _super.call(this, props);
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleItemRef", function (index) {
-      return function (node) {
-        _this.items[index] = node;
-      };
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_renderNavItem", function (child, index) {
-      if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          ref: _this.handleItemRef(index)
-        });
-      }
-    });
-
-    _this.items = [];
-    _this.state = {
-      selectedIndex: 0
-    };
-    return _this;
-  }
-
-  _rollupPluginBabelHelpers.createClass(HeaderNavigation, [{
-    key: "render",
-    value: function render() {
-      var prefix = this.context;
-
-      var _this$props = this.props,
-          ariaLabel = _this$props['aria-label'],
-          ariaLabelledBy = _this$props['aria-labelledby'],
-          children = _this$props.children,
-          customClassName = _this$props.className,
-          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      var className = cx__default["default"]("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
-      // so when we spread that should be the one that is applied to the node
-
-      var accessibilityLabel = {
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy
-      };
-      return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
-        className: className
-      }), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
-        className: "".concat(prefix, "--header__menu-bar")
-      }), React__default["default"].Children.map(children, this._renderNavItem)));
-    }
-    /**
-     * Render an individual menuitem, adding a `ref` for each child inside of
-     * `this.items` to properly manage focus.
-     */
-
-  }]);
-
-  return HeaderNavigation;
-}(React__default["default"].Component);
-
-_rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "propTypes", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+function HeaderNavigation(props) {
+  var ariaLabel = props['aria-label'],
+      ariaLabelledBy = props['aria-labelledby'],
+      children = props.children,
+      customClassName = props.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
+  // so when we spread that should be the one that is applied to the node
+
+  var accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
+    className: className
+  }), /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "".concat(prefix, "--header__menu-bar")
+  }, children));
+}
+
+HeaderNavigation.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
   /**
    * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
    * or `HeaderMenu`
@@ -103,8 +57,6 @@ _rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "propTypes", _rollupP
    * Optionally provide a custom class to apply to the underlying <nav> node
    */
   className: PropTypes__default["default"].string
-}));
-
-_rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "contextType", usePrefix.PrefixContext);
+});
 
-exports["default"] = HeaderNavigation;
+exports.HeaderNavigation = HeaderNavigation;

package/lib/components/UIShell/SideNavFooter.js

@@ -28,7 +28,7 @@ var _Close, _ChevronRight;
  * user interaction to expand or collapse the side navigation.
  */
 
-var SideNavFooter = function SideNavFooter(_ref) {
+function SideNavFooter(_ref) {
   var assistiveText = _ref.assistiveText,
       customClassName = _ref.className,
       expanded = _ref.expanded,
@@ -53,7 +53,7 @@ var SideNavFooter = function SideNavFooter(_ref) {
   }))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--assistive-text")
   }, assistiveText)));
-};
+}
 
 SideNavFooter.propTypes = {
   /**
@@ -68,12 +68,6 @@ SideNavFooter.propTypes = {
    */
   expanded: PropTypes__default["default"].bool.isRequired,
 
-  /**
-   * Property to indicate if the side nav container is open (or not). Use to
-   * keep local state and styling in step with the SideNav expansion state.
-   */
-  isSideNavExpanded: PropTypes__default["default"].bool,
-
   /**
    * Provide a function that is called when the toggle button is interacted
    * with. Useful for controlling the expansion state of the side navigation.
@@ -83,6 +77,5 @@ SideNavFooter.propTypes = {
 SideNavFooter.defaultProps = {
   assistiveText: 'Toggle opening or closing the side navigation'
 };
-var SideNavFooter$1 = SideNavFooter;
 
-exports["default"] = SideNavFooter$1;
+exports["default"] = SideNavFooter;

package/lib/components/UIShell/SideNavIcon.js

@@ -21,7 +21,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SideNavIcon = function SideNavIcon(_ref) {
+function SideNavIcon(_ref) {
   var _cx;
 
   var children = _ref.children,
@@ -32,7 +32,7 @@ var SideNavIcon = function SideNavIcon(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
   }, children);
-};
+}
 
 SideNavIcon.propTypes = {
   /**
@@ -54,6 +54,5 @@ SideNavIcon.propTypes = {
 SideNavIcon.defaultProps = {
   small: false
 };
-var SideNavIcon$1 = SideNavIcon;
 
-exports["default"] = SideNavIcon$1;
+exports["default"] = SideNavIcon;

package/lib/components/UIShell/SideNavItem.js

@@ -21,7 +21,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SideNavItem = function SideNavItem(_ref) {
+function SideNavItem(_ref) {
   var _cx;
 
   var customClassName = _ref.className,
@@ -33,11 +33,11 @@ var SideNavItem = function SideNavItem(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className
   }, children);
-};
+}
 
 SideNavItem.propTypes = {
   /**
-   * Provide a single icon as the child to `SideNavIcon` to render in the
+   * Provide a single icon as the child to `SideNavItem` to render in the
    * container
    */
   children: PropTypes__default["default"].node.isRequired,
@@ -52,6 +52,5 @@ SideNavItem.propTypes = {
    */
   large: PropTypes__default["default"].bool
 };
-var SideNavItem$1 = SideNavItem;
 
-exports["default"] = SideNavItem$1;
+exports["default"] = SideNavItem;

package/lib/components/UIShell/SideNavLink.js

@@ -59,12 +59,6 @@ SideNavLink.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
    */
   className: PropTypes__default["default"].string,
 
-  /**
-   * Property to indicate if the side nav container is open (or not). Use to
-   * keep local state and styling in step with the SideNav expansion state.
-   */
-  isSideNavExpanded: PropTypes__default["default"].bool,
-
   /**
    * Specify if this is a large variation of the SideNavLink
    */

package/lib/components/UIShell/SideNavLinkText.js

@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["className", "children"];
 
-var SideNavLinkText = function SideNavLinkText(_ref) {
+function SideNavLinkText(_ref) {
   var customClassName = _ref.className,
       children = _ref.children,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -33,7 +33,7 @@ var SideNavLinkText = function SideNavLinkText(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
-};
+}
 
 SideNavLinkText.propTypes = {
   /**
@@ -46,6 +46,5 @@ SideNavLinkText.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var SideNavLinkText$1 = SideNavLinkText;
 
-exports["default"] = SideNavLinkText$1;
+exports["default"] = SideNavLinkText;